web前端开发工程师岗位职责

实践经验表明，Vue在数据量很大的时候不好维护，所以对于大型项目，Angular4显然更适合，但Angular比较复杂，还有面向对象、依赖注入、MVC等思想；如果由后端学过Java的人来做，应该也比较好上手；但是对于只学过前端的人来说，有一堆思想要领悟，上手比较慢；但Vue则相对简单，Vue的好用之处大概就是，用下来你发现，div还是那个div，css还是那个css，js也还是那个js，只是组织的方式和配合他们的工具不同而已。

当前Vue的生态环境相较两年前成熟了很多，相关工具、官方文档和非官方文档都很完善，社区也很活跃。越来越多的大公司已将Vue用于生产环境，github上现在也已经有数以万计的跟Vue有关的开源项目了。因此，对于中小型项目，你完全可以放心地使用Vue来构建。

既然说Vue工具齐全，那我这里简单列举几个常用的工具吧：

vue-router：用于配置单页面应用的组件和映射，使用的方式和ui-router类似，支持嵌套路由，正则匹配路由，参数传递，history模式

vuex：一个专门为Vue应用设计的状态管理模型和库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更

element:饿了么出品，基于VUE的组件库，开箱即用。

除了上述之外，还有webpack、axios、node等等工具可以用，且关于Vue的官方和非官方文档都很丰富，完全可以快速上手。

最后，Vue跟微信小程序很像，而且美团还开源了mpvue，意味着你甚至可以直接使用Vue来开发小程序。等于说，你学会了Vue，不仅学会了前端，还学会了微信小程序，一举两得，岂不美哉？

新版 uni-app 框架主要做了三大改进：

重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；

新增支持 Vite 构建工具，在H5平台实现秒开预览；

新增支持 Vue3x，实现更灵活的开发方式，及更高的运行性能；

基于这三大改进，uni-app项目获得了多快好省四大收益：

更多的语法支持，支持组合式API，业务聚焦，开发效率更高；

更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；

更好的运行性能，用户端响应更快，体验更好；

更小的代码体积，瘦身30%以上，更省体积、更省流量

更多的语法支持

新版uni-app支持Vue 3x框架，支持组合式API，可实现更聚焦的业务开发。

Vue 3x的一些新增特性，uni-app也已经完全支持，如：

支持<script setup>

支持<style scoped>、<style module>、State-Driven Dynamic CSS(v-bind)

支持jsx、tsx（h5,app 平台支持，小程序不支持）

另外，在小程序平台，新版uni-app也扩展了更多的语法，如：

更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型）

更完整的 props 支持（如传递函数）

更完善的 slot 支持（如作用域插槽）

更快的编译速度

开发者日常工作中，最无聊的就是等待编译构建。

某乎上还有一个”程序员在等待编译的时候都做什么？“的讨论帖，可见编译时间对开发者而言，是一个多么尴尬无聊的碎片时间。

uni-app本次升级vue3 & Vite后，在编译时间上有多少改进？带给开发者多少福利？我们安排真实测试，以数据说话。

测试环境说明：

硬件：RedmiBook 14 二代

处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 130GHz

内存：160 GB

*** 作系统：Windows 11 专业版 64 位 *** 作系统

关于编译速度，我们做了两个维度的对比：

纵向对比：挑选uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 26和vue 3x的编译时间

横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译时间，和uni-app的vue 3x版本进行对比

uni-app 历史版本纵向对比

我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 26和vue 3x的编译时间。

uni-app项目编译时间的采集方式：

vue 26版本编译时间 = webpack 的 statsendTime - statsstartTime

vue 3x版本编译时间 = 构建工具入口处记录 globalvite_start_time = performancenow()，构建工具编译完成时：performancenow() - globalvite_start_time

H5平台

对uni-app的三个项目模板分别运行到H5平台，进行多次编译测试，并求其均值后，获得如下数据：



由此，我们可以观察到：

在vue 26环境下，随着项目复杂度的提升，H5首页预览所需编译时间会直线增加；这是因为在vue 26版本下，虽然仅预览首页，但依然会使用 webpack 编译整个项目资源；故项目越复杂，编译时间越长；

在vue 3x环境下，H5首页预览的编译时间跟项目复杂度也有关系，但增幅不大；这是因为在vue 3x版本下，使用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。

通过图表对比，我们可以直观得出结论：vue 3x环境下的首页编译时间，平均不到vue 26环境下的十分之一。

换言之，vue 3x版本下的首页编译速度，相比vue 26版本，有十倍效率提升。

这个十倍效率提升，主要得益于新版采用Vite作为构建工具，由此带来了两大好处：

