前端成长路线图
1. HTML
HTML⽤于定义⽹页的结构。你的第⼀步是学习HTML的语法，学会如何把页⾯拆分为多个部分。
任务： ⾄少撸5个纯HTML页⾯，你可以实现任意⽹站的页⾯，⽐如GitHub的profile页⾯或者Twitter的登陆页⾯。纯HTML会有点丑，但是不⽤担⼼，专注于⽹页的结构。
2. CSS
CSS，全称Cascading stylesheets，是⽤来美化HTML页⾯的。
学习CSS语法，并且熟悉CSS的常⽤属性。
学习Box Model，学会使⽤Grid和Flexbox布局。
学会使⽤Media Queries来实现响应式布局。
任务： 使⽤CSS美化第1步中实现的HTML页⾯。如果你实现的HTML是GitHub的profile页⾯，那你现在就可以使⽤CSS让它看起来更像实际页⾯。
3. JavaScript
JavaScript为静态页⾯添加交互性。⽐如⽹站的所有弹框、提醒，以及更新页⾯的部分内容，都是由JavaScript实现的。
学习JavaScript的基本语法。
学习如何使⽤JavaScript操作DOM元素。⽐如，如何删除、添加页⾯元素等。
理解作⽤域、闭包、变量提升等JavaScript难点。
学习使⽤XHR和Ajax发起HTTP请求。
学习JavaScript最新标准ES6。
是否需要学习JQuery? No!
很久以前，⼤家热爱JQuery，因为它封装了JavaScript的接⼝，让我们可以不⽤考虑浏览器兼容性。但是，JQuery的时代已经过去了，新的项⽬已经很少⽤它了。因此，你不需要学习JQuery了！。要知道，GitHub已经完全移除jQuery了！但是，仍然有⼈在使⽤JQuery，它很简单，了解⼀下就好了。
4. 使⽤HTTM/CSS/JavaScript写⼀个⽹
学习编程的最站佳⽅式是敲代码。既然你已经学会了HTTM/CSS/JavaScript，那你就可以写⼀个简单的⽹站了，⽐如个⼈博客。记住，你可以去复制他⼈的代码，但是你需要尽量使⽤你所学到的所有知识点。前端⼯程师都应该有个⼈⽹站，⾄少有个静态⽹站！
5. 包管理器
如果你不使⽤包管理⼯具的话，当你需要使⽤第三⽅插件时，需要⼿动下载JavaScript或者CSS⽂件，将它们放进你的项⽬；这些插件更新时，你⼜得重新下载⽂件，这⾮常⿇烦。
如果你使⽤包管理⼯具，⽐如npm或者yarn时，⼀切就⽅便很多了。它们可以帮助第管理所有第三⽅库，更新也很⽅便。另外，NPM和YARN基本没什么区别，你可以选择任意⼀个。
6. 使⽤NPM或者YARN模块
不要重复造轮⼦，第三⽅模块极⼤丰富了前端开发的⽣态系统，我们应该学会好好利⽤。你可以为第4步中开发的⽹站添加⼀些第三⽅模块，⽐如使⽤moment处理时间，使⽤echarts画图表。
7. CSS预处理器
CSS预处理器，例如Sass，Less和Stylus，可以增强CSS的功能，⽐如⽀持变量、计算以及函数等。如
果让我选择的话，我会选择Sass。最近，PostCSS开始变得流⾏起来，它确实还不错，相当于CSS的Bable。你可以单独使⽤PostCSS或者基于Sass使⽤。我建议你先学习Sass，有时间再了解⼀下PostCSS。
8. CSS框架
⽬前，最流⾏的CSS框架是Bootstrap、Materialize和Bulma。如果⾮要选⼀个最流⾏的，那我觉得是Bootstrap。
9. CSS规范
对于⼤型前端项⽬，CSS会变得⾮常混乱，难以维护，需要使⽤规范。我们有多种⽅式来组织CSS，⽐如OOCSS、SMACSS、SUITCSS、Atomic和BEM。你应该了解⼀下它们之间的不同，个⼈更加偏好BEM。
10. 构建⼯具
构建⼯具指的是开发前端项⽬⽤到的代码校验⼯具(linter)、任务管理⼯具(task runner)、打包⼯具(bundlers)。
代码校验⼯具有ESLint、JSLint、JSHint和JSCS。⽬前ESLint是最受欢迎的。
任务管理⼯具有npm script、gulp和Grunt等。现在，webpack可以完成任务管理⼯具的⼤部分⼯作，因此我们可以结合npm script和webpack⼀起使⽤就好了。
打包⼯具有Webpack、Rollup、Browserify。我推荐⼤家使⽤Webpack。Rollup也很常见，不过通常⽤于打包第三⽅库。
11. 开发⼀个NPM模块
恭喜！你已经是个75%的前端⼯程师了！现在，你要做的事情是开发⼀个真正有⽤的东西。⽐如，你可以写⼀个NPM模块，把它开源到GitHub并发布到NPM。编程过程中难免遇到⼀些问题，需要⾃⼰造⼀些轮⼦，你要做的就是把轮⼦造好⼀点，发布出来就好了。优秀的⼯程师不仅要参与开源项⽬，还应该创造并维护⾃⼰的开源项⽬，哪怕是⼀个⼩⼩的⼯具。还是那句话，不要去花钱买项⽬，那是骗⾃⼰玩的。
12. 前端框架
在其他⼈的学习计划中，会把前端框架放在HTML/CSS/JavaScript之后。但是，我觉得你需要先了解⼀下Sass、构建⼯具和包管理⼯具，这些在框架中都会⽤到，如果你知道他们，⼤概会被吓到…
⽬前，最流⾏的前端框架有React、Vue和Angular，你可以选择任意⼀个，都没啥⽑病。如果是我的话，
我会选择React或者Angular。
如果你是初学者，你也许会发现Angular更简单，它把所有需要的东西都给你弄好了，⽐如路由功能(⽀持懒加载)、HTTP客户端(⽀持)、依赖注⼊等，这样你就不需要去使⽤第三⽅库了。对于React，你就需要使⽤很多第三⽅库。两者各有优劣吧。
框架对⽐是个很⼤的话题，这⾥我就不多说了。我们可以简单对⽐⼀下Angular和React的学习曲线：
如果你选择了⼀个框架，意味着你必须学习⼀些特定的技术。对于React，你需要学习Redux或者Mobx来进⾏状态管理。⾄于选择Redux 还是Mobx，取决于应⽤的⼤⼩。Mobx适合中⼩型应⽤，⽽Redux适于⼤型项⽬。对于Angular，你需要学习TypeScript和Rx.js。⽽对于Vue.js，你需要学习Vuex，相当于Redux。
13. 使⽤框架开发⼀个⽹站
现在，你已经掌握了现代前端开发所需要的所有技术。那就使⽤你选择的框架开发⼀个应⽤吧！当然，现在前端项⽬基本上都是框架开发的…
当你开发完之后，学习⼀下如何衡量和优化性能，⽐如你可以关注⼀下Interactivity Time, Page Speed Index和Lighthouse Score。14. 测试
对于前端测试，有很多不同的⼯具，⽐如Jest、Mocha、Karma和Enzyme，在你学习测试⼯具之前，请先理解测试的价值，并了解⼀下测试的分类。
15. 静态类型检查
为JavaScript添加静态类型检查，可以让代码更加严谨，避免很多错误。你只要学习数个⼩时，就可以⼀直受益。TypeScript和Flow是两种不同的JavaScript静态类型检查技术。
TypeScript重新制定⼀套⽀持类型检查的语⾔，编译为JavaScript代码来运⾏。
Flow是⼀种静态类型检查⼯具，可以在编码时检查到类型错误并做出提⽰。
因此，TypeScript更强⼤，难度更⼤，尤其是重构成本很⾼；⽽Flow功能和使⽤都很简单，基本上基本上够⽤。你可以根据需要进⾏选择。
16. 服务端渲染
前端测试和后端测试的区别
服务端渲染，即Server Side Rendering，⼜称为后端渲染。其实就是服务端先把HTML页⾯填充数据之后，再返回给前端。这样做可以提升⾸屏性能，有助于SEO，减少客户端⽤电。
对于不同的前端框架，有不同的服务端渲染技术。
但是，是否采⽤服务端渲染其实还有争议，了解⼀下可以React有Next.js和After.js，Angular有Universal，Vue.js有Nuxt.js。，是否根据需要决定是否使⽤。
17. 其他技术
作为⼀个专业的前端⼯程师，学习⼀下canvas、HTML5、SVG、Source Map、函数式编程、TC39等技术还是⾮常有必要的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。