前端进阶路线分享

本文会跟随技术发展和我个人技术水平的提升定期更新。上次更新时间：2021 年 03 月 27 日。在本公众号后台回复「入门」或「进阶」即可获取最新版前端学习路线。

我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。

作为程序员，肯定是不能容忍重复无味的劳动的，因此我就系统地总结分享一下我的前端学习路线，本文为「前端进阶」部分，希望对你能够有所帮助。

我还推出了「编程每日一题」项目，每天早上 8:16 推送精选面试和编程题，长按扫描下方二维码，即可关注订阅：

前言

前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。我把前端入门和前端进阶一共分为六个阶段，本文为「前端进阶」，仅包括后三个阶段。想看前端入门路线的请在 本公众号后台 回复关键字「入门」。

提前声明，本文只是一个学习路线分享，我本人也正在前端进阶的过程当中，所以只是分享自己的学习方式方法，仅供参考，欢迎加我微信批评指正或者交流学习。

在前端入门中，我分享了 HTML + CSS，JavaScript 和 前端框架三个学习阶段，下面就开始前端进阶的学习吧！

前端进阶

在学好 HTML，CSS 和 JavaScript 三大件，并入门了前端框架，能够基于已学内容开发一个小项目进行实战，把这些学习并理解透彻以后，也就算真正地入门前端了，接下来就开始前端进阶之路。

阶段四：语言基础进阶

这个阶段就是加深对编程语言的理解，多阅读进阶书籍，有能力的推荐去阅读 ECMAScript 规范：http://ecma-international.org/ecma-262/。在这里我可能就推荐一些我看过或者我买了还没看完的书籍，在进阶阶段，只需要指出方向，具体的学习方法相信大家也都明白了。

进阶必读书籍：

• 《你不知道的 JavaScript 上/中/下卷》：必买书籍，将 JavaScript 的疑难问题，细节知识一网打尽。原版是 GitHub 上开源的电子书，英语水平高的可以去读英文原版。

• 《JavaScript 忍者秘籍》：深入讲解 JavaScript 的核心知识点，必买书籍。

• 《了不起的 JavaScript 工程师》：从宏观来看 JavaScript 语言，以及前端工程师所需要掌握的一些技能，推荐阅读。

• 《JavaScript 函数式编程指南》：学习函数式编程思想

• 《JavaScript 函数式编程》：也是一本函数式编程思想的好书

• 《JavaScript 设计模式》：学习 JavaScript 设计模式，推荐阅读

• 《JavaScript 设计模式与开发实践》：另一本同等分量的设计模式书籍，推荐阅读

• 《锋利的 jQuery》：jQuery 现在已经很少有人用了，除非是很老的项目或者写小东西。不过这本书值得买，学习 jQuery 的优秀思想，还可以去学习一下它的源码，对你进阶很有帮助。

进阶选读书籍：

• 《高性能 JavaScript》

• 《JavaScript Web 应用开发》

• 《深入理解 JavaScript》

• 《JavaScript 经典实例》

• 《JavaScript 面向对象编程指南》

• 《JavaScript 编程精粹》

学习 TypeScript。JavaScript 是一门弱类型语言，你声明一个变量，既可以将字符串赋值给它，也可以将数字等复制给它，这在大型项目开发中很容易因为数据类型出 bug。基于此类种种原因，就出现了 TypeScript。你有了 JavaScript 的基础，学习 TypeScript 很容易，它只是一种语法糖，也就是一种另一种写 JavaScript 的方式。推荐以下书籍：

• 《深入理解 TypeScript》

• 《TypeScript 实战指南》

• 《TypeScript 实战》

阶段五：框架和学习边界进阶

通过阶段三，你已经掌握了前端框架的基本使用，开发一个完整项目的流程。那么在框架和学习边界进阶阶段，你就可以：

• 学习框架周边的生态，社区总结出来的优秀组件，以及各种好用的工具库。

• 造一些自己的轮子，使用框架搭建自己的开源项目

• 学习 Webpack，Gulp，Babel，ESLint 等工具的使用、思想和原理

• 带着问题去阅读框架源码，学习性能优化

• 养成良好的编程习惯

• 扩展技术边界，学习 Node.js 等后端相关技能

• ……

对于这里的源码阅读我要强调一点，阅读源码不是说让你去读懂例如 React 框架的每一行代码，而是结合其代码整体逻辑加上部分细节分析，理解其实现和工作原理，以帮助你更好地理解其设计理念，更好地使用它开发项目，并避免错误地使用。而且现在社区有很多源码分析文章，你可以将源码阅读和多篇分析文章结合起来，理解起代码来会事半功倍。

推荐阅读书籍：

