近|近 20 人爆肝数周，写给初中级前端的万字高级进阶指南近20人爆肝数周，写给初中级前

这是什么？笔者在学会 JS 以及框架的应用后，有一段时间不知道该如何深入下去，活能干，就是不知道该学啥。相信这个问题也会有很多读者朋友遇到。
当然笔者目前已经突破了这个瓶颈，也成为了知名公司基础架构组的成员。因此想通过自己成长的经历及积累的资料整理出一系列的学习路线及资料推荐，帮助各位读者朋友解决这个问题。

仓库内容笔者为主要贡献者，另外还拉了将近 20 位资深前端开发做内容共建及审核，多数人员任职一线大厂 P6、P7，第一版耗时数周，大家国庆假期也没停歇，内容绝对让各位看官满意。

此资料适用于小白入门、初中级进阶、高级查漏补缺。
内容每天都在更新，大家可以持续关注。
这里是 Github 链接，最新内容都会首先更新在 Github，如果你觉得内容对你有帮助，可以点个 Star。
如何使用如果你是初中级工程师来说，笔者也推荐先行学习「前端核心学习路径」，主要是巩固基础，之后再挑选感兴趣的主题。
如果你是高级工程化，笔者推荐跳过「前端核心学习路径」，直接挑选感兴趣的主题学习即可。
以下所有知识点笔者都会帮助读者朋友们将知识连贯起来，从而建立自己的知识体系而不是单独记忆松散的知识点。
如何获取本文资料笔者已经将仓库内容里的重要资料整理好了，另外还附赠了前端 10 万字的面试攻略，已经帮助上千人拿到 offer。大家可以关注【公众号】发送「资料」获取。
目录读者朋友可以前往 Github 浏览目录。
如何高效自学

文章图片

自学是每个工程师都需要掌握的一项技能。这个学习方法笔者百试百灵，学习任何技术都会用上这个思路。另外我们还能通过这个思路拓宽自己的技术栈，将各个知识联系起来建立自己的知识体系，并且通过这种学习方式学到的知识也不容易遗忘。
书籍推荐以下书籍主要还是推荐了 JS 方面的，其它比如说框架、TS 等等技术会在各自章节为大家介绍。
初级

JavaScript 高级程序设计（第 4 版）

进阶

JavaScript 忍者秘籍（第 2 版）
你不知道的 JS 三卷，该书英文版是开源的，并且作者已经在写第二版，有能力阅读英文的读者推荐直接看原著

高级

JavaScript 悟道
JavaScript 语言精髓与编程实践（第 3 版）

上述书籍大家可以关注【公众号】发送「资料」获取，另外还附赠了前端 10 万字的面试攻略，已经帮助上千人拿到 offer。
前端核心学习路径前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行根据兴趣选择学习内容。
但是在学习其他内容之前，笔者强烈推荐各位务必一定一定先把基础打扎实了，基础不好真的不可能把自己技术往上拔高的。

为了保证大家学到的知识是正确的，下文中的文档资料笔者都使用了英文版本。因为在审核资料的过程中笔者发现不少中文文档都存在翻译错误或者过时的情况。

如果你还是一位初学者，推荐先自行完整阅读一至二本书后再按照该计划学习，因为以下计划并没有囊括 JS 的所有知识，而是列出了所有核心知识点。
关于书籍笔者推荐以下两本：

JavaScript 高级程序设计（第 4 版）
JavaScript 忍者秘籍（第 2 版）

JS 核心知识点
数据类型 JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增的 bigint。

文档：
- JavaScript 数据类型和数据结构

类型判断类型判断有好几种方式，分别为：

typeof
instanceof
Object.prototype.toString
isXXX，比如 isArray
文档
- typeof
- instanceof
- Object.prototype.toString
推荐文章，Issue 也挺重要
- JavaScript 专题之类型判断(上)
- JavaScript 专题之类型判断(下)

类型转换类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。

文档
- ES 标准
  - 标准并不好读，如果读者英文水平欠佳，可以只阅读该小节内的表格内容。
- 双等判断
推荐文章
- You Don't Know JS 书中关于类型转换的一章节
- 几种基本类型简单的类型转换
- JavaScript 深入之头疼的类型转换(上)
- JavaScript 深入之头疼的类型转换(下)

this this 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。

文档
- this
推荐文章
- You Don't Know JS 书中关于 this 的第一章节
- You Don't Know JS 书中关于 this 的第二章节
- 深入理解 js this 绑定 ( 无需死记硬背，尾部有总结和面试题解析 )

闭包闭包特别常用，但是其实挺多工程师对于闭包的理解是错误的。

文档
- 闭包
推荐文章
- You Don't Know JS 第二版中对于闭包的解释，该版本暂无中文翻译，读者可用 DeepL 进行翻译。
- JavaScript 的静态作用域链与“动态”闭包链
- 知乎中关于闭包的讨论

