前端的知识点很多很杂，也有很多垂直方向，所以我们很难全部学完，关于学习路线，罗列太多的知识点，可能让人找不到主线，更加迷茫，甚至望而生畏，直接劝退了...

　　我们可以把前端成长过程划分为几个阶段，然后看看每个阶段需要具备什么样的能力，进而决定要学习什么内容。

　　针对刚入行的初级阶段，我们一般不会安排特别难的任务，主要还是完成一些简单的业务模块开发，比如用户列表、创建用户的表单等，这个阶段最大的要求就是，做事能让人放心，给你一个任务，你能很好的完成，不要牵扯leader太多的精力，不要出现过多的bug。

　　在这一阶段我们要掌握开发一个页面必备的基础知识，包括HTML、CSS、JS，还要熟悉一门框架，学会一些基础的调试方法。

　　虽然目前由于有很多好的Ui库，比如ElementUI，AntDesign，导致我们不再写很多原始的html，但这毕竟是我们前端的基本功，不会的话真是贻笑大方了，HTML这块重点看几个点:

　　语义化标签：不要一个Div打天下，标题就用h1-h5，列表就用ul li，一个页面可以分几个section等

　　表单：这是html中难点，熟悉下原生的form，input，select，radio等用法，比如上传文件，现在我们依然还是利用原生input来实现文件选择效果。

　　是H5的新特性：拖拽，本地存储，Canvas等，这部分可暂时不深入学习，后续再补上。

　　通过js 如何操纵Dom，如何获取Dom，修改Dom，Dom有哪些属性等，这块也算作js必须掌握的内容。

　　这个阶段学习CSS就一个目标，就是像素级还原UI稿，大部分人写CSS是凑出来的，而不是算出来的，为什么呢？就是因为对CSS掌握不牢固，无法通过计算推导出来每个元素的样式，这样靠凑出来的代码，可以称作“巧合式”编程，一旦遇到修改，可能改了这里影响那里，所以还是要求我们对基础知识掌握要牢固。

　　盒模型：这没什么可说的，基本功的基本功，还需要了解BFC相关内容，比如两个DIV他们的margin合并问题。

　　定位：熟悉各种布局方式，static、relative、absolute、fixed、sticky应该如数家珍

　　布局：百分比布局、flex布局，grid布局等，能够写出自适应的布局，了解常用的自适应方案，如媒体查询media、rem等

　　选择器：不能只会写后代选择器，还要知道兄弟选择器、子选择器、元素选择器等，了解不同选择器的优先级，避免动不动就“!important”。

　　除此之外，还有css的单位，display几种方式，css样式的继承问题等，都可以好好看看。

　　js可以说是非常难学的一门脚本语言，非常的灵活，有很多需要掌握的技术点，而且由于js运行需要宿主环境，宿主还会提供一些特定的js对象，也需要了解，比如浏览器中就会有location、navigation等浏览器环境特有的对象，还有DOM模型，虽然不属于语法范畴，但是也是需要学习并且也会经常用到的知识，node中和浏览器中，微任务宏任务执行时序等等，也会有一些差别，这也是因为宿主环境不同，带来的知识点。

　　针对一个初学者，不必面面俱到，在这一阶段我们需要掌握js基础语法知识，重点学习下ES6相关新特性，针对平时工作中经常用到的知识点着重学习。

　　数组的几种遍历形式：for、forEach、map、filter、find、reduce等，面试时我经常会问几种遍历有什么区别，很多工作多年的，也说不出各个遍历具体的使用场景及优点，这是非常不可取的，要不然也不会有这么多遍历方式~~

　　对象的遍历：for of，for in，Object.keys等，也是一样，要清楚每个遍历方式的区别

　　promise：如何封装一个方法返回Promise，Promise的三个状态，Promise的静态方法，说到静态方法，发现很多人会把.then和.catch当做静态方法，说明对静态方法的概念，或者原型方法不是很清楚

　　函数封装：知道把一个大的功能拆成多个小函数，会封装一些简单的基础utils方法

　　针对html、css、js的学习，我是从w3school 在线教程开始的，现在也有很多其他优质学习网站，这段时间的学习，最好是系统式的，不必精通，但是都过一遍知识点，知道有哪些东西。

　　现在前端开发，已经度过了刀耕火种的原始年代，目前新项目开发绝大部分都使用前端MVVM框架，Vue和React是目前国内公司使用最多的两个框架，可以选择一门进行学习。

　　从我的经验来看，Vue确实上手简单点，可以从Vue学起，尤其是Vue2，相对来说对新手更加友好，也更容易理解现代框架的思想，如果用过jQuery，感受会更加明显，会对这种通过数据驱动页面渲染的方式大为赞叹。