使用原生 ESM 文件，无需打包，实现极速的服务启动；

预览（运行）使用esbuild作为打包工具，相比vue 26环境下的webpack，构建速度快 10-100 倍（这不是我们夸大，详见esbuild）

本着这个十倍效率提升，小伙伴们还不赶紧上手试试？

小程序平台

对uni-app的三个模板项目运行到小程序平台，多次编译测试，并求其均值后，获得如下数据：



从上图对比数据来看，我们可以得出结论：小程序平台，vue 3x版本下的运行编译，相比vue 26版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。

App平台

对uni-app的三个项目模板继续运行到App平台，多次编译测试，并求其均值后，获得如下数据：



从上图对比数据来看，我们可以得出结论：App平台，vue 3x版本下的运行编译，相比vue 26版本，编译性能提升将近50%。

虽没有H5平台的十倍效率提升那么刺激，但将近50%的速度提升，经常开发小程序/App的小伙伴，还不心动？

业内优秀框架横向对比

除了采用不同版本的uni-app进行纵向对比外，我们还使用业内优秀的跨端框架Taro，创建空的项目模板，进行横向对比测试。

具体测试方案：

安装Taro的最新cli，本文测试时使用的版本为"@Tarojs/Taro": "3316"

使用Taro init命令，分别选择react、vue、vue3框架，创建三个默认项目模板，三个项目名称分别为taro3-react、taro3-vue、taro3-vue3，如下图：



使用npm run dev:h5，运行到H5平台进行预览，记录每次预览编译时间，重复执行，求其均值

关于Taro编译时间的计算方案：

开发一个Taro扩展插件，插件规范参考Taro官网 - 插件功能

在ctxonBuildStart中记录开始编译时间

在ctxonBuildFinish中记录编译结束时间

两者的时间差，即为编译过程消耗时间

然后使用uni-app的cli命令行，创建基于vue3x的空项目模板，项目命名为uni-app-vue3。

我们使用各自框架的命令行，将如上创建的5个项目分别编译到H5平台和小程序平台，多次测试，并求其均值。

同框架版本在H5平台上的编译时间，结果如下：



从图中可以看出，uni-app的vue3版本，在H5平台上的首页编译预览性能是遥遥领先的。这个遥遥有多远呢？这么讲吧，你都编译20次了，友商第一次还没完呢。

继续编译到小程序平台，多次测试，求其均值，结果如下：



从图中可以看出，uni-app的vue3版本，在小程序平台上的编译性能也是遥遥领先的，这个遥遥也不近。

更好的运行速度

开发环节编译快了，那面向最终用户的软件，运行性能怎么样？

我们进入性能测试章节。

测试方案：

开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。

界面如下：



测试机型：小米 Mi 10 pro、MIUI 125 (21113 开发版) 、微信版本 8016

准备工作：每次开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。

评测点：长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？

测试计时方式：

选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），

点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；

在小米手机上进行多次测试，求其平均值，结果如下：

记录条数 200 400 600 800 1000

vue2 30ms 43ms 56ms 72ms 90ms

vue3 8ms 9ms 9ms 8ms 9ms

从表格中可以看出：

随着页面记录的增加，vue 26版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；

基于vue 3x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 26版本。

从这个常见的长列表组件响应实验来看，vue 3x的性能体验要远高于vue 26版本。

更小的代码体积

项目发行后的代码体积，是一个很重要的考量指标：

H5平台：更小的代码体积，可以帮助开发者节省服务端带宽及CDN流量，可实现更快的资源加载及页面渲染；

小程序平台：更小的代码体积，可加速小程序包的下载（甚至可能免了分包加载的繁琐），帮助用户更快进入小程序业务界面；

App平台：更小的代码体积，可实现更快的App启动，帮助用户更快进入App首页

为了测试vue 3x新版升级后，代码体积的变化，我们同样做了两个维度的测试：

纵向对比：选择uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 26和vue 3x的编译包大小

横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译后的包体积大小，和uni-app版本进行对比

Tips：

开发阶段重在编译速度，对应npm run dev *** 作

发行阶段重在编译包大小，对应npm run build *** 作

uni-app 不同版本纵向对比

我们复用之前创建的uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 26和vue 3x的编译包体积。

uni-app项目编译包体积的采集方式：编译到对应平台后，记录编译后文件夹的大小。

H5平台

H5平台编译后代码体积记录如下：



从统计结果来看，uni-app的vue3x版本，在H5平台上的编译包体积至少瘦身30%以上。

H5平台的瘦身优化，主要得益于uni-app框架的底层全面重构，实现了更彻底的摇树优化。

小程序平台

