29天吐血整理前端学习路线，送给那些正在自学或准备自学前端的人！

迷南。 2022-12-22 08:49 211阅读 0赞

## 前言 ##

最近这段时间经常有朋友问我 **前端技术现在如此繁杂，我到底应该如何学习**。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。

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

## 入题 ##

我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 `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 推荐书籍/网站 ###

#### HTML ####

*  **《Head First HTML与CSS》**

![a61a5e687837e1c35201473d19ef15a2.webp][]

Head Fisrt系列书你懂的，为入门而生，文笔风趣幽默为主，配图也很丰富，简单易懂就对了。

*  **《HTML5 权威指南》**

![4daee6da15c57e5a75ef66b05a1b3649.webp][]

豆瓣评分8.5的书，书是没问题，`800`多页的书全面性不用说，但是能不能读得完这是一个问题，就看决心和“手速”了。

*  **网络教程**
    
     *  `https://www.w3school.com.cn/h.asp`
     *  `https://www.runoob.com/html/html-tutorial.html`
     *  `https://developer.mozilla.org/`

--------------------

#### CSS ####

*  **《CSS权威指南》**

![9d819be60f5ae99866fe0fe21679268f.webp][]

放在现在来看是本“老书”了，但是很多基础的东西在那摆着也得学。CSS东西就是细节多，这本就当是给CSS的知识点做了一个大梳理吧，所以这本书当工具书看是可以。

*  **《CSS揭秘》**

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qFV7TCz-1605698383286)(//upload-images.jianshu.io/upload\_images/9824247-93238fe68fe86206.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)\]

这本书展示了`47`个CSS的技巧，是一本注重实践的教程，虽然算进阶书，但是内容没那么难，看完对很多实现思路有启发。

*  **网络教程**
    
     *  `https://www.runoob.com/css/css-tutorial.html`
     *  `https://www.w3school.com.cn/css/index.asp`
     *  `https://developer.mozilla.org/`

--------------------

#### JavaScript语言 ####

*  **《你不知道的 JavaScript》**

![66fb5e0808b8fb962bffd2db27551e5b.webp][]

这本书是翻译过来的，分好几卷，黄油油的封面你懂的~ 应该说这本书把`JavaScript`里很多复杂且深度的概念进行了细致讲解，比如作用域、闭包、原型、异步等等，网上书评啥的还是可以的。

*  **《JavaScript DOM编程艺术》**

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbsH8k1u-1605698383295)(//upload-images.jianshu.io/upload\_images/9824247-f3c1b39a305f4770.png?imageMogr2/auto-orient/strip|imageView2/2/w/1052/format/webp)\]

这本书并不厚，小白可用，初学时搞定并实践了这本书里的内容，应该入门没啥问题，这样后面就可以找一些经典甚至圣经类的书来加强和巩固了。

*  **《JavaScript 高级程序设计》**

![1345e5cd1325937cdd0c735250af9a1d.webp][]

大名鼎鼎的`JS`红宝书，是权威的`JavaScript`入门书籍，没错是入门书籍！不要被名字里的“**高级**”两个字吓跑~ 内容循序渐进，基础且全面，不能指望一遍就过，适合精读也适合回味。

*  **《JavaScript权威指南》**

![98d3d8da17f4da6a64ffb17a0b380318.webp][]

上面是“红宝书”，这本是“犀牛书”，据说这两本在一起更搭配哦。

这本书是淘宝前端团队翻译的，也算是`JavaScript`开发者的圣经之一，内容太多太全，如果能多通读几遍并有所心得，估计成神之路也就不远了~

*  网络教程
    
     *  菜鸟教程：`https://www.runoob.com/js/js-tutorial.html`
     *  现代JavaScript教程：`https://zh.javascript.info/`
     *  MDN文档：`https://developer.mozilla.org/`

## 库工具 ##

对于库工具而言我们常用的有 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?][React or Vue_ Which Javascript UI Library Should You Be Using]

