mirror of
				https://github.com/KieSun/all-of-frontend.git
				synced 2025-05-29 01:49:23 +08:00 
			
		
		
		
	
						commit
						9cc3b0341d
					
				
							
								
								
									
										183
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										183
									
								
								README.md
									
									
									
									
									
								
							@ -39,91 +39,101 @@
 | 
			
		||||
 | 
			
		||||
## 📖 目录
 | 
			
		||||
 | 
			
		||||
- [如何高效自学](#如何高效自学)
 | 
			
		||||
- [书籍推荐](#书籍推荐)
 | 
			
		||||
  - [初级](#初级)
 | 
			
		||||
  - [进阶](#进阶)
 | 
			
		||||
  - [高级](#高级)
 | 
			
		||||
- [前端核心学习路径](#前端核心学习路径)
 | 
			
		||||
  - [前端核心三板斧](#前端核心三板斧)
 | 
			
		||||
  - [JS](#js)
 | 
			
		||||
    - [数据类型](#数据类型)
 | 
			
		||||
    - [类型判断](#类型判断)
 | 
			
		||||
    - [类型转换](#类型转换)
 | 
			
		||||
    - [this](#this)
 | 
			
		||||
    - [闭包](#闭包)
 | 
			
		||||
    - [作用域](#作用域)
 | 
			
		||||
    - [原型](#原型)
 | 
			
		||||
    - [new](#new)
 | 
			
		||||
    - [变量提升](#变量提升)
 | 
			
		||||
    - [call、apply、bind](#callapplybind)
 | 
			
		||||
    - [Class](#class)
 | 
			
		||||
    - [继承](#继承)
 | 
			
		||||
    - [模块化](#模块化)
 | 
			
		||||
    - [Promise](#promise)
 | 
			
		||||
    - [迭代器与生成器](#迭代器与生成器)
 | 
			
		||||
    - [事件循环](#事件循环)
 | 
			
		||||
    - [节流与防抖](#节流与防抖)
 | 
			
		||||
    - [柯里化](#柯里化)
 | 
			
		||||
    - [垃圾回收](#垃圾回收)
 | 
			
		||||
    - [其他零散但重要的知识点](#其他零散但重要的知识点)
 | 
			
		||||
  - [HTML](#html)
 | 
			
		||||
    - [语义化](#语义化)
 | 
			
		||||
  - [CSS](#css)
 | 
			
		||||
    - [盒子模型](#盒子模型)
 | 
			
		||||
    - [选择器](#选择器)
 | 
			
		||||
    - [Flex](#flex)
 | 
			
		||||
    - [grid](#grid)
 | 
			
		||||
    - [其他](#其他)
 | 
			
		||||
- [浏览器](#浏览器)
 | 
			
		||||
  - [架构](#架构)
 | 
			
		||||
  - [整体流程](#整体流程)
 | 
			
		||||
  - [渲染相关](#渲染相关)
 | 
			
		||||
  - [JS 执行机制](#JS-执行机制)
 | 
			
		||||
  - [缓存](#缓存)
 | 
			
		||||
  - [Devtools](#devtools)
 | 
			
		||||
  - [浏览器安全](#浏览器安全)
 | 
			
		||||
- [性能优化](#性能优化)
 | 
			
		||||
  - [推荐书籍](#推荐书籍)
 | 
			
		||||
  - [推荐网站](#推荐网站)
 | 
			
		||||
  - [整体优化建议](#整体优化建议)
 | 
			
		||||
  - [性能指标](#性能指标)
 | 
			
		||||
  - [性能监控](#性能监控)
 | 
			
		||||
- [框架](#框架)
 | 
			
		||||
  - [虚拟 DOM](#虚拟-DOM)
 | 
			
		||||
  - [路由](#路由)
 | 
			
		||||
- [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)
 | 
			
		||||
- [TypeScript](#typescript)
 | 
			
		||||
- [Electron](#electron)
 | 
			
		||||
- [组件库](#组件库)
 | 
			
		||||
- [微前端](#微前端)
 | 
			
		||||
- [跨端框架](#跨端框架)
 | 
			
		||||
- [监控](#监控)
 | 
			
		||||
- [面试](#面试)
 | 
			
		||||
- [日常充电](#日常充电)
 | 
			
		||||
  - [CSS 日常充电](#CSS-日常充电)
 | 
			
		||||
- [Github 优秀学习资料](#github-优秀学习资料)
 | 
			
		||||
  - [JS 优秀学习资料](#JS-优秀学习资料)
 | 
			
		||||
  - [React 优秀学习资料](#react-优秀学习资料)
 | 
			
		||||
  - [代码样式及安全](#代码样式及安全)
 | 
			
		||||
- [生产力工具](#生产力工具)
 | 
			
		||||
  - [流程图](#流程图)
 | 
			
		||||
- [作者信息](#作者信息)
 | 
			
		||||
- [Fucking Frontend](#fucking-frontend)
 | 
			
		||||
  - [🔥 这是什么?](#-这是什么)
 | 
			
		||||
  - [💻 如何使用](#-如何使用)
 | 
			
		||||
  - [如何获取本仓库资料](#如何获取本仓库资料)
 | 
			
		||||
  - [如何贡献](#如何贡献)
 | 
			
		||||
  - [📖 目录](#-目录)
 | 
			
		||||
  - [如何高效自学](#如何高效自学)
 | 
			
		||||
  - [书籍推荐](#书籍推荐)
 | 
			
		||||
    - [初级](#初级)
 | 
			
		||||
    - [进阶](#进阶)
 | 
			
		||||
    - [高级](#高级)
 | 
			
		||||
  - [前端核心学习路径](#前端核心学习路径)
 | 
			
		||||
    - [前端核心三板斧](#前端核心三板斧)
 | 
			
		||||
    - [JS](#js)
 | 
			
		||||
      - [数据类型](#数据类型)
 | 
			
		||||
      - [类型判断](#类型判断)
 | 
			
		||||
      - [类型转换](#类型转换)
 | 
			
		||||
      - [this](#this)
 | 
			
		||||
      - [闭包](#闭包)
 | 
			
		||||
      - [作用域](#作用域)
 | 
			
		||||
      - [原型](#原型)
 | 
			
		||||
      - [new](#new)
 | 
			
		||||
      - [变量提升](#变量提升)
 | 
			
		||||
      - [call、apply、bind](#callapplybind)
 | 
			
		||||
      - [Class](#class)
 | 
			
		||||
      - [继承](#继承)
 | 
			
		||||
      - [模块化](#模块化)
 | 
			
		||||
      - [Promise](#promise)
 | 
			
		||||
      - [迭代器与生成器](#迭代器与生成器)
 | 
			
		||||
      - [事件循环](#事件循环)
 | 
			
		||||
      - [节流与防抖](#节流与防抖)
 | 
			
		||||
      - [柯里化](#柯里化)
 | 
			
		||||
      - [垃圾回收](#垃圾回收)
 | 
			
		||||
      - [其他零散但重要的知识点](#其他零散但重要的知识点)
 | 
			
		||||
    - [HTML](#html)
 | 
			
		||||
      - [语义化](#语义化)
 | 
			
		||||
    - [CSS](#css)
 | 
			
		||||
      - [盒子模型](#盒子模型)
 | 
			
		||||
      - [选择器](#选择器)
 | 
			
		||||
      - [Flex](#flex)
 | 
			
		||||
      - [grid](#grid)
 | 
			
		||||
      - [其他](#其他)
 | 
			
		||||
  - [浏览器](#浏览器)
 | 
			
		||||
    - [架构](#架构)
 | 
			
		||||
    - [整体流程](#整体流程)
 | 
			
		||||
    - [渲染相关](#渲染相关)
 | 
			
		||||
    - [JS 执行机制](#js-执行机制)
 | 
			
		||||
    - [缓存](#缓存)
 | 
			
		||||
    - [Devtools](#devtools)
 | 
			
		||||
    - [浏览器安全](#浏览器安全)
 | 
			
		||||
  - [性能优化](#性能优化)
 | 
			
		||||
    - [推荐书籍](#推荐书籍)
 | 
			
		||||
    - [推荐网站](#推荐网站)
 | 
			
		||||
    - [整体优化建议](#整体优化建议)
 | 
			
		||||
    - [性能指标](#性能指标)
 | 
			
		||||
    - [性能监控](#性能监控)
 | 
			
		||||
  - [框架](#框架)
 | 
			
		||||
    - [虚拟 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-原理)
 | 
			
		||||
  - [TypeScript](#typescript)
 | 
			
		||||
  - [Electron](#electron)
 | 
			
		||||
  - [组件库](#组件库)
 | 
			
		||||
  - [微前端](#微前端)
 | 
			
		||||
  - [跨端框架](#跨端框架)
 | 
			
		||||
  - [监控](#监控)
 | 
			
		||||
  - [面试](#面试)
 | 
			
		||||
  - [日常充电](#日常充电)
 | 
			
		||||
    - [CSS 日常充电](#css-日常充电)
 | 
			
		||||
  - [Github 优秀学习资料](#github-优秀学习资料)
 | 
			
		||||
    - [JS 优秀学习资料](#js-优秀学习资料)
 | 
			
		||||
    - [React 优秀学习资料](#react-优秀学习资料)
 | 
			
		||||
    - [代码样式及安全](#代码样式及安全)
 | 
			
		||||
  - [生产力工具](#生产力工具)
 | 
			
		||||
    - [流程图](#流程图)
 | 
			
		||||
  - [作者信息](#作者信息)
 | 
			
		||||
 | 
			
		||||
## 如何高效自学
 | 
			
		||||
 | 
			
		||||
@ -516,11 +526,13 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合
 | 
			
		||||
- [前端性能优化 24 条建议(2020)](https://juejin.cn/post/6892994632968306702),类似现代版雅虎军规
 | 
			
		||||
- [前端性能优化之旅](https://github.com/alienzhou/fe-performance-journey),系统性介绍性能优化的手段,参考资料也值得学习
 | 
			
		||||
- [Front-End Performance Checklist 2021](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/),一本很火的免费 PDF,包含了很多性能优化相关的 Checklist
 | 
			
		||||
- [React 性能优化 | 包括原理、技巧、Demo、工具使用](https://juejin.cn/post/6935584878071119885)
 | 
			
		||||
 | 
			
		||||
### 性能指标
 | 
			
		||||
 | 
			
		||||
- [文档](https://web.dev/learn-web-vitals/)
 | 
			
		||||
- [还在看那些老掉牙的性能优化文章么?这些最新性能指标了解下](https://juejin.cn/post/6850037270729359367),文章会介绍谷歌提倡的七个用户体验指标(也可以认为是性能指标)
 | 
			
		||||
- [做性能优化时,我们关注哪些指标?](https://mp.weixin.qq.com/s/SlS0J9eSb20PCLW062sQVg)
 | 
			
		||||
 | 
			
		||||
### 性能监控
 | 
			
		||||
 | 
			
		||||
@ -561,6 +573,7 @@ Virtual DOM 也就是虚拟节点。通过 JS 的 Object 对象模拟 DOM 中的
 | 
			
		||||
### React 推荐学习资料
 | 
			
		||||
 | 
			
		||||
- [React 学习之道](https://leanpub.com/the-road-to-learn-react-chinese/),可以 0 元购买
 | 
			
		||||
- [React 生命周期](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
 | 
			
		||||
 | 
			
		||||
### 如何编写一个组件
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user