作为一个前端工作近10年的老司机，帮你整理了前端5阶提升的技能图，想升职加薪学技能，看我这一篇就够了！
一位出色的前端工程师，一定要会具备阅读规范文档和阅读别人的代码和时刻学习的习惯，再加上一些常见的技术栈，基本上两三年就能到达中高级的水平，一线城市能拿到30K的offer不成问题的！
至于初级，中级，高级分要要掌握什么样的技能，其实在前端行业里面，对前端工程师的能力模型有一个基本的认知，不同公司的定义可能有细微差别，但是它的内核是一致的。
我们看先一个初级的招聘要求：
岗位描述：
1、移动端、PC端H5页面产品的研发和项目开发，负责一些复杂前端效果的实现。
2、移动端整体技术路线的迭代和优化，对前端技术进行框架选型研发。
3、参与前端工作的整体任务的分配和协调。
岗位要求：
1、精通JavaScript语言，熟悉Vue3、Vue2、jQuery、ECharts、React、Angular等前端开发框架和技术，并对部分框架有深入的实际应用。
2、精通HTML5、CSS3.0、Bootstrap、ElementUI、AntUI等前端设计语言及相关工具的使用，能够纯手工写前端代码和实现较为复杂的前端交互效果。
3、对Web前端技术有强烈兴趣，能对Web前沿技术研究和新技术调研，有良好的学习能力和团队合作精神。
4、有良好的沟通能力，能够快速熟悉和了解业务需求，能够结合UI交互效果，对UI需求提出合理化建议和意见。
由此可见，初级需要学习的东西还不少，关于初级，我个人总结一下需要学习的加一些知识点：
关于常见的硬技能：HTML/CSS/JavaScript。这3项是前端工程师从蛮荒年代发展至今从未脱离的核心技术。只懂其中一个或两个还不行，你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通，但你至少要能够运用它们完成大多数任务，而无需地频繁地寻求别人的帮助。
对于html而言，除了一些基础的html标签，ul、li、p、button、iframe、p、table等标签也很常用，nav、section、article、header、aside、footer等语义化标签也需要了解一下
还有Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas）等等
其次就是JavaScript和jQuery方面的一些东西
jQuery是一个JavaScript库：一组插件和扩展，可以更快，更轻松地使用JavaScript进行开发。
这个阶段，你学习的时候，可以多去练习一些项目，比如将jQuery用于倒计时器，搜索表单自动完成，甚至自动重新排列和调整网格布局。 当然这个时候，你可以通过一些工具类学习JS和Jq之类的一些知识和技巧，比如可以利用AGI来帮助自己更好的学习它，如果你对agi还不太了解，也可以私聊我给你免费的工具来使用
还有最重要的一点就是，自学是比较痛苦的，如果遇到一个技术上比较难的技术点，那么百度或者Google，有时候没有一个很威信的定义，死扣一天两天的还浪费时间，这里就需要一个学习交流的圈子 @终端研发部 如果浸泡在不错的圈子里一起分享问题和讨论，效率会比较高一些
前端框架
前面掌握了HTML+CSS+JavaScript之后，再学些Vue、React的基础内容，做几个小项目，基本上就能找到工作了。前端框架是一种提供了封装和抽象化的解决方案，可以帮助开发者更加高效地编写前端代码。常见的前端框架包括 Angular、React 和 Vue2，Vue3等。
一些小公司，项目业务逻辑不太复杂，项目质量要求也不是特别高，需要的技术不会太难。
至于中级工程师
你需要精通网页布局，然后精通j s特效，以及一些前后台交互的j s相关的东西，比如：
- BUI 框架
- 微信小程序开发
- 能独立开发 APP、小程序等项目
- 学会使用 Github
高级工程师
高级更多的不是学会了什么，而是思维上的不同，转变思维持续精进后能带来质的飞跃。
你需要学习几个进阶框架是angular.js、vue-cli、react 。 vue是非常必须要进行学习的，它和jquery有着很大区别。vue是数据控制页面渲染及状态，而jquery是DOM节点控制渲染，vue渲染页面更容易更优雅。
熟练使用vue框架，node.js，React，Angular，混合式开发/原生开发，说一下VUE，高级阶段你更要懂原理、知体系、举个例子来说：
vue是一套组建用户界面的，渐进式框架，vue能够把前端项目彻底工程化，有配置文件、可以安装第三方模块、配合webpack打包、可以实现模块化开发…等等，当然简单是它最大的优势。你尅利用VUE做个自动化缓存，发布自己的VUE开源小插件等等
还有就是要学习es6 7 语法、vuex、Element_ui （开发pc端框架）、vux（开发手机端框架）、Mint UI（开发手机端框架）、Nodejs（后端语言，js语法） 包括微信小程序，以及你需要掌握mvvm框架实现原理，类型检查，代码规范化的标准，了解webpack，gulp等自动化部署的开发；编写高效的算法函数，编写高复用性组件；
这些东西在工作中肯定会用到框架，那框架真的掌握了吗？最新的特性、设计理念这些是否了解。要知道任何事物的出现必有其缘由，作为程序员要保持一颗好奇心，多问问自己 WHAT/HOW/WHY。
高级工程师更要去注重基础和中和能力的提升，除了基础扎实，对具体主流技术栈要求趋严，
更看重技术广度，兼具跨终端和后端开发能力，更加注重综合能力和职业素养。
另外要了解最近流行的技术，比如目前最大的技术流就是AIGC了，毕竟现在前端技术与人工智能技术的结合，如智能交互，页面优化，智能客服等前端技术可以实现与用户的实时交互，而人工智能技术则可以自动识别用户的意图，提供快速、准确的解决方案，提高客户满意度。
还有就是我重点要说的软技能，比如你要学会架构和设计，缓存设计和注重用户体验。特别是用户体验，它是Web产品吸引用户的第一道菜，也是我们前端工作产出的重点！
最后的建议
在刚开始学习的时候，一定要主抓基础，避免盲目，毕竟前端领域知识点很多，值得学的东西也很多，把时间花在特别有用的方面上去。我之前的学习方法就是花时间学习成体系的知识并且研究得足够深入，而不是随波逐流。如果你只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍然是一事无成！