all-of-frontend

## 真全栈，全免费项目，学完直接上一个台阶 真全栈项目，适合前端进阶及转方向使用。项目包括前端、后端、Web3 最新技术栈，大杂烩，技术一锅端。 另外不是网上那些各种仿 xxx 的简单项目，尤其是后端会包括很多东西，学完直接上手做后端项目完全没问题。 教学全免费，在 B 站直播，具体内容可点击仓库查看：https://github.com/KieSun/fullstack-project。 ## 这是什么？ 笔者在学会 JS 以及框架的应用后，有一段时间不知道该如何深入下去，活能干，就是不知道该学啥。相信这个问题也会有很多读者朋友遇到。 当然笔者目前已经突破了这个瓶颈，也成为了知名公司基础架构组的成员。因此想通过自己成长的经历及积累的资料整理出一系列的学习路线及资料推荐，帮助各位读者朋友解决这个问题。 > 笔者会列出所有前端必学及热门领域的学习路径及推荐资料，比如浏览器、性能优化、框架、工程化、算法等等，工程浩大，大家可以持续关注该项目！ **此资料适用于小白入门、初中级进阶、高级查漏补缺。** **内容每天都在更新，大家可以持续关注。** ## 如何使用 如果你是初中级工程师来说，笔者也推荐先行学习「前端核心学习路径」，主要是巩固基础，之后再挑选感兴趣的主题。 如果你是高级工程师，笔者推荐跳过「前端核心学习路径」，直接挑选感兴趣的主题学习即可。 以下所有知识点笔者都会帮助读者朋友们将知识连贯起来，从而建立自己的知识体系而不是单独记忆松散的知识点。 **推荐大家 Star 并 Fork 本项目（点击仓库顶部右上角按钮），然后 `git clone` 到本地后从上至下逐步完成学习计划。** ## 如何获取本仓库资料 **笔者已经将仓库内容里的重要资料整理好了，还附赠了前端 10 万字的面试攻略，已经帮助上千人拿到 offer。大家可以关注公众号发送「资料」获取。** ## 如何贡献 推荐你认为优秀或者仓库缺失的内容至正确的位置即可，另外需要附带你的推荐理由。 ## 目录 - [ 这是什么？](#-这是什么) - [ 如何使用](#-如何使用) - [如何获取本仓库资料](#如何获取本仓库资料) - [如何贡献](#如何贡献) - [ 目录](#-目录) - [如何高效自学](#如何高效自学) - [书籍推荐](#书籍推荐) - [初级](#初级) - [进阶](#进阶) - [高级](#高级) - [前端核心学习路径](#前端核心学习路径) - [JS 核心知识点](#js-核心知识点) - [数据类型](#数据类型) - [类型判断](#类型判断) - [类型转换](#类型转换) - [this](#this) - [闭包](#闭包) - [作用域](#作用域) - [变量提升](#变量提升) - [new](#new) - [call、apply、bind](#callapplybind) - [原型](#原型) - [Class](#class) - [继承](#继承) - [模块化](#模块化) - [Promise](#promise) - [迭代器与生成器](#迭代器与生成器) - [async await](#async-await) - [事件循环](#事件循环) - [节流与防抖](#节流与防抖) - [柯里化](#柯里化) - [垃圾回收](#垃圾回收) - [设计模式](#设计模式) - [其他零散但重要的知识点](#其他零散但重要的知识点) - [HTML](#html) - [语义化](#语义化) - [CSS](#css) - [盒子模型](#盒子模型) - [选择器](#选择器) - [Flex](#flex) - [grid](#grid) - [其他](#其他) - [框架](#框架) - [虚拟 DOM](#虚拟-dom) - [路由](#路由) - [React](#react) - [React 推荐学习路径](#react-推荐学习路径) - [React 推荐学习资料](#react-推荐学习资料) - [如何编写一个组件](#如何编写一个组件) - [受控组件和非受控组件](#受控组件和非受控组件) - [高阶组件（HOC）](#高阶组件hoc) - [Hooks](#hooks) - [合成事件](#合成事件) - [React 路由](#react-路由) - [React 状态管理](#react-状态管理) - [React 接口请求](#react-接口请求) - [React SSR](#react-ssr) - [React 单测](#react-单测) - [React CSS 方案](#react-css-方案) - [React 原理](#react-原理) - [Blog 推荐](#blog-推荐) - [Vue](#vue) - [Vue 推荐学习路径](#vue-推荐学习路径) - [Vue 推荐学习资料](#vue-推荐学习资料) - [Vue 原理](#vue-原理) - [浏览器](#浏览器) - [架构](#架构) - [整体流程](#整体流程) - [渲染相关](#渲染相关) - [JS 执行机制](#js-执行机制) - [缓存](#缓存) - [Devtools](#devtools) - [浏览器安全](#浏览器安全) - [性能优化](#性能优化) - [推荐书籍](#推荐书籍) - [推荐网站](#推荐网站) - [整体优化建议](#整体优化建议) - [性能指标](#性能指标) - [性能监控](#性能监控) - [TypeScript](#typescript) - [Electron](#electron) - [组件库](#组件库) - [微前端](#微前端) - [推荐学习资料](#推荐学习资料) - [跨端框架](#跨端框架) - [监控](#监控) - [日常充电](#日常充电) - [CSS 日常充电](#css-日常充电) - [Github 优秀学习资料](#github-优秀学习资料) - [JS 优秀学习资料](#js-优秀学习资料) - [React 优秀学习资料](#react-优秀学习资料) - [代码样式及安全](#代码样式及安全) - [生产力工具](#生产力工具) - [流程图](#流程图) - [作者信息](#作者信息) ## 如何高效自学 自学是每个工程师都需要掌握的一项技能。这个学习方法笔者百试百灵，学习任何技术都会用上这个思路。另外我们还能通过这个思路拓宽自己的技术栈，将各个知识联系起来建立自己的知识体系，并且通过这种学习方式学到的知识也不容易遗忘。 ## 书籍推荐 以下书籍主要还是推荐了 JS 方面的，其它比如说框架、TS 等等技术会在各自章节为大家介绍。 ### 初级 - [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/) ### 进阶 - [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) - [你不知道的 JS 三卷](https://book.douban.com/subject/26351021/)，该书英文版是开源的，并且作者已经在写第二版，有能力阅读英文的读者推荐直接看 [原著](https://github.com/getify/You-Dont-Know-JS) ### 高级 - [JavaScript 悟道](https://book.douban.com/subject/35469273/) - [JavaScript 语言精髓与编程实践（第 3 版）](https://book.douban.com/subject/35085910/) **上述书籍大家可以关注【[公众号](#作者信息)】发送「资料」获取，另外还附赠了前端 10 万字的面试攻略，已经帮助上千人拿到 offer。** ## 前端核心学习路径 前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行根据兴趣选择学习内容。 **但是在学习其他内容之前，笔者强烈推荐各位务必一定一定先把基础打扎实了，基础不好真的不可能把自己技术往上拔高的。** > 为了保证大家学到的知识是正确的，下文中的文档资料笔者都使用了英文版本。因为在审核资料的过程中笔者发现不少中文文档都存在翻译错误或者过时的情况。 如果你还是一位初学者，推荐先自行完整阅读一至二本书后再按照该计划学习，因为以下计划并没有囊括 JS 的所有知识，而是列出了所有核心知识点。 关于书籍笔者推荐以下两本： - [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/) - [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) ### JS 核心知识点 #### 数据类型 JS 数据类型分为两大类及八种数据类型，注意别漏了新增的 `bigint`。 - [ ] 文档： - [ ] [JavaScript 数据类型和数据结构](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) #### 类型判断 类型判断有好几种方式，分别为： - `typeof` - `instanceof` - `Object.prototype.toString` - `isXXX`，比如 `isArray` - [ ] 文档 - [ ] [typeof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof) - [ ] [instanceof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof) - [ ] [Object.prototype.toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#using_tostring_to_detect_object_class) - [ ] 推荐文章，Issue 也挺重要 - [ ] [JavaScript 专题之类型判断(上)](https://github.com/mqyqingfeng/Blog/issues/28) - [ ] [JavaScript 专题之类型判断(下)](https://github.com/mqyqingfeng/Blog/issues/30) #### 类型转换 类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。 - [ ] 文档 - [ ] [ES 标准](https://tc39.es/ecma262/#sec-abstract-operations) - 标准并不好读，如果读者英文水平欠佳，可以只阅读该小节内的表格内容。 - [ ] [双等判断](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于类型转换的一章节](https://github.com/weiqinl/You-Dont-Know-JS-CN/blob/master/types%20%26%20grammar/ch4.md) - [ ] [几种基本类型简单的类型转换](https://zh.javascript.info/type-conversions) - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) #### this `this` 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。 - [ ] 文档 - [ ] [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于 this 的第一章节](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch1.md) - [ ] [You Don't Know JS 书中关于 this 的第二章节](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch2.md) - [ ] [深入理解 js this 绑定 ( 无需死记硬背，尾部有总结和面试题解析 )](https://segmentfault.com/a/1190000011194676) #### 闭包 闭包特别常用，但是其实挺多工程师对于闭包的理解是错误的。 - [ ] 文档 - [ ] [闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) - [ ] 推荐文章 - [ ] [You Don't Know JS 第二版中对于闭包的解释](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch7.md)，该版本暂无中文翻译，读者可用 [DeepL](https://www.deepl.com/translator) 进行翻译。 - [ ] [JavaScript 的静态作用域链与“动态”闭包链](https://juejin.cn/post/6957913856488243237) - [ ] [知乎中关于闭包的讨论](https://www.zhihu.com/question/34210214) #### 作用域 作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。 - [ ] 文档 - [ ] [作用域](https://developer.mozilla.org/en-US/docs/Glossary/Scope) - [ ] [块作用域](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting) - [ ] 推荐文章 - [ ] [JavaScript 深入之词法作用域和动态作用域](https://github.com/mqyqingfeng/Blog/issues/3) - [ ] [JavaScript 深入之作用域链](https://github.com/mqyqingfeng/Blog/issues/6) - [ ] [Variable scope, closure](https://javascript.info/closure)，另有 [中文翻译版](https://zh.javascript.info/closure) - [ ] [You Don't Know JS Yet: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures) - [ ] [The battle between function scope and block scope](https://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/) #### 变量提升 变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)，变量提升的概念 - [ ] 推荐文章 - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/)，深度解析变量提升和函数提升，举例说明各种情况下的变量提升 - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/)，深度理解解析 let 和 val 的区别，和 let 的暂时死区 - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)，JavaScript 中的作用域和函数声明和变量声明的提升 #### new `new` 操作符可以帮助我们构建出一个实例，并且绑定上 `this`。 - [ ] 文档 - [ ] [new](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) - [ ] 推荐文章 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) #### call、apply、bind - [ ] 文档 - [ ] [call](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)，call 的概念 - [ ] [apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)，apply 的概念 - [ ] [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)，bind 的概念 - [ ] 推荐文章 - [ ] [JS 中的 call、apply、bind 方法详解](https://segmentfault.com/a/1190000018270750)，对这三个方法的使用、面试题及具体实现做了详解 - [ ] [call 和 apply 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/11)，模拟实现 call 和 apply，帮助更好理解 - [ ] [bind 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/12)，模拟实现 bind，帮助更好理解 #### 原型 通过原型这种机制，JavaScript 中的对象从其他对象继承功能特性。 - [ ] 文档 - [ ] [原型](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) - [ ] 推荐文章 - [ ] [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch5.md) - [ ] [深入理解 JavaScript 原型](https://mp.weixin.qq.com/s/1UDILezroK5wrcK-Z5bHOg) - [ ] [深度解析原型中的各个难点](https://juejin.cn/post/6844903575974313992) - [ ] [Prototypes in JavaScript](https://betterprogramming.pub/prototypes-in-javascript-5bba2990e04b) 需自备梯子 #### Class `class` 只是原型链的语法糖，与其它语言中的类不是同一样东西。 - [ ] 文档 - [ ] [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class) - [ ] 推荐文章 - [ ] [理解 JavaScript 的类](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript) - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) - [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616) - [ ] [应该在 JavaScript 中使用 Class 吗？](https://zhuanlan.zhihu.com/p/158956514) #### 继承 继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) #### 模块化 这块知识必会，最好了解下模块化的前世今生以及对 ES6 的原生模块化有个深入的理解。 - [ ] 文档 - [ ] [Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) - [ ] 推荐文章 - [ ] [【深度全面】前端 JavaScript 模块化规范进化论](https://segmentfault.com/a/1190000023711059)，记录了 JS 模块化的进化之路 - [ ] [JavaScript modules](https://v8.dev/features/modules)，由浅入深解释 JS 模块化 - [ ] [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)，一篇对 JS 模块化深入解释的文章，另有 [中文版](https://juejin.cn/post/6844903591979778061) #### Promise - [ ] 文档 - [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [ ] [Promises/A+ 规范](https://promisesaplus.com/) - [ ] 推荐文章 - [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81)，需自备梯子 - [ ] [最简实现 Promise，支持异步链式调用（20 行）](https://juejin.cn/post/6844904094079926286) - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) - [ ] Github - [ ] [promise-fun](https://github.com/sindresorhus/promise-fun) #### 迭代器与生成器 - [ ] 文档 - [ ] [迭代器与生成器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) - [ ] 推荐文章 - [ ] [[译] 什么是 JavaScript 生成器？如何使用生成器？](https://juejin.cn/post/6844903616357072910) - [