以下推荐的书籍都是比较出名的书籍，你可以根据自己的技能树，选择所需要的书籍进行阅读。并不是一字不差地整本阅读，而是在每本书中学习自己所需要的部分。很多都是非常著名的好书，有精力尽量买来学习。

Webpack 相关：

• 《深入浅出 Webpack》

• 《Webpack 实战：入门、进阶与调优》

React 相关：

• 《深入 React 技术栈》

• 《深入浅出 React 和 Redux》

• 《Redux 实战》

• 《React 学习手册》

• 《React 快速上手开发》

• 《React 设计模式与最佳实践》

Vue 相关：

• 《Vue.js 实战》

• 《Vue.js 开发实战》

• 《深入浅出 Vue.js》

• 《Vue.js 权威指南》

• 《Vue.js 从入门到项目实战》

• 《Vue.js 前端开发基础与项目实战》

• 《Vue.js 项目开发实战》

• 《Vue.js 快速入门》

• 《Vue.js 前端开发》

Node.js 相关：

• 《狼书卷1》

• 《狼书卷2》

• 《Node 学习指南》

• 《了不起的 Node.js》

• 《深入浅出 Node.js》

• 《Node.js 实战》

• 《Node.js 开发指南》

• 《Node 即学即用》

• 《Node 与 Express 开发》

样式和布局相关：

• 《Bootstrap 实战》

• 《Bootstrap 用户手册》

• 《响应式 Web 设计：HTML5 与 CSS3 实战》

性能相关：

• 《Web 性能权威指南》

• 《高性能网站建设指南》

PWA 相关：

• 《PWA 开发实战》

• 《PWA 实战：面向下一代的 Progressive Web APP》

其他：

• 《SVG 精髓》

• 《深入理解 SVG》

• 《前端架构设计》

• 《重构：改善既有代码的设计》

• 《同构 JavaScript 应用开发》

阶段六：计算机基础知识进阶

编程编程，万变不离其宗，那就是计算机基础知识，算法、数据结构、计算机原理、网络等内容。在这里我只推荐最经典的好书，每一本都是必读书籍。学好这些内容，大厂任你选。

数据结构和算法：

• 《剑指offer》

• 《程序员面试金典（第 6 版）》

• 《编程之美》

• 《漫画算法》

• 《算法图解》

• 《程序员代码面试指南》

• 《大话数据结构》

• 《趣学算法》

• 《学习 JavaScript 数据结构与算法》

• 《数据结构与算法：JavaScript 描述》

• 《算法（第四版）》

• 《算法导论》

• 《算法竞赛入门经典（第二版）》

• 《算法竞赛入门经典 训练指南》

计算机网络：

• 《HTTP/2 基础教程》

• 《HTTPS 权威指南》

• 《计算机网络：自顶向下方法》

• 《图解 HTTP》

• 《图解 TCP/IP》

• 《TCP/IP 详解》

• 《UNIX 网络编程》

操作系统：

• 《深入理解计算机系统》

• 《现代操作系统》

• 《UNIX 环境高级编程》

• 《The Linux Programming Interface》

编程思想：

• 《代码大全》

编译原理：

• 《编译原理》

产品思想：

• Web Fundamentals: https://developers.google.com/web/fundamentals/

总结

至此，你已经基本完成了前端开发从入门到进阶，相信你对之后再学什么、怎么学已经了如指掌。希望我的分享对你有帮助，如果你觉得有用，可以收藏本文，并分享给你有需要的朋友。让我们一起学习，共同进步！

我会分享各种计算机领域相关知识，并提供大厂内推机会，欢迎大家加我微信，扫描下方二维码，验证信息填写「进阶」：

验证信息填写「技术」「算法」「推文」或「内推」，即可加入对应读者交流群。想加入 QQ 群的同学，打开 QQ 搜索群号 866757202，验证信息填写「进阶」。

看完三件事

如果你觉得本文对你有帮助，我想请你帮个忙：

1. 转发本文，点赞或者点个「在看」，是对我最大的认可和支持；

2. 关注公众号「技术漫谈」，订阅更多精彩内容，获取更多学习资料；

3. 公众号后台回复「加群」，加入算法和技术交流群，与更多读者交流。

---

 

近期精彩回顾

React | 从源码解读 Create React App

资料 | 2021年值得学习的前端框架和工具库

大厂面试 | 你需要知道的性能优化和手写源码

编译原理 | 前端要懂编译：Babel 上手指南

JS 基础 | JS 页面资源加载：onload，onerror

React | 哇擦，组件竟然能跑在命令行终端窗口

性能优化 | 利用 Chrome Dev Tools 页面分析

面试题 | 字节前端面试题：计算机网络基础

赏个“赞”或“在看”呗~