　　Vue3和React上手成本更高，特别是hooks的引入，对如何组织整个项目结构，有了更多的要求，不像之前Vue的optionsAPI和React的Class组件，限定好了各个生命周期，也就是固定了一种页面编程的范式，新手不用太多思考，也能组织出来一个不算太乱的页面，而现在hooks这种方式，如果组织不好，可能页面逻辑会比较凌乱，如何合理划分模块、如何分层设计项目，也是我们一直学习思考的方向。

　　框架的学习建议直接阅读官网的教程，边读边实践，一个知识点一个知识点学习，可以暂时不去看高阶教程，但是基础教程一定要吃透。

　　除了框架本身的学习，为了完成一个完整页面，我们还需要进行一些额外的知识和技能。

　　通过框架实现一个完整的项目，通常会用到路由Router和状态管理Store，这两块也可以都从官网教程看起，然后项目中练习。

　　明白如何利用router复用公共部分，路由跳转push和replace的区别，哪些数据应该放进store，mutation和action有什么区别等

　　页面开发还必然涉及到网络请求，比如axios怎么使用，ajax、fetch和axios有啥区别，几种请求方式get、post、put、delete、option有什么特点，使用场景是什么，网络请求方法要不要封装，要不要增加一个service层负责网络请求，比如在service/user.js中封装用户的列表获取、用户详情获取、添加用户、编辑用户、删除用户的几个method，页面通过调用service中的方法来实现网络请求。

　　学会设计一个页面，data包含什么，computed计算属性包含那些，那些数据需要watch，mounted中要处理什么事情，整个页面的数据流时序是怎样的，这一切都是在敲击代码前应该思考的，还是上面说的，不要“巧合式”编程，要学会提前设计，最好是先出设计文档，这样才能慢慢锻炼自己的设计能力。当然了，因为是新手，不可能设计的特别好，然后在编程之后，反过来再思考，设计是否合理，哪里需要修改，通过对代码重构最后交出满意的代码。

　　我们每天都在写Bug，如何快速定位bug，节省开发时间，让我们每天能有更多时间摸鱼学习，是我们必备技能，越早学会这种技能就能节省越多的时间，因此调试技巧的学习是一项投入产出很高的投资，必须重视。

　　一般我们使用console.log打印中间变量进行调试，针对dom的打印还有console.dir，可以看到某块dom全部属性，使用console调试最大问题就是不可能打印全部变量，效率太低。

　　更好的方式是使用谷歌浏览器提供的断点功能，我们可以进行单步调试，看到一个函数运行中的中间变量，然后看看是哪块出现了问题；谷歌浏览器不仅可以调试js，还能调试css，可以在页面中把css调试好后再同步到代码中，效率更高；也能针对dom结构的变化、属性的变化进行中断，方便我们查看鼠标移入才展示的元素的样式。

　　除此之外，还要学会看出错信息的调用栈，通过调用栈，快速了解出错的地方是哪里的调用引起的。

　　主流框架一般都有相应的浏览器调试插件，如VueTools，通过这种工具可以直接查看一个组件属性props是否符合预期，data是否符合预期，修改data值观察组件展示是否符合预期等，我发现有一些工作很多年的人竟然不知道使用这样的工具，也是非常的神奇。

　　当有问题不好定位时，可以使用“控制变量”的思想，先临时屏蔽（注释掉）一些组件和调用，然后看是否符合预期，通过这种屏蔽可以快速缩小我们排查问题的规模，能够快速定位到某个出问题的函数。

　　初级阶段，我们还是以实用为主，不必去深究一些原理性的东西，但是不代表我们浑浑噩噩的去凑出来一个页面。某个知识点如何使用应该非常清楚，不同用法之间有什么区别也要门清，不通过巧合来进行编程，学会编码前设计，编码后重构，为后续发展打下良好的基础。同时掌握调试技巧，节省大量的时间，用于投资自己。

　　通过以上这些学习，我们能够独立完成一些简单的业务功能开发，完成小组长安排的研发任务，不给人添麻烦，这样我觉得就算是比较优秀的初级前端了。

　　经过一年左右的锻炼，应该已经能够非常熟练的应对简单业务模块的开发，也开始慢慢承担更加复杂、有技术含量的模块开发，在这个阶段，你要开始独当一面了，也对能力有了更高的要求，这体现在做事方法和技术提升两个方面。