作用域作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。

文档
- 作用域
- 块作用域
推荐文章
- JavaScript 深入之词法作用域和动态作用域
- JavaScript 深入之作用域链
- Variable scope, closure，另有中文翻译版
- You Don't Know JS Yet: Scope & Closures
- The battle between function scope and block scope

变量提升变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。

文档
- JS 变量提升，变量提升的概念
推荐文章
- JavsScript 变量提升和函数提升，深度解析变量提升和函数提升，举例说明各种情况下的变量提升
- 我用了两个月的时间才理解 let，深度理解解析 let 和 val 的区别，和 let 的暂时死区
- JavaScript Scoping and Hoisting，JavaScript 中的作用域和函数声明和变量声明的提升

new new 操作符可以帮助我们构建出一个实例，并且绑定上 this。

文档
- new
推荐文章
- JS 的 new 到底是干什么的？
- JavaScript 深入之 new 的模拟实现

call、apply、bind

文档
- call，call 的概念
- apply，apply 的概念
- bind，bind 的概念
推荐文章
- JS 中的 call、apply、bind 方法详解，对这三个方法的使用、面试题及具体实现做了详解
- call 和 apply 的模拟实现，模拟实现 call 和 apply，帮助更好理解
- bind 的模拟实现，模拟实现 bind，帮助更好理解

原型通过原型这种机制，JavaScript 中的对象从其他对象继承功能特性。

文档
- 原型
推荐文章
- You Don't Know JS: this & Object Prototypes
- 深入理解 JavaScript 原型
- 深度解析原型中的各个难点
- Prototypes in JavaScript 需自备梯子

Class class 只是原型链的语法糖，与其它语言中的类不是同一样东西。

文档
- Class
推荐文章
- 理解 JavaScript 的类
- Babel 是如何编译 Class 上
- Babel 是如何编译 Class 下
- 给 ES6 class 说句公道话
- 应该在 JavaScript 中使用 Class 吗？

继承继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。

文档
- 继承
推荐文章
- JavaScript 深入之继承的多种方式和优缺点
- JavaScript 中的继承，需自备梯子
- JS 类继承，另有中文翻译版

模块化这块知识必会，最好了解下模块化的前世今生以及对 ES6 的原生模块化有个深入的理解。

文档
- Modules
推荐文章
- 【深度全面】前端 JavaScript 模块化规范进化论，记录了 JS 模块化的进化之路
- JavaScript modules，由浅入深解释 JS 模块化
- ES modules: A cartoon deep-dive，一篇对 JS 模块化深入解释的文章，另有中文版

Promise

文档
- Promise
- Promises/A+ 规范
推荐文章
Callbacks Vs Promises and basics of JS，需自备梯子
最简实现 Promise，支持异步链式调用（20 行）
100 行代码实现 Promises/A+ 规范
Github
promise-fun

迭代器与生成器