小程序平台编译后代码体积记录如下：



从统计结果来看，uni-app的vue3x版本，在小程序平台上也有大幅瘦身。

一、HTML5+CSS3

HTML5和CSS3是通往Web工程师路上必须学会的基本内容，主要包括了解常用浏览器和浏览器内核;了解语义化的概念;掌握HTML5语法及使用技巧;掌握HTML5常用标签。掌握CSS语法及使用技巧;掌握DIV+CSS布局方式;掌握常见网页布局模式。掌握HTML5新布局标签、多媒体标签;掌握CSS32D、3D变换、动画效果;能够使用CSS3新属性美化修饰网页;了解移动端屏幕、移动端浏览器、 *** 作系统的不同等内容。

二、JS交互设计

JS交互技术可以赋予页面一个动态的效果展示，提升用户的浏览体验，这部分主要是通过JS的学习掌握JavaScript基本语法;掌握常见JavaScript算法;掌握DOM的各种 *** 作;熟练使用面向对象思想进行DOM编程;掌握JavaScript的高级语法;掌握JavaScript常见兼容性方案。熟练使用jQuery *** 作DOM;熟练使用和编写jQuery案例。

三、Node开发

Nodejs不仅仅是一个框架，它是一个完整的JavaScript环境，配备了开发人员可能需要的开发工具。所以学好Node是在打通前后端开发中需要掌握的技术。这部分需要掌握ES6的基础用法和兼容性;掌握ES6的核心语法;使用ES6实现前端模块化开发。使用Webpack模块打包器;使用Nodejs进行Web服务端开发;掌握JavaScript异步编程模型;掌握JavaScript模块化编程方式;使用Nodejs *** 作MongoDB数据库;独立开发基于后台接口的动态网站、Ajax数据交互的项目;独立完成企业网站从前台到后台的基本开发工作。

四、前端框架

前端框架是Web开发人员需要熟练掌握的技能，并且在实际开发中是会被广泛应用的，那么对于前端框架方面需要掌握现在主流的Vue、React、Angular等，掌握D3js进行大数据可视化交互开发;掌握Vue技术栈进行项目开发;掌握React技术栈进行项目开发;掌握使用主流框架开发门户网站、管理系统、移动Web等客户端;掌握Webpack项目构建配置流程;掌握Web项目的部署与发布模式;掌握常见网站业务模块开发等。

五、小程序与APP开发现在移动应用越来越受欢迎，掌握了小程序和APP开发技术可以增强自身竞争力，这就需要掌握小程序的开发基础;能够独立开发小程序项目;能够掌握Canvas的使用;能够掌握小程序的部署与发布;能够掌握小程序开发框架mpvue的使用;掌握第三方AI平台的使用。能够掌握小游戏开发基础;能够独立开发小游戏项目;能够掌握小游戏的部署与发布;能够独立使用ReactNative开发原生App。

视频教程：

网页链接

命令行中执行 webpack ，默认会使用 webpackconfigjs 配置文件。

1将现有的 webpackconfigjs 文件名修改为 webpackdevconfigjs ；

2运行 webpack ，如下图所示：

实验是检验用法的最好途径，于是设置目录结构如下：

src

|---indexhtml

|---indexjs

|---asssets

    |----1jpg

目的是将脚本打包到一个统一的dist文件夹下。

使用webpack-dev-server重新打包并打开indexhtml时，报错如下：

为什么找不到呢？

这时你需要在devServer中添加publicPath属性：

重新使用webpack-dev-server打包，并打开indexhtml你会发现，找到了bundlejs。但是仍旧提示找不到

所以，此时devServerpulicPath属性的含义可以这么理解：

可为什么找不到呢？先回味一下官方原文

也就是说：如果你require了一些资源或直接引用了网络上的资源，这些资源里包含uri属性（如css中设置img：url('/1jpg')），就要使用就这个属性，否则会找不到文件。（如果没有使用uri资源,那么这个属性没什么用）。

说人话---这个属性就是让webpack在打包时才能根据配置动态修改uri中的相对值的；你不配置，webpack打包后的bundlejs中引用的url不对。

于是再去配置output下的publicPath，将其修改为

重新执行webpack-dev-server，打开indexhtml发现一切正常！

后来尝试，不配置webserverpublicPath，而只配置output中的publicPath且修改为：

重新执行webpack-dev-server，打开indexhtml发现一切正常！

难道我对webserverpublicPath的理解有错？

比较了加与不加时，控制台打印出的日志才明白：

以上就是关于web前端开发工程师岗位职责全部的内容，包括:web前端开发工程师岗位职责、前端就业前景怎么样、前端选择vue还是Angular4等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！