　　在做事方法上，不再只是简单的来什么任务就做什么任务，开始思考这个背后的需求是什么，解决什么问题，产生什么价值，有没有更好的方式去解决这个问题，试着去主动进行一些优化工作，不再只是单纯的等着小组长的安排，可以试着提出，我觉得**可以更好，我能不能这样做等等。

　　在技术上，不再只是为了完成一个页面的开发，而是开始思考怎么更好地完成，怎么应对以后需求的变化，开始封装公共组件和utils；同时横向扩充自己的前端技术栈，有更广阔的前端视野；关注下前端工程化相关技术；同时也别忘了继续夯实自己的前端基础。

　　为了提高代码的复用性，作为中级前端，应该开始试着封装一些团队中的公共组件了，这就要求在写代码的时候进行观察和思考，哪些功能是通用的，能不能抽取出来，抽取出来应该对外暴露怎样的API，也开始思考怎么算是一个好的组件？一个项目中的组件怎么分层？基础组件、业务组件有什么区别？怎么平衡组件的通用性和易用性？

　　建议首先好好学习下一些优秀的组件库，比如ElementUI和AntDesign，看看人家都抽取了哪些组件，每个组件暴露了哪些属性，为什么要暴露这些，能精简吗，有遗漏吗，组件的属性命名人家怎么做的，交互是怎么设计的等等，先别看源码，先学习人家的设计，继而再阅读其源码，看看人家是如何实现的。

　　试着去自己封装下通用的组件和库，比如表格组件、表单组件、网络请求js方法、eventBus等，亲手实现下，试着造造轮子，看和做，收获是完全不在一个层面的。

　　前端不只是要在某一个领域做深，事实上可能你也很难做深，或者很难找一个有壁垒的方向，值得你投入几年的时间去学习，横向扩充技术栈同样重要，技多不压身，面对问题时也知道该用何种方式去解决，前端方向很多，可以任意选择几个去学习。

　　：可以玩玩express或者koa，试着去用nodejs写写接口，或者做一做文件读取的事情，亦或是使用nodejs开发一些cli工具等，都是很不错的尝试。

　　：也可以试着学习下多端开发技术，比如uniapp、ReactNative、flutter、electron等，不用都学，挑个一两个尝试下

　　：到现在你做的可能都是SPA，试着学学服务端渲染技术如nextjs、nuxtjs等

　　：微信小程序啊、公众号开发啊等，不过目前也不是主流了，不必投入过多精力，看看就好，还有像版本管理git，也需要好好学习下常用命令

　　不必从头配置一个项目，但是能够看懂人家的配置，并有能力根据需要去修改，学习下目前主流的打包工具用法，能够进行基础的配置。

　　在学了一段时间多种技术栈之后，还是要抽时间补一补咱们前端的基础课，夯实基础才能走的更远。

　　5.总结中级阶段开始思考如何提升研发效率了，并着重扩展自己的技术栈，同时夯实基础，为进阶高级前端打下坚实基础。

　　高级前端相较于中级前端最大的转变，就是开始承担团队事务，不再只是考虑个人工作，对产品设计能力、基础架构能力、项目管理及团队管理四个方面，都开始有更高的要求。

　　如果是大公司，分工比较明确还比较好，大家各司其职，前端只需要关心前端开发即可。但是在很多小公司或者中型公司，甚至大公司的某些小部门中，很多时候可能需求并不是特别明确，或者有不合理之处，或者是一些偏技术的产品，需要将需求转为产品，然后推动下面的人去实现，所以就需要有一些产品Sense，前端开发面向的也直接是用户，所以有一定产品能力也是必须的。

　　可以通过阅读相关书籍，项目实战，平时针对性的思考总结，来提升自己的产品方法论。

　　有机会可以试着画画产品原型，工具使用本身还是非常简单，像axure、墨刀等，功能都比较完善，我更喜欢使用axure，功能强大，各种交互都可以实现。

　　我更关注一些设计背后的底层理论，比如ElementUI和AntDesign等，他们背后都会有一些设计原则，而我都会去仔细阅读这部分内容，看看人家是怎么思考的，然后抽象出一些设计原则和方法论

　　后续再看到别人的产品，就会有意识的思考人家是如何考虑的，用户是谁，场景是什么，解决了什么需求，提供了怎样的价值，商业模式如何等。

　　由于要组织多人协作，高级前端也要慢慢开始具备一些架构能力，如何提升架构能力可能比较抽象，我们可以通过以下几个具体工作，去逐步提升对整个项目的设计能力。

　　：为什么要用微前端，相比单体应用有什么优势？可以学习下qiankun的使用

　　：单一仓库相比多仓库有什么优缺点？使用场景是什么？ 可以学习下lerna、turbo

