关于前端学习路线的一些建议（内含经典自测题）

前言

这几个月几乎天天都会有朋友加我微信，而他们问的最多的问题就是 —— 前端技术如今如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答很差；也因为这个问题确实困扰了不少前端开发人员，因此我也就着手系统的输出这篇文章。

虽然这篇文章花了很长时间，确定也有其局限性；但愿各位不吝指出。

入题

咱们俨然能感觉到前端岗位如今已经发展成了最重要的研发岗位之一，因此对咱们提出的要求也就愈来愈高。因此咱们须要学的也就不只仅只是 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 推荐书籍/网站

0. _ W3C 的 CSS&HTML 网络教程
1. 《CSS 权威指南》
2. 《CSS 揭秘》
3. 《JavaScript 高级程序设计》
4. 《你不知道的 JavaScript》上卷
5. _ 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 相关资料

对于框架的一些学习资料我我的更倾向于推荐官方文档，有不少问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写（不排除有精良之做）。

1. Vue 官网 & Vue Router 官网 & Vuex 官网
2. 剖析 Vue.js 内部运行机制 掘金小册
3. vue 技术揭秘

浏览器 & 计算机基础

若是你但愿能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有必定的掌握。由于这能让你更好的理解前端。

浏览器一直是 JavaScript 最重要的宿主环境，因此咱们必须去了解 JavaScript 在浏览器中是如何执行的。

咱们前端开发接触最多的应该就是浏览器了，记得工做第一年最头痛的就是处理 IE 的兼容问题。工做中出现的不少问题都和浏览器有关，因此我以为了解浏览器工做原理是很是有必要的。

为什么要学习浏览器工做原理？

1. 准确评估 Web 开发项目的可行性
2. 从更高维度审视页面
3. 解决面试中遇到的绝大部分浏览器问题

计算机基础

对于计算机基础咱们须要作到大致了解，这样的话咱们对总体的流程会有一个大概的把握。在实际开发过程当中不会过于被动。

须要了解的一些知识点

• 浏览器缓存机制
• 浏览器中 JavaScript 的执行机制
• 页面渲染原理
• 浏览器安全问题
• 浏览器为何会跨域
• 如何系统的优化页面
• HTTP 与 HTTPS 的区别
• TCP/IP 协议
• 三次握手和四次挥手
• CDN 的做用和原理
• 正向代理与反向代理的特色
• ……

这里仅仅列出了一部分知识点，若是想全面的学习能够看下面推荐的资料。

浏览器 & 网络基础推荐书籍/资料

1. 《浏览器工做原理与实践 》专栏
2. 《图解 HTTP》
3. 《网络是怎样链接的》

前端工程化

从事前端稍微久一点的开发就必定会有这个感觉 —— 前端开发愈来愈工程化，愈来愈复杂。

对于前端开发来讲，如今前端要作的不仅是切页面调接口这么简单，咱们须要了解的技术无疑更加普遍。

前端工程化的一点浅见

因为项目的复杂度愈来愈高，前端须要作的工做就愈来愈繁重。当项目复杂就会产生许多问题，好比：

• 如何进行高效的多人协做？
• 如何保证项目的可维护性？
• 如何提升项目的开发质量？
• 如何下降项目生产的风险？

前端工程化细分的话我以为能够分红模块化、组件化、规范化三个方向。或者说一切能提高前端开发效率，提升前端应用质量的手段和工具都是前端工程化的实践。

模块化

• JavaScript 模块化
• CSS 模块化
• 资源模块化

组件化

从 UI 拆分下来的每一个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，咱们称之为组件。

也就是将复杂页面按功能拆分红多个独立的组件。

规范化

• 编码规范
• 接口规范
• git 使用规范
• CodeReview
• UI 元素规范

前端工程化一些知识点

• 理解 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 等。

咱们可能本身设计不出来这么优秀的工具，可是咱们彻底能够依葫芦画瓢本身按着这些工具写一遍，你就会发现里面有不少难以想象的技巧、优秀的思想。

依葫芦画瓢对学习来讲也是一个很是有用的技巧。

最后

你能够关注个人同名公众号【小生方勤】，这里我会分享优质的文章，咱们一同进步。

若是你想进【大前端交流群】，点击加群交流即刻加入。