本文是一份由多名资深前端开发者共同编写的万字进阶指南，旨在帮助初中级前端工程师提升技能，内容涵盖前端核心知识点、框架、浏览器原理、性能优化等多个方面。指南强调打好基础的重要性，并提供了详细的资源推荐，包括书籍、学习路径和实战项目，适合不同阶段的开发者按需学习。此外，还分享了高效自学的方法和一些实用的生产力工具。
因为微信公众号不支持打开外链，所以有兴趣获取资料的读者朋友可以公众号发送「资料」关键字或者打开 Github 链接（https://github.com/KieSun/all-of-frontend）。
🔥 这是什么？
笔者在学会 JS 以及框架的应用后，有一段时间不知道该如何深入下去，活能干，就是不知道该学啥。相信这个问题也会有很多读者朋友遇到。
当然笔者目前已经突破了这个瓶颈，也成为了知名公司基础架构组的成员。因此想通过自己成长的经历及积累的资料整理出一系列的学习路线及资料推荐，帮助各位读者朋友解决这个问题。
仓库内容笔者为主要贡献者，另外还拉了将近 20 位资深前端开发做内容共建及审核，多数人员任职一线大厂 P6、P7，第一版耗时数周，大家国庆假期也没停歇，内容绝对让各位看官满意。
此资料适用于小白入门、初中级进阶、高级查漏补缺。
内容每天都在更新，大家可以持续关注。
💻 如何使用
如果你是初中级工程师来说，笔者也推荐先行学习「前端核心学习路径」，主要是巩固基础，之后再挑选感兴趣的主题。
如果你是高级工程化，笔者推荐跳过「前端核心学习路径」，直接挑选感兴趣的主题学习即可。
以下所有知识点笔者都会帮助读者朋友们将知识连贯起来，从而建立自己的知识体系而不是单独记忆松散的知识点。
如何获取本文资料
笔者已经将仓库内容里的重要资料整理好了， 另外还附赠了前端 10 万字的面试攻略，已经帮助上千人拿到 offer。大家可以在公众号后台发送「资料」获取。
如何高效自学
自学是每个工程师都需要掌握的一项技能。这个学习方法笔者百试百灵，学习任何技术都会用上这个思路。另外我们还能通过这个思路拓宽自己的技术栈，将各个知识联系起来建立自己的知识体系，并且通过这种学习方式学到的知识也不容易遗忘。
书籍推荐
以下书籍主要还是推荐了 JS 方面的，其它比如说框架、TS 等等技术会在各自章节为大家介绍。
初级
•JavaScript 高级程序设计（第 4 版）[1]
进阶
•JavaScript 忍者秘籍（第 2 版）[2]•你不知道的 JS 三卷[3]，该书英文版是开源的，并且作者已经在写第二版，有能力阅读英文的读者推荐直接看 原著[4]
高级
•JavaScript 悟道[5]•JavaScript 语言精髓与编程实践（第 3 版）[6]
上述书籍大家可以关注【公众号[7]】发送「资料」获取， 另外还附赠了前端 10 万字的面试攻略，已经帮助上千人拿到 offer。
前端核心学习路径
前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行根据兴趣选择学习内容。
但是在学习其他内容之前，笔者强烈推荐各位务必一定一定先把基础打扎实了，基础不好真的不可能把自己技术往上拔高的。
为了保证大家学到的知识是正确的，下文中的文档资料笔者都使用了英文版本。因为在审核资料的过程中笔者发现不少中文文档都存在翻译错误或者过时的情况。
如果你还是一位初学者，推荐先自行完整阅读一至二本书后再按照该计划学习，因为以下计划并没有囊括 JS 的所有知识，而是列出了所有核心知识点。
关于书籍笔者推荐以下两本：
•JavaScript 高级程序设计（第 4 版）[8]•JavaScript 忍者秘籍（第 2 版）[9]
JS 核心知识点
数据类型
JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增的 bigint。
•文档：•JavaScript 数据类型和数据结构[10]
类型判断
类型判断有好几种方式，分别为：
•typeof•instanceof•Object.prototype.toString•isXXX，比如 isArray•文档•typeof[11]•instanceof[12]•Object.prototype.toString[13]•推荐文章，Issue 也挺重要•JavaScript 专题之类型判断(上)[14]•JavaScript 专题之类型判断(下)[15]
类型转换
类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。
•文档•ES 标准[16]•标准并不好读，如果读者英文水平欠佳，可以只阅读该小节内的表格内容。•双等判断[17]•推荐文章•You Don't Know JS 书中关于类型转换的一章节[18]•几种基本类型简单的类型转换[19]•JavaScript 深入之头疼的类型转换(上)[20]•JavaScript 深入之头疼的类型转换(下)[21]
this
this 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。
•文档•this[22]•推荐文章•You Don't Know JS 书中关于 this 的第一章节[23]•You Don't Know JS 书中关于 this 的第二章节[24]•深入理解 js this 绑定 ( 无需死记硬背，尾部有总结和面试题解析 )[25]
闭包
闭包特别常用，但是其实挺多工程师对于闭包的理解是错误的。
•文档•闭包[26]•推荐文章•You Don't Know JS 第二版中对于闭包的解释[27]，该版本暂无中文翻译，读者可用 DeepL[28] 进行翻译。•JavaScript 的静态作用域链与“动态”闭包链[29]•知乎中关于闭包的讨论[30]
作用域
作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。
•文档•作用域[31]•块作用域[32]•推荐文章•JavaScript 深入之词法作用域和动态作用域[33]•JavaScript 深入之作用域链[34]•Variable scope, closure[35]，另有 中文翻译版[36]•You Don't Know JS Yet: Scope & Closures[37]•The battle between function scope and block scope[38]
变量提升
变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。
•文档•JS 变量提升[39]，变量提升的概念•推荐文章•JavsScript 变量提升和函数提升[40]，深度解析变量提升和函数提升，举例说明各种情况下的变量提升•我用了两个月的时间才理解 let[41]，深度理解解析 let 和 val 的区别，和 let 的暂时死区•JavaScript Scoping and Hoisting[42]，JavaScript 中的作用域和函数声明和变量声明的提升
new
new 操作符可以帮助我们构建出一个实例，并且绑定上 this。
•文档•new[43]•推荐文章•JS 的 new 到底是干什么的？[44]•JavaScript 深入之 new 的模拟实现[45]
call、apply、bind
•文档•call[46]，call 的概念•apply[47]，apply 的概念•bind[48]，bind 的概念•推荐文章•JS 中的 call、apply、bind 方法详解[49]，对这三个方法的使用、面试题及具体实现做了详解•call 和 apply 的模拟实现[50]，模拟实现 call 和 apply，帮助更好理解•bind 的模拟实现[51]，模拟实现 bind，帮助更好理解
原型
通过原型这种机制，JavaScript 中的对象从其他对象继承功能特性。
•文档•原型[52]•推荐文章•You Don't Know JS: this & Object Prototypes[53]•深入理解 JavaScript 原型•深度解析原型中的各个难点[54]•Prototypes in JavaScript[55] 需自备梯子
Class
class 只是原型链的语法糖，与其它语言中的类不是同一样东西。
•文档•Class[56]•推荐文章•理解 JavaScript 的类[57]•Babel 是如何编译 Class 上[58]•Babel 是如何编译 Class 下[59]•给 ES6 class 说句公道话[60]•应该在 JavaScript 中使用 Class 吗？[61]
继承
继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。
•文档•继承[62]•推荐文章•JavaScript 深入之继承的多种方式和优缺点[63]•JavaScript 中的继承[64]，需自备梯子•JS 类继承[65]，另有 中文翻译版[66]
模块化
这块知识必会，最好了解下模块化的前世今生以及对 ES6 的原生模块化有个深入的理解。
•文档•Modules[67]•推荐文章•【深度全面】前端 JavaScript 模块化规范进化论[68]，记录了 JS 模块化的进化之路•JavaScript modules[69]，由浅入深解释 JS 模块化•ES modules: A cartoon deep-dive[70]，一篇对 JS 模块化深入解释的文章，另有 中文版[71]
Promise
•文档•Promise[72]•Promises/A+ 规范[73]•推荐文章•Callbacks Vs Promises and basics of JS[74]，需自备梯子•最简实现 Promise，支持异步链式调用（20 行）[75]•100 行代码实现 Promises/A+ 规范•Github•promise-fun[76]
迭代器与生成器
•文档•迭代器与生成器[77]•推荐文章•[译] 什么是 JavaScript 生成器？如何使用生成器？[78]•Understanding Generators in ES6 JavaScript with Examples[79]，需自备梯子•A Simple Guide to ES6 Iterators in JavaScript with Examples[80]，需自备梯子
async await
•文档•async[81]•await[82]•推荐文章•手写 async await 的最简实现（20 行）[83]•Babel 将 Generator 编译成了什么样子 [84]
事件循环
大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。
•文档•事件循环[85]•推荐文章•这一次，彻底弄懂 JavaScript 执行机制[86]•一次弄懂 Event Loop[87]•JavaScript 的工作原理[88]，需自备梯子，另有 中文翻译版[89]。•事件循环可视化•Loupe[90]
节流与防抖
节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。防抖指在事件被触发一定时间后再执行回调函数，如果在一定时间内该事件又被重复触发，则重启计时。
•推荐文章•函数防抖与函数节流[91]•浅谈 JS 防抖和节流[92]•Debounce – How to Delay a Function in JavaScript[93]•Debouncing and Throttling in JavaScript[94]
柯里化
柯里化就是将接收多个参数的函数转换成接收一个参数的函数。
•推荐文章•柯里化（Currying）[95]•JavaScript 专题之函数柯里化[96]•Understanding Currying in JavaScript[97]，需自备梯子，另有 中文翻译版[98]
垃圾回收
JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。
•文档•内存管理 & 垃圾回收[99]•推荐文章•深入理解 Chrome V8 垃圾回收机制[100]，该文章的参考文献也可阅读下•GC in v8[101]•JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏[102]，另有中文版[103]
其他零散但重要的知识点
•0.1 + 0.2 !== 0.3[104]，JS 浮点数会造成的问题
如果你觉得以上内容对你有帮助，可以前往 Github[105] 点个 Star 支持一下。
HTML
语义化
html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。在没有引入样式 CCS 样式的时候也能以一种可以分辨出来大致表示内容的文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
•文档•HTML 中的语义[106]，什么是 HTML 语义化，HTML 语义化有什么好处•推荐文章•IFE-NOTE：页面结构语义化[107]，HTML5 语义化中的页面结构语义化的一些经验和理解•关于 HTML 语义和前端架构[108]，HTML 语义化在开发中配合 CSS 结构化类名的使用构建可重用和可组合的组件
CSS
•推荐文章•一文梳理 CSS 必会知识点[109]
盒子模型
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
•文档•CSS 盒子模型[110]，官方文档深入了解 CSS 盒子模型•推荐文章•CSS 盒模型之内边距、边框、外边距 十九问[111]，通过举例说明盒子模型各种常见形态和问题•CSS Box Model[112]，盒子模型的一些规范介绍•CSS 盒模型详解（图文教程）[113]，通过图片和例子说明盒子模型的各个部分和在页面上的表现形式
选择器
CSS 中，选择器用来指定网页上我们想要样式化的 HTML 元素。CSS 选择器提供了很多种方法，所以在选择要
最低0.47元/天 解锁文章
扫一扫
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