　　：像vue-cli这种，看看人家是如何通过封装，来简化项目结构及配置的，或者是写一下cli工具，提升项目搭建效率，比如快速创建新项目模板等

　　：学习下如何发布一个前端组件库，以解决多项目直接的组件共享问题，可以学习下主流组件库源码

　　：前端utils或者基础组件，也是可以写单测的，如 jest；或者是端到端e2e测试，监控核心页面是否正常展示

　　了解项目管理的相关知识，在工作中可以适当争取几次做项目负责人的机会，锻炼自己在项目拆解、分工、排期、追踪等环节的经验。

　　首先要明白作为一个前端管理者，你的定位是什么？我的理解是基础管理者主要还是服务和赋能的角色，服务和赋能好你的下属或者伙伴，帮助其有更多产出，团队的产出，就是你的产出，当然了，你也要让你的领导明白这一点~~

　　：频率不要太高，时间不要太久，但是必须定期举行，比如周一周三早晨日会，周五下午周会，既做到沟通，又不耽误太多时间

　　：招聘也是一项非常重要的工作，如果招来不合适的人，代价则会非常巨大，因此要重视这个工作，提前想好要找的人能力模型是什么样的，有哪些一票否决的情况，如何设计面试问题来筛选出来你想要的人

　　高级前端是团队研发的核心骨干，及承担了核心的研发工作，也开始分担一些团队管理工作，不再只关注自己，而是开始关注团队整体的战斗力，可在产品设计、架构、项目管理、团队管理四个方面做好提升。

　　资深前端要在某个方向进行深耕，那都有哪些方向呢？目前我们可以选择以下几个中的1-2个

　　低代码是这几年比较火的一个方向，其中包含的垂直领域也不少，比如可视化大屏、表单设计、报表设计器、管理页面的设计器、H5活动页设计器等。

　　这里面并不涉及独特的前端技术，而是利用已有的前端技术，做出一个赋能性的产品，帮助其他岗位的人员能够快速使用非编码的形式，解决业务难题，从而实现降本增效。

　　多端开发技术本质上还是为了降本，通过一次编码，生成多端，大大节省了研发成本，目前我们应该也能感受到，纯原生APP人员的需求大幅度减少，一个是最近这几年很少有新产品推出，另一方面小公司要养几个原生开发成本太高，多端开发很好的解决了这个问题，可以在研发前期，以较低成本进行多种产品模型的尝试，真要是赚钱了，后续再转成原生开发也不迟。

　　随着webgl技术的发展，以及一些优质的第三方库如threejs的出现，前端开发人员也可以从事3D、游戏等相关产品的开发，3D技术不仅设计前端开发，还要了解一些数学及图形学相关知识，门槛较高，有一定的技术壁垒。

　　与3D相关的还有Gis方向，即地理信息系统，一般可能和地图相关，比如一个物流公司可能要检测物流车辆的实时位置信息，并在可视化大屏中展示出来，就要用到Gis相关技术。

　　我认为一个资深的前端，不能把自己限定在前端，前端工程师本质上也是程序员，需要具备程序员应有的基本素养。

　　：了解计算机组成原理、编译原理，熟悉常见的通信协议，如http协议、TCP协议、UDP

　　：熟悉常见的数据结构和算法，算法虽然日常工作中使用较少，但是不代表没有用处，它的价值在于，当你不会算法时，很多代码你是根本写不出来，了解这方面知识，也可以帮助写出更加高效的代码，而且也是面试必考题

　　：设计模式就是针对一些特定问题的最佳实践，在合适的场景，套用合适的设计模式，能让代码更加高效、简介、已维护

　　：如可读性、可扩展性、高内聚低耦合等，在编码中时刻思考如何能让别人看懂，可维护。

　　由于我目前也还没有达到专家的职级，暂时无法给出自己的心得体会，只能说一说我心中的的专家应该是什么样的。

　　只懂技术不懂业务，是没法引领产品发展的，作为专家需要给下面的人指明方向，那么就必须要懂行业，知道目前公司产品和别人的差距在哪，需要在哪个方向重点发力，需要储备怎样的技术等

　　能够带领十几个或者几十个，上百个前端开发，可持续的发展，懂人性，会用人，能容人，愿意帮助下属成长，合理分配收获的果实。

　　前端专家在技术上应该能够cover住1-2个领域，有自己的技术作品，精通前后端，为前端风险兜底。

　　以上就是我根据个人经验总结的前端发展5个阶段，如果有不同意见欢迎评论交流，如果觉得不错，欢迎点赞，感兴趣的人多的话我再总结下如何更加高效地学习前端。