文档
- 迭代器与生成器
推荐文章
- [[译] 什么是 JavaScript 生成器？如何使用生成器？](https://juejin.cn/post/684490...)
- Understanding Generators in ES6 JavaScript with Examples，需自备梯子
- A Simple Guide to ES6 Iterators in JavaScript with Examples，需自备梯子

async await

文档
- async
- await
推荐文章
- 手写 async await 的最简实现（20 行）
- Babel 将 Generator 编译成了什么样子

事件循环大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。

文档
- 事件循环
推荐文章
- 这一次，彻底弄懂 JavaScript 执行机制
- 一次弄懂 Event Loop
- JavaScript 的工作原理，需自备梯子，另有中文翻译版。
事件循环可视化
- Loupe

节流与防抖节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。
防抖指在事件被触发一定时间后再执行回调函数，如果在一定时间内该事件又被重复触发，则重启计时。

推荐文章
- 函数防抖与函数节流
- 浅谈 JS 防抖和节流
- Debounce – How to Delay a Function in JavaScript
- Debouncing and Throttling in JavaScript

柯里化柯里化就是将接收多个参数的函数转换成接收一个参数的函数。

推荐文章
- 柯里化（Currying）
- JavaScript 专题之函数柯里化
- Understanding Currying in JavaScript，需自备梯子，另有中文翻译版

垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。

文档
- 内存管理 & 垃圾回收
推荐文章
- 深入理解 Chrome V8 垃圾回收机制，该文章的参考文献也可阅读下
- GC in v8
- JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏，另有中文版

其他零散但重要的知识点

0.1 + 0.2 !== 0.3，JS 浮点数会造成的问题

如果你觉得以上内容对你有帮助，可以前往 Github 点个 Star 支持一下。
HTML
语义化 html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。在没有引入样式 CCS 样式的时候也能以一种可以分辨出来大致表示内容的文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

文档
- HTML 中的语义，什么是 HTML 语义化，HTML 语义化有什么好处
推荐文章
- IFE-NOTE：页面结构语义化，HTML5 语义化中的页面结构语义化的一些经验和理解
- 关于 HTML 语义和前端架构，HTML 语义化在开发中配合 CSS 结构化类名的使用构建可重用和可组合的组件

CSS

推荐文章
- 一文梳理 CSS 必会知识点

盒子模型在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

文档
- CSS 盒子模型，官方文档深入了解 CSS 盒子模型
推荐文章
- CSS 盒模型之内边距、边框、外边距十九问，通过举例说明盒子模型各种常见形态和问题
- CSS Box Model，盒子模型的一些规范介绍
- CSS 盒模型详解（图文教程），通过图片和例子说明盒子模型的各个部分和在页面上的表现形式

选择器 CSS 中，选择器用来指定网页上我们想要样式化的 HTML 元素。CSS 选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

文档
- CSS 选择器，官方文档详细地讲授选择器的不同使用方式，并了解它们的工作原理。
推荐文章
- 30 个你必须熟记的 CSS 选择器，开发中常用的 CSS 选择器，熟练掌握以后可以很大程度提高 CSS 的编码体验
- 深入解析 CSS 样式优先级，详细介绍了 CSS 样式的权重优先级，避免写重复样式和样式被覆盖不生效的问题

Flex

文档
- flexbox
推荐文章
- A Complete Guide to Flexbox
- Flexbox 布局中不为人知的细节
实战
- FLEXBOX FROGGY 一个趣味性小游戏学习 Flex 的网站

grid

文档
- grid
推荐文档
- A Complete Guide to Grid
- 最强大的 CSS 布局 —— Grid 布局

其他

推荐文档
- 详谈层合成（composite)
- 移动设备如何实现真正 1px 的线？

框架框架一般选其一深入学习即可。
虚拟 DOM
Virtual DOM 也就是虚拟节点。通过 JS 的 Object 对象模拟 DOM 中的真实节点对象，再通过特定的 render 方法将其渲染成真实的 DOM 节点。

文档
- React 官网介绍
【近|近 20 人爆肝数周，写给初中级前端的万字高级进阶指南】推荐文章
- Virtual Dom 和 Diff 算法在 React 中是如何工作的？，需自备梯子
- React 核心知识点 -- Virtual Dom 与 Diff

路由
路由在 SPA 架构中都有被用到，实际原理就是运用 hash 及 history 相关的 API 实现。

文档
- hashchange
- history
推荐文章
- 前端路由简介以及 vue-router 实现原理，对前端路由及 Vue-Route 库原理做了解释，几个框架的路由库原理都一致

React 学习框架务必从文档出发，起码熟读一遍及自己写过一些初步的 Demo 之后再考虑学习别的资料。
React 推荐学习路径

文章图片

大家可以跟着以上学习路径学习，其中除了概念相关的内容是必须学习之外，生态相关的内容大家可以在使用时再学习。
React 推荐学习资料

React 学习之道，可以 0 元购买
React 生命周期

如何编写一个组件

