一、Web开发工程师是什么
Web开发工程师（英文：Web Development Engineer）又称为We前端开发工程师或前端开发工程师，是指从事Web前端开发工作的工程师。Web的"前端"是与用户直接交互的部分，包括在浏览网页时接触的所有视觉内容--从字体到颜色，以及下拉菜单和侧边栏。这些视觉内容，都是由浏览器解析、处理、渲染相关Html, CSS, Javascript文件后呈现而来。
无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后端开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
二、Web开发工程师工作内容
在用户终端产品与视觉和交互领域，运用 HTML、CSS、JavaScript 等专业技能和工具，从事产品研发的专业技术人员。
1、负责前端项目框架、架构的设计和开发；
2、负责解决前端开发流程中的各种痛点，攻克技术难关，改进和优化开发流程、工具和架构；
3、持续优化项目技术、保证代码质量和服务稳定、提升用户体验；
4、跟踪新技术发展并运用到实际项目中；
5、与设计团队紧密配合，能够实现设计师的设计想法；
6、与后端开发团队紧密配合，确保代码有效对接，优化页面前端性能。
三、Web开发工程师的工作要求
一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。一名优秀的前端开发工程师，不单单需要掌握前端必须的各种技术，同时还要掌握其它技术，需要掌握一点后台的知识，同时也要对网站构架有一定的了解，同时还要掌握一定的SEO网站优化技术，这样才可以称之为一个"优秀的web前端开发工程师"。除了技术以外，还需要一定的时间来沉淀自己。一名资深的优秀web前端开发工程师，是每个大型企业都渴望的人才。
1、必须掌握基本的Web前端开发技术，其中包括：html5、CSS3、JavaScript、DOM、BOM、Ajax、SEO等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
2、在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
3、必须学会运用各种工具进行辅助开发。
4、除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。
四、Web开发工程师的技能
前端开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。为了实现这个目标，开发需要熟练运用下列语言、框架、工具库：
1、三大语言：HTML, CSS, 和 JavaScript，了解各项技术的相关标准；
2、此外，掌握 jQuery 和 LESS 等工具库也很重要，它们能帮助开发者以更高效的方式编码；
3、很多前端开发岗也要求 Ajax 方法的使用经验，它可以帮助你使用 Javascript 在后台从服务器拉取数据，协助实现页面的动态加载；
4、对OO、MVC、MVVM等编程思想、前端框架有深刻理解，熟练掌握一个前端框架（常用前端框架Vuejs，AngularJS，React，Bootstrap，QUICK UI，移动端有：Frozen UI，weUI ，SUI，MUI，AUI）了解其原理（框架有很多，选择两三个主流的框架，熟练，深度了解才可以）；
5、熟悉常见JS开发框架源码实现，（如：prototype、jQuery、Mootools，Ext，Dojo，underscore、YUI、Kissy），至少熟练一种（当然也不要去选一些用的人很少的框架，要明白大项目都是团队做，不能自己搞一套）；
6、前端安全机制，熟悉HTTP协议以及浏览器缓存策略。
五、Web开发工程师常用工具
1、Vscode
这是前端开发人员必备的开发工具，安装简单，需要什么插件直接在里面安装。
Visual Studio Code是针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言扩展的生态系统。
2、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
3、Hbuilder
Hbuilder这个工具可以和微信web开发者工具一起使用，开发微信小程序，还可以开发app，开发的程序可以同时在安卓手机和苹果手机上运行，不需要分别写两套代码。HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
4、微信web开发者工具
主要用户开发微信小程序。微信web开发者工具是一款便捷实用的微信调试工具。微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块，小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
5、Bootstrap
Bootstrap是一个用于快速开发Web应用程序的前端工具包。它是CSS和HTML的集合，使用最新的浏览器技术，为你的Web开发提供时尚的版式、表单、buttons、表格、网格系统等等。
6、GitHub
GitHub是目前世界上最大、最先进的源代码平台。在此，您能发现6500万名用户和数亿个存储库，其中有2800万个是公开的。
由于任何人都可以注册GitHub，并免费托管自己的所有代码，因此全球各地的开发者都会持续使用GitHub来构建、发布和维护他们的软件。当然，它也允许用户在已完成构建的基础上，进行迭代式构建，从而减少了用户的重复工作量，并提高代码的整体质量。
同时，它带有内置的代码审查、超凡的协作功能(如处理错误跟踪和功能请求)。用户可以通过增强的DevOps模式，以及为整个工作流编写的脚本，来自动化GitHub的各项操作。
7、Atom
由GitHub开发的Atom，是一款适用于macOS、Linux和Microsoft Windows的免费开源式文本和源代码编辑器。它不但支持用JavaScript编写的插件，而且嵌入了Git控件。
Atom备受开发人员欢迎之处在于，您可以按需对其进行自定义，而无需编辑配置文件。除了支持跨平台的编辑之外，Atom的自动完成功能还可以帮助用户更快地编写出程序代码。
8、Notepad++
Notepad++是一个非常独特的编辑器，是开源软件，可以免费使用。是开发人员的必需软件。支持的语言有：C、C++、 Java、C#、XML、HTML、 PHP、Javascript。
六、Web开发工程师工作流程
1、需求分析
与产品经理、网页设计师进行需求沟通，深入了解网页策划情况、交互过程、设备适配要求等具体实现要求。看怎么实现需求，选什么框架等。重点是找出不合理的需求，然后和产品经理沟通怎么更改需求。
2、前端代码编写
根据网页设计效果图及网页设计师的页面标注，按照W3C规范，采用DIV+CSS技术对网页设计图进行"复原"，制作成Html文件。并对网页样式和js交互效果进行代码编写，如添加鼠标移上移出效果、头图自动播放效果等，让用户在使用网页的过程中具有"交互"感。
3、联调
联调指的是与后端开发人员进行接口数据上的调用传参核对。后端开发工程师给数据接口后，可以联调接口相关功能，前端工程师要注意后端工程师的接口开发计划，配合好联调时间。
4、自测
自测指的是在联调结束后，确认接口及请求返回数据正常的情况下，进一步针对多场景的交互情况，传递不同的参数给后台，查看是否会出现问题，以及按照需求和UI图检查是否开发完成、并且达到需求效果。
5、提测
在自测结束，就可以把相应最新的开发代码合并到提测分支进行整合，代码整合就绪以后，首先是去工作系统中创建相应的提测单，一般会在规定的提测时间前一天晚上之前整合好测试分支的代码，以免耽误测试工作。
6、反馈与修改
根据产品经理、网页设计师以及客户的反馈，对提测的产品反复进行修改调整，以达到最优的浏览以及交互效果。
总结
优化猩SEO：Web开发工程师薪资高入门门槛低，但是俗话说得好：入门容易，精通难。Web开发工程师需要掌握的知识点繁多，所以，要想真正全部掌握web前端工程师开发技能，并非一件易事。
参考链接：
web前端开发工程师_百度百科
https://baike.baidu.com/item/web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88/6965571
Web 前端和后端工程师的具体职责分别是怎样的？ - 知乎
https://www.zhihu.com/question/19911595
Web 前端工程师岗位职责_Web 前端工程师工作内容是什么- 职业百科
https://baike.zhipin.com/wiki/s6bb3ec613c193dad1nJy
前端工程师的基本工作流程_前端流程_秋色遇见喵的博客-CSDN博客
https://blog.csdn.net/weixin_45969432/article/details/109360969
前端的工作流程，工作任务是什么 - 知乎
https://www.zhihu.com/question/499257000/answer/2227213141
修改于2023-09-18
