资深前端开发工程师分享，关于前端学习路线的一些建议

前言对于刚开始学习前端的伙伴俩说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。 虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。入题我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS&HTML&JavaScript了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中JavaScript又是重中之重。接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。录三大件学习库工具前端框架（ MVVM ）的学习浏览器 & 计算机基础前端工程化性能优化Nodejs数据结构和算法依葫芦画瓢三大件学习现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。CSS & HTML对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。当然如果你愿意，建议你可以先仿一个网站的静态页面（掘金、知乎等都可以），有一些属性就可以了解他实际的实现场景。当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。 关于 CSS(3) 你需要了解的一些知识点盒模型（标准 & IE ）flex、float、Normal Flow 等的理解CSS 常用选择器行内、内部、外部样式的区别CSS 层叠规则BFC 与 IFC 的了解CSS3 的 transform、transition、animation 等属性的运用了解响应式布局的理解……CSS 说容易也容易，说复杂也复杂；因为 CSS 总是能给你意外的惊喜。HTML(5) 你需要了解的一些知识点说到 HTML 我想有很多人是div一把梭。因为div用的爽，不用担心默认样式。有人说 HTML 语义化的优点很多，比如清晰的页面结构、有利于 SEO、便于团队开发和维护；这些我都承认，不过我还是喜欢div一把梭。HTML 语义化( 不是很理解为什么面试总会问 )canvas本地存储（ localStorage、sessionStorage、cookie 的理解 ）video 和 audio 的使用应用缓存( cache manifest )……JavaScript JavaScript一直都是我们前端的基石，一定程度上JavaScript的理解深度决定了你的发展。所以一定要用心学习。现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过，你现在可以自问一下你的确理解这些基础的知识点吗JavaScript的基础知识点确实很多，所以《JavaScript 高级程序设计》 写了 700 多页；不过当你 JS 基础扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。JavaScript（ES6+） 你需要了解的一些知识点类型转换this作用域（作用域链）原型链以及继承闭包的理解动态作用域和词法作用域JavaScript 执行机制promise & async……上面说的CSS&HTML&JavaScript的基础知识点并不需要你一入门就全部都理解透彻；有些虽然是基础，但却也有它的难度。就算是高级也不敢说自己全都掌握了，有句话说的挺好 —— 书读百遍、其义自见。我们第一遍学习不可能尽懂，到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候，你肯定会有一个全新的理解。学习只一个需要一直在线的任务，重复的学习可以帮助你保持持续的竞争力。我先声明一点，我并没有说其他技术不需要去学习，只不过初入门最好重点是先将基础夯实。其实三大件的学习不需要花费多少时间，有基础的大概 3 个月就可以大致的看一遍。是否真的理解这是后话，不过已经算是入门了。CSS & HTML & JavaScript 推荐书籍/网站_ W3C 的 CSS&HTML 网络教程《CSS 权威指南》《CSS 揭秘》《JavaScript 高级程序设计》《你不知道的 JavaScript》上卷_ ECMAScript 6 入门HTML 不知道推荐什么书。我个人觉得看教程和动手实践就基本没什问题。接下来我们就可以学习一些工具类的库了。库工具对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等JQuery: 降低开发者操作 DOM 的复杂度UnderScore: 提供实用的函数Zepto: JQuery 的简化版Moment: 日期和时间操作库这些库给我们提供了很大的便利，省去了我们编写相关方法的时间，同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。当然对于这些库我们不仅仅只是去了解 API，我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式，这些库工具是也是一个很好的学习工具，我们不应该忽略。比如让你自己实现节流函数，你会如何实现。过滤对象应该如何实现……这种问题的答案不就在 Underscore 源码里面吗？我们在学习库工具的时候，必定是需要回头看 JavaScript 基础的；这也就进一步夯实了基础。 前端框架（ MVVM ）的学习当下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。至于 React 和 Vue 该学习哪一个，更多的还是看当下公司使用的是哪一个（也不是必然）。对于 Vue(React) 该如何使用其实不用多久就能上手，我们更应该关心的是他们背后的设计思想和实现原理。一些问题响应式的基本原理是什么发布订阅模式的理解Virtual DOM 的理解前端路由的实现原理nextTick / setState 的实现原理diff 算法单页面应用（SPA）的原理和优缺点……我们对于框架的 API 使用没必要花太多时间，应该多研究他们背后的设计思想和实现原理。Vue 和 React 我该选择哪一个？对于这个问题相比很多人都有困扰（有些人两个都学，也就没有这个困扰），这个问题已经有很多人回答了。但我还是觉得不是非要选择哪一个才是政治正确，选择你需要的。感兴趣的可以看看这篇文章：React or Vue: Which Javascript UI Library Should You Be Using?以下是提炼的文中观点：Vue的优势是：模板和渲染函数的弹性选择简单的语法和项目配置更快的渲染速度和更小的体积React的优势是：更适合大型应用和更好的可测试性同时适用于 Web 端和原生 App更大的生态系统，更多的支持和好用的工具Vue 相关资料对于框架的一些学习资料我个人更倾向于推荐官方文档，有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写（不排除有精良之作）。Vue 官网 & Vue Router 官网 & Vuex 官网剖析 Vue.js 内部运行机制 掘金小册vue 技术揭秘浏览器 & 计算机基础如果你希望能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。浏览器一直是 JavaScript 最重要的宿主环境，所以我们必须去了解 JavaScript 在浏览器中是如何执行的。我们前端开发接触最多的应该就是浏览器了，记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关，所以我觉得了解浏览器工作原理是非常有必要的。为何要学习浏览器工作原理？准确评估 Web 开发项目的可行性从更高维度审视页面解决面试中遇到的绝大部分浏览器问题计算机基础对于计算机基础我们需要做到大体了解，这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。需要了解的一些知识点浏览器缓存机制浏览器中 JavaScript 的执行机制页面渲染原理浏览器安全问题浏览器为什么会跨域如何系统的优化页面HTTP 与 HTTPS 的区别TCP/IP 协议三次握手和四次挥手CDN 的作用和原理正向代理与反向代理的特点……这里仅仅列出了一部分知识点，如果想全面的学习可以看下面推荐的资料。浏览器 & 网络基础推荐书籍/资料《浏览器工作原理与实践 》专栏《图解 HTTP》《网络是怎样连接的》前端工程化从事前端稍微久一点的开发就一定会有这个感受 —— 前端开发越来越工程化，越来越复杂。对于前端开发来说，现在前端要做的不只是切页面调接口这么简单，我们需要了解的技术无疑更加广泛。前端工程化的一点浅见由于项目的复杂度越来越高，前端需要做的工作就越来越繁重。当项目复杂就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？如何降低项目生产的风险？前端工程化细分的话我觉得可以分成模块化、组件化、规范化三个方向。或者说一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化的实践。模块化JavaScript 模块化CSS 模块化资源模块化组件化从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。也就是将复杂页面按功能拆分成多个独立的组件。规范化编码规范接口规范git 使用规范CodeReviewUI 元素规范前端工程化一些知识点理解 Babel、ESLint、webpack 等工具在项目中的作用Babel 的核心原理Webpack 的编译原理、构建流程、热更新原理nginx 的基本理解理解 Git 的工作流程Mock 的意义及优点性能优化提起性能优化，大家最先想到的是什么？我最先想到的是一道面试题：从输入 URL 到页面加载完成的具体过程因为从直观层面来看，我们前端需要优化的步骤基本都在这个加载工程当中。性能优化现在对于前端来说已经是必不可少的技能了，当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。我们需要关注两个方向的性能优化：1 .运行时的优化2.开发时的优化性能优化一些知识点前端性能衡量指标、性能监控（performance,LightHouse）常见的性能优化方案有哪些SSR 方案的性能优化Webpack 的性能优化方案React、Vue 等框架使用性能优化方案网络层面的优化方案页面渲染层面的优化方案白屏的优化方案……推荐资料《大型网站性能优化实战》《前端性能优化原理与实践》掘金小册Nodejs我们知道由于 Nodejs 的出现，前端开发出现了一个新的高潮。JS 开始可以涉及后端领域，JS 的可能性更大了。Nodejs 一些知识点Nodejs 在应用程序中的作用Express 和 Koa 的区别Nodejs 的底层运行原理、和浏览器的异同Nodejs 非阻塞机制的实现原理……数据结构和算法这一点我也比较薄弱，就不展开了。关于这部分你可以刷 leetcode。另外推一本书《学习 JavaScript 数据结构与算法》（第三版） 依葫芦画瓢我们在项目开发的过程中可以接触到很多优秀的库工具或者是 UI 库。如 lodash、underscore、moment、element-ui、antd design 等。自己是从事了8年的前端工程师，自己整理了一份最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴，需要可以私聊我哟，这是我的前端开发qun，【六零三】【九八五】【九九三】，直接群里下载，对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我，最后可以点一波关注哟！我们可能自己设计不出来这么优秀的工具，但是我们完全可以依葫芦画瓢自己按着这些工具写一遍，你就会发现里面有很多不可思议的技巧、优秀的思想。依葫芦画瓢对学习来说也是一个非常有用的技巧。

本文章由javascript技术分享原创和收集