文档
- React 官方文档
推荐文章
- [[译]React 函数组件和类组件的差异](https://jishuin.proginn.com/p...)
- 寫 React Components 該注意的 6 個地方與技巧
- 编写高效且可读组件的 5 个最佳实践
- designing-react-components-best-practices
- React 复合组件

受控组件和非受控组件

受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新
非受控组件：是一个存储其自己的内部状态，并且您使用查询 DOM ref，当你需要它来找到它的当前值，这有点像传统的 HTML
文档
- React 官方文档
推荐文章
- 受控和非受控组件真的那么难理解吗
- [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/co...)

高阶组件（HOC）
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
具体而言，高阶组件是参数为组件，返回值为新组件的函数。

文档
- React 官方文档
推荐文章
- React 高阶组件(HOC)入门指南
- hoc 库 recompose
- 精读 React 高阶组件

Hooks
Hook 是 React 16.8 的新增特性。它可以让你在不编写类组件的情况下使用 React 的特性。

文档
- React Hooks 官方文档
推荐文章
- 彻底理解 React hook useCallback 和 useMemo 的区别
- React hooks 最佳实践

合成事件
合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 W3C 规范定义了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差异。

文档
- React 官方文档
推荐文章
- 探索 React 合成事件
- 大佬，怎么办？升级 React17，Toast 组件不能用了
- What’s the Difference Between Synthetic React Events and JavaScript Events?，需自备梯子
- React 17 removes event pooling in the modern browsers

React 路由

react-router，React 声明式路由
reach router，下一代的 React 路由

React 状态管理
React 状态管理可谓百花齐放百家争鸣，远远不止笔者列的这些库。但是实际上很多项目完全是不需要用到状态管理的，反而是增加编码复杂度，其实利用 React Context 或者 react-query 这类接口请求库就能很好地满足需求了。

redux，JS 应用的状态容器，提供可预测的状态管理
mobx，简单，可扩展的状态管理库
recoil，React 状态管理库
xstate，有限状态机
zustand，简单、快速和可扩展的骨状态管理解决方案

React 接口请求

axios，传统接口请求库
react-query，用于获取、缓存和更新 React 中异步数据的 Hooks 接口请求库
swr，用于数据请求的 React Hooks 库

React SSR

nest.js，一个渐进式的 Node.js 框架，用于构建高效、可靠和可扩展的服务端应用。

React 单测

jest，优雅、简洁的 JavaScript 测试框架，单测必选项
react-testing-library，简单且完整的 React DOM 测试工具

React CSS 方案

styled-components，CSS in JS 方案
tailwindcss，Atom CSS 方案

React 原理

react-source-code-debug，学习如何调试源码
react-illustration-series，图解 react 源码，用大量配图的方式，致力于将 react 原理表述清楚
just-react，「React 技术揭秘」，一本自顶向下的 React 源码分析书
tiny-react，基于 React17 精简而来的最小版实现

Blog 推荐

Dan Abramov，React 核心开发者的 Blog

Vue 学习框架务必从文档出发，起码熟读一遍及自己写过一些初步的 Demo 之后再考虑学习别的资料。
对于 Vue 来说，官方文档内容相当齐全，并且全家桶也都是官方出的，因此无需头疼技术栈选型。
Vue 推荐学习路径
目前 3.0 生态并不完善，在公司内部基本需要先熟悉 2.0 的写法，因此推荐新手先学习 2.0 的内容。

新手向：Vue 2.0 的建议学习顺序，尤雨溪自己写的学习路径，时至今日也不过时

Vue 推荐学习资料

awesome-vue
vue-patterns，有用的 Vue 模式、技巧、提示以及有帮助的精选链接

Vue 原理

vue-analysis，黄老师出品
vue-design，官方人员出品，域名已过期，需要大家自行在仓库内浏览内容。虽然麻烦了点，但是质量绝对过关

浏览器一般说到浏览器，常指的都是 Chrome。浏览器作为前端不可或缺的载体，我们势必需要好好学习及掌握其相关的知识。
另外浏览器中涉及到的知识面很多，与 JS 执行机制、网络、性能优化、安全等领域都有关联，因此大家在学习这部分的内容时需要多与之前学习的知识联系起来。
架构

Inside look at modern web browser，这是一个 Google 出的系列专栏，共有四篇文章，内容上到浏览器的整体架构，下至页面的渲染规则都说了一遍，另有中文翻译

整体流程

浏览器的工作原理：新式网络浏览器幕后揭秘，这虽然是一篇 11 年的文章，但是内容在如今也不过时，文章广为流传
当···时发生了什么？，经典面试题，文中对于这个流程里的相关内容力求尽可能具体，不遗漏任何细节
从输入 URL 到页面加载完成的过程中都发生了什么事情？，这篇文章涉及了大量网络及硬件知识

渲染相关

浏览器的渲染原理简介，左耳朵耗子出品，如果上文「浏览器的工作原理：新式网络浏览器幕后揭秘」觉得太长不看或者看完觉得没看懂什么，那么可以来阅读下本文，起码能从中学会一些能用在工作上的东西
浏览器的回流与重绘 (Reflow & Repaint)

JS 执行机制

从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理，超长文，这篇文章能让你对进程线程，浏览器多进程、浏览器内核多线程、JS 单线程、JS 运行机制有个不错的理解

缓存

文档
彻底理解浏览器的缓存机制，浏览器缓存机制与性能优化息息相关

Devtools

Chrome DevTools，Google 出的 DevTools 的使用说明书，对于每个功能的使用都有详细的介绍，看啥文章都不如看这个
Chrome_Devtools_Tricks，介绍了 Chrome DevTools 的使用技巧，从不同的情景来说明应该如何搭配使用 Chrome DevTools 中的小技巧，适合英文不怎么好的读者阅读

浏览器安全

文档
一文读懂 Web 安全，简单介绍了一些前端需要注意的安全知识
the-book-of-secret-knowledge，如果你对安全领域有兴趣，可以阅读下这个仓库的内容

性能优化性能优化是一个系统性工程，涉及到的方面很多，不仅仅只是大家常说的静态文件和代码优化那么简单。
大家学习这部分内容的时候可以先从推荐的文章中了解具体有哪些性能优化手段及具体方法，然后根据这些内容去实验。
推荐书籍
其实性能优化相关的书籍市面上出的不多，优秀的也都是好几年前的老书了，看不看也无所谓了。