web前端开发工程师的三种级别，技术决定你能拿5K，还是15K，还是25K

￡神魔★判官ぃ 2022-12-08 02:09 105阅读 0赞

随着信息技术不断发展，前端技术的发展也经历了不同的阶段。前端概念随着移动智能手机的普及被正式提出，混合APP开始被广泛开发。近年来，由于前端技术开始实现工程化，一些企业前端开发任务逐渐向后端拓展，逻辑思维能力也逐渐成为前端开发人员必备的能力。从2018年开始，用户体验感要求不断提高，小程序作为一种不用下载就可以使用的应用颇受用户和开发者欢迎。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
前端工作还不仅仅只是网页的制作，还有微网站、APP的制作，游戏制作，例如可以将你开发的Web页面直接打包成手机使用的APP应用，游戏的互动界面更是以前端开发技术为主。大规模的公司把这些分得很细,

前端到底是个啥：前端其实是个很大的范畴。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript 。web前端开发工程师的三种级别，一般分为初级工程师、中级工程师、高级工程师。

初级前端工程师：能熟练使用html、css、js 主要工作还是搭建静态页面。进阶的知识的话就是响应式这一块了，一套代码能适配pc+手机是初级前端工程师的进阶，

中级前端工程师：作为一名中级前端工程师的话，除了上面的以外，还需要会使用一些框架之类的东西，像bootstrap、jquery之类的。进阶的知识应该是ajax这一块了，当然ajax并不难，了解怎么与后台交互是学习ajax的关键点，

高级前端工程师：想成为高级前端工程师，首先要学习的就是前端工程化，进阶框架angular、vue、react 。那它和jquery有着很大区别。vue是数据控制页面渲染及状态，而jquery是DOM节点控制渲染，vue渲染页面更容易更优雅。vue能够把前端项目彻底工程化，有配置文件、可以安装第三方模块、配合webpack打包、可以实现模块化开发…等等，当然简单是它最大的优势。进阶就是要学习es6 7 语法、vuex、Element\_ui （开发pc端框架）、vux（开发手机端框架）、Mint UI（开发手机端框架）、Nodejs（后端语言，js语法）

近几年来，前端岗位的热度一直处于稳中有升的状态。通过百度搜索指数的趋势图我们可以看到，随着HTML5和ES6的推广，从2014年开始至今，前端一直处于逐步上升、正常波动的状态，没有回落降温的趋势。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
数据来源：百度指数

通过各大招聘网站可以看出，前端岗位需求量大，薪资待遇也在不断提高，尤其是高级前端岗位缺口很大，不存在前端岗位饱和的现象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
前端岗位是刚需

随着用户对用户体验的需求不断提升，前端部分的复杂度也在不断提高。传统的美工+后端工程师的工作模式已经不能适应日益复杂的前端需求。在这种情况下，前端工程师岗位应运而生，并逐渐发展壮大。

前端岗位诞生后，视觉工程师、前端工程师、后端工程师的岗位分工更加明确，岗位间协调可以完成更大更复杂的项目。各岗位间的分工协作的一般形式如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
视觉工程师从传统的美工岗位的页面切图工作中解放出来，更加专注于页面视觉部分的设计，使得现在的很多网站配色合理、结构清晰、主次分明、用户体验得到了很大的提升。

后端工程师将会从前端部分解放出来，更多或完全的关注于后端的业务逻辑和数据操作的实现，提高了工作的效率等。

前端工程师，填补了视觉工程师和后端工程师之间交互的空白，与两者进行协作，完成前端部分的实现。

随着前端部分的复杂度不断提高，前端工程师的岗位将是市场的刚需，需求量必然会不断的提升。

前端工程师的生存现状

前端的热度稳中有升、岗位需求量大、又是刚需，为什么还会有人抱怨前端岗位饱和了呢？

前端入门相对容易，很多人自己在网上看了些教程，读了几本书，会用HTML和CSS切图并能利用插件实现一些类似轮播的效果，就认为自己是一名不错的前端工程师了。可是，很多人可能仅仅处在准初级前端开发工程师，甚至入门级前端开发工程师的水平，难找工作也属正常。

对于菜鸟来说，市场永远是饱和的。

与入门级前端开发工程师的求职遇冷截然相反的是，具有扎实的基础知识和完善的体系结构的优秀前端工程师，尤其是高级前端工程师，求职相对容易，市场缺口较大，薪资待遇也相对教高。

4.前端工程师的知识体系

优秀的前端工程师只有具有扎实的基础知识和完善的体系结构，才能在实际工作中灵活应用很好的解决实际问题，写出高质量的代码。

随着前端技术的飞速发展，前端领域所涉及的知识越来越多。基础知识、工程化知识、框架和工具的使用等知识杂乱的散落在网络上，乱花渐欲迷人眼。其实，对于前端工程师而言，HTML、CSS、JavaScript是最为基础也是最为重要的知识体系。

前端的岗位职责主要包括页面制作和交互实现两部分。

页面制作，主要是由HTML和CSS技术来实现页面的静态展示效果。

交互实现，主要是由JavaScript技术来实现的页面的交互效果。其中交互主要包括用户与页面的交互（由DOM技术实现）和浏览器与服务器的数据交互（通常由Ajax等技术实现）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
在掌握了基础模块的基础上，前端工程师还必须不断学习、了解前端的高阶知识和技能，不断提升自己的能力。例如，页面架构、移动页面开发、单页系统、前端工程化、各种框架和工具的使用等知识。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]

在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：603=985=993  也可以关注我的
    微信公众号：【前端留学生】自己根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法，
    以及一些前端学习手册，前端面试题，端开发工具，PDF文档书籍教程，无偿分享给大家
    需要的话都可以自行来获取下载。

前端工程师进阶学习

一则笑话：一个前端工程师和一个后端工程师，两人协作开发了一个项目。项目结束后，后端工程师向其朋友夸耀。其朋友看后问他，页面上哪些是你做的。后端工程师无奈的说，凡是你看到的都不是我做的。

看了这则笑话是不是觉得前端岗位很有成就感呢？当然，我们前端也是非常感谢后端为前端提供了强大的数据支持。

如果你对前端感兴趣，想入门前端，或你已经在前端路上跌跌撞撞走了一段，其实最重要的还是得找对领路人，能从入门开始就系统学习，不走弯路，这才是最有效率、最快速的捷径之道！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/efeb154e991149a19d0966ccafa9e86d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/09f14a3d5709475cb15bbc5395001f5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f228ec3396b7439687225cf98ed17cc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/d2eb2208f55f4e069f60af105cc3d003.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/1bd36ae9d01c429f9c3c065a04bdd1c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/60af2bafa381409dbb09617914490b72.png