以下是提炼的文中观点：

**Vue的优势是：**

*  模板和渲染函数的弹性选择
 *  简单的语法和项目配置
 *  更快的渲染速度和更小的体积

**React的优势是：**

*  更适合大型应用和更好的可测试性
 *  同时适用于 Web 端和原生 App
 *  更大的生态系统，更多的支持和好用的工具

### Vue 相关资料 ###

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

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

## 浏览器 & 计算机基础 ##

如果你希望能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。

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

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

### 为何要学习浏览器工作原理？ ###

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

### 计算机基础 ###

对于计算机基础我们需要做到大体了解，这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。

### 需要了解的一些知识点 ###

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

这里仅仅列出了一部分知识点，如果想全面的学习可以看下面推荐的资料。

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

1.  《[浏览器工作原理与实践][Link 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 等。

我们可能自己设计不出来这么优秀的工具，但是我们完全可以依葫芦画瓢自己按着这些工具写一遍，你就会发现里面有很多不可思议的技巧、优秀的思想。

依葫芦画瓢对学习来说也是一个非常有用的技巧。

## 最后 ##

说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

我可以将最近整理的前端面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，还在持续整理更新中，希望大家都能找到心仪的工作。

### 有需要的朋友[**点击这里免费领取题目+解析PDF。**][PDF] ###

![篇幅有限，仅展示部分内容][756bfc2bb5e4d3e26ce286ce2ec2f147.png]

![篇幅有限，仅展示部分内容][ffb7918c4fd2973dcb4d202fb38e8c1c.png]

![篇幅有限，仅展示部分内容][81e96b576886b2c4f465125c77614c2a.png]

## [**点击这里免费领取题目+解析PDF。**][PDF] ##

[a61a5e687837e1c35201473d19ef15a2.webp]: /images/20221120/274494ab97e049d58c93a770c6fd53c4.png
[4daee6da15c57e5a75ef66b05a1b3649.webp]: /images/20221120/c3cc66281f75440dbcb0bc2405754fd2.png
[9d819be60f5ae99866fe0fe21679268f.webp]: /images/20221120/587a473ee74e46a59923f70f3f41dfe5.png
[66fb5e0808b8fb962bffd2db27551e5b.webp]: /images/20221120/4d7b36b3870a4b54a5832d8603b4b99e.png
[1345e5cd1325937cdd0c735250af9a1d.webp]: /images/20221120/32ad0d028c2c42d5bdaad089d1541f57.png
[98d3d8da17f4da6a64ffb17a0b380318.webp]: /images/20221120/48333e6c9d47485bbece133e01276fbd.png
[React or Vue_ Which Javascript UI Library Should You Be Using]: https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d#.4fnmudeat
[Vue]: https://cn.vuejs.org/v2/guide/index.html
[Vue Router]: https://router.vuejs.org/zh/
[Vuex]: https://vuex.vuejs.org/zh/
[Vue.js]: https://juejin.im/book/6844733705089449991
[vue]: http://hcysun.me/vue-design/zh/essence-of-comp.html#%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BA%A7%E5%87%BA%E6%98%AF%E4%BB%80%E4%B9%88
[Link 1]: https://time.geekbang.org/column/intro/100033601?code=0V4fbBEmOteHL%2FdGOyJ44J1ThZWId7DutTrNnTpgg0M%3D
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[756bfc2bb5e4d3e26ce286ce2ec2f147.png]: /images/20221120/d93ed8a4d3524f39a460d2f0cf4d3952.png
[ffb7918c4fd2973dcb4d202fb38e8c1c.png]: /images/20221120/4d05a1d1729e4d8a86a907a53a061615.png
[81e96b576886b2c4f465125c77614c2a.png]: https://img-blog.csdnimg.cn/img_convert/81e96b576886b2c4f465125c77614c2a.png