2022，前端应该阅读这些文章

同学们都知道，前端圈变得越来越卷了，各种技术层出不穷，简直让人应接不暇。可能很多跟我一样，一时间，看到这个也想学，看到那个也想学，最终的结果是什么？那就是：啥都没学！

所以笔者花费了几天时间，整理了一下前端必读文章，同时也可以当作是一份知识图谱，用来查漏补缺。

本资料适宜人群：

• 希望按部就班的、系统的学习前端知识的（初级->中级->高级）；
• 希望对自己的知识图谱进行查漏补缺的；
• 希望当作面试手册进行知识复盘的；

本文主要是笔者查阅了很多资料并结合自己的理解，整理而成的，请大家积极讨论、批评、补充。

在此鸣谢各位写出以下优秀资料的作者，是你们，带动了整个社区的发展。

HTML

• 学习 HTML ：指南与教程
• 很不错的html学习资料
• HTML meta标签总结与属性使用介绍
• 彻底理解行内元素和块级元素，不必硬背

CSS

• CSS盒模型完整介绍
• CSS 选择器，一篇就够了
• 10 分钟理解 BFC 原理
• 定位.Position
• flex 布局的基本概念
• 你必须懂的css样式权重和优先级
• 深入理解圣杯布局和双飞翼布局
• css3新特性
• 深入理解CSS中的层叠上下文和层叠顺序
• （史上最全）div居中的几种方法
• 带你彻底了解CSS浮动
• 一起搞懂 CSS 水平居中与垂直居中的16个方法
• 你未必知道的49个CSS知识点
• 灵活运用CSS开发技巧
• 我写CSS动画的常用套路
• 45个值得收藏的 CSS 形状
• 7种方法解决移动端Retina屏幕1px边框问题
• 梳理 CSS 模块化
• CSS性能优化

JavaScript

• JavaScript教程
• JS之数组
• JS之对象
• 重新介绍 JavaScript
• 经常被面试官问道的JavaScript数据类型知识你真的懂吗？
• JS正则表达式完整教程
• 你还没学会javascript原型和原型链吗？
• JavaScript继承
• JavaScript常用八种继承方案
• JavaScript作用域链
• JavaScript闭包
• JavaScript变量对象
• Javascript this
• JavaScript：立即执行函数表达式（IIFE）
• 浅谈 instanceof 和 typeof 的实现原理
• JavaScript深入之call和apply的模拟实现
• 细说 call、apply 以及 bind 的区别和用法
• JavaScript深入之bind的模拟实现
• JavaScript 深入之浮点数精度
• JavaScript深入之new的模拟实现
• 详解JavaScript中的Event Loop（事件循环）机制
• 这一次，彻底弄懂 JavaScript 执行机制
• 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
• 麻烦把JS的事件循环给我安排一下
• 如何写出一个惊艳面试官的深拷贝?
• JS的防抖与节流
• 三行代码实现 JS 柯里化
• 简单理解JavaScript中的柯里化和反柯里化
• 关于JS中一些重要的api实现, 巩固你的原生JS功底
• 你不知道的 JSON.stringify() 的威力
• JavaScript设计模式es6（23种)
• 一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧
• JS开发必须知道的41个技巧
• JavaScript 是如何影响 DOM 生成的
• JavaScript 事件模型
• 深入了解 JavaScript 内存泄露

ES6

• ES6入门教程
• 1.5万字概括ES6全部特性(已更新ES2020)
• ES6、ES7、ES8、ES9、ES10新特性一览
• 《深入理解ES6》学习笔记完整版
• 这一次，彻底弄懂 Promise 原理
• 要就来45道Promise面试题一次爽到底(1.1w字用心整理)
• 从一道让我失眠的 Promise 面试题开始，深入分析 Promise 实现细节
• 深入理解 Generators
• 手写一个Promise,Generator,async和 await

TypeScript

• TypeScript 中文手册
• TypeScript 入门教程
• TypeScript，初次见面，请多指教
• TypeScript 速成教程
• 了不起的 TypeScript 入门教程
• 深入理解 TypeScript
• TypeScript 高级用法
• TypeScript 高级技巧
• 一文读懂 TypeScript 泛型及应用
• TypeScript 实践
• TypeScript - 一种思维方式
• 从今天开始，拿起 TypeScript 做一个轮子的制造者

Vue

• 官方文档V2
• 官方文档V3
• Vue-Router
• VueX
• Vue Cli
• Element UI
• Ant Design Vue
• iView
• Vue TypeScript 支持
• Vue3.0 前的 TypeScript 最佳入门实践
• Vue3.0全家桶最全入门指南
• 快速使用Vue3最新的15个常用API
• Vue 开发必须知道的 36 个技巧
• Vue 项目性能优化 — 实践指南
• Vue 项目里戳中你痛点的问题及解决办法
• 封装Vue组件的一些技巧
• vue中8种组件通信方式, 值得收藏!
• 我在项目中是这样配置Vue的
• Vue最全知识点，面试必备（基础到进阶，覆盖vue3.0
• 总结我对Vue项目上线做的一些基本优化
• 学会这些Vue小技巧，可以早点下班和女神约会了
• 理解Vue中的computed,watch,methods的区别及源码实现
• 深入剖析Vue源码 - Vue插槽
• Vue的computed和watch的细节全面分析
• Vue nextTick实现原理
• 彻底搞懂Vue中keep-alive的魔法
• 解析 vue2 diff 算法
• vue3.0 diff算法详解(超详细)
• 解读Vue源码
• Vue 源码精读
• 深入剖析Vue源码 - 响应式系统构建
• Vue(v2.6.11)万行源码生啃，就硬刚！
• 带你全面分析vue-router源码
• Vuex 源码解析
• 【手把手系列之】实现一个简易版vue2
• Vue 3 源码导读
• Vue.js 3.x 源码解析先导
• Vue3 源码阅读
• Vue3 源码分析

React

• 官方文档
• React.js 小书
• React Router
• React Redux
• react 入门必知必会知识点
• React 开发必须知道的 34 个技巧
• React全部api解读+基础实践大全
• 写React Hooks前必读
• 30分钟精通React Hooks
• 终于搞懂 React Hooks了
• React Hooks 详解
• 整理了N个实用案例帮你快速迁移到React Hooks
• 玩转react-hooks,自定义hooks设计模式及其实战
• React Hooks 最佳实践
• 由浅到深的React合成事件
• 年终送给react开发者的八条优化建议
• React 项目性能分析及优化
• React异常处理
• 深入理解 React 高阶组件
• virtualdom diff算法实现分析
• 【React深入】setState的执行机制
• 一文吃透react事件系统原理
• 一文吃透React高阶组件(HOC)
• 一文吃透react-hooks原理
• 深入React fiber架构及源码
• React技术揭秘
• React源码解析
• 这可能是最通俗的 React Fiber(时间分片) 打开方式
• 从路由原理出发，深入阅读理解react-router 4.0的源码
• React-Redux源码分析
• 自己动手实现一个React
• Build your own React
• 手写React Router
• Redux/react-redux/redux中间件设计实现剖析
• React + TypeScript实践
• TypeScript 在 React 中使用总结
• 可能是你需要的 React + TypeScript 50 条规范和经验
• Redux核心原则
• Redux从设计到源码

计算机网络

• OSI 7层模型和TCP/IP 4层模型
• TCP 的那些事儿
• UDP详解
• HTTP的前世今生
• 深入理解http2.0协议，看这篇就够了！
• HTTP3.0和QUIC协议那些事
• 如何通俗易懂的给你讲明白HTTPS？
• HTTP1.0、HTTP1.1 和 HTTP2.0 的区别
• 图解 HTTP 缓存
• websocket 协议详解及报文分析
• Ajax 知识体系大梳理
• 前端路由的两种模式：hash模式和 history模式
• 面试官：前端跨页面通信，你知道哪些方法？

数据结构与算法

• JavaScript 算法与数据结构
• 前端该如何准备数据结构和算法？
• 前端工程师如何系统练习数据结构和算法
• 你可能需要的一份前端算法总结
• 写给前端的算法进阶指南，我是如何两个月零基础刷200题
• 斐波那契数列
• 合并二维有序数组成一维有序数组
• 链表：反转链表
• 链表：链表有环
• 堆栈队列：判断括号字符串是否有效
• 返回数组中第k个最大元素
• 找出数组中和为sum的n个数
• 贪心：具有给定数值的最小字符串
• 二叉树：最大深度
• 二叉树：层次遍历
• 翻转二叉树
• 剪枝：判断数独是否有效
• 二分查找：求解平方根
• 字典树：实现一个字典树
• 爬楼梯问题
• 最短距离
• LRU缓存
• 实现一个trim方法
• 大数相加
• 拍平数组
• 数组去重
• 判断是否是回文数
• 实现一个模板引擎
• 判断一个数是否是素数
• 获取n以内所有的素数
• 实现一个deepClone方法
• 实现 add(1)(2)(3)
• 实现防抖函数
• 实现节流函数
• 实现字符串翻转

工程化

• 前端模块化详解(完整版)
• Tree-Shaking性能优化实践 - 原理篇
• JS代码是如何被压缩的
• 再不会webpack敲得代码就不香了
• 手摸手带你掌握新版Webpack4.0详解
• Webpack 4 配置最佳实践
• 再来一打Webpack面试题
• webpack4 的30个步骤打造优化到极致的 react 开发环境
• 带你深度解锁Webpack系列(基础篇)
• 带你深度解锁Webpack系列(优化篇)
• 关于webpack4的14个知识点,童叟无欺
• 细说 webpack 之流程篇
• 理解webpack原理，手写一个100行的webpack
• webpack-插件机制杂记
• webpack loader 机制
• Rollup打包工具的使用（超详细，超基础，附代码截图超简单）
• 前端组件/库打包利器rollup使用与配置实战
• 关于Rollup那些事
• Vite 会成为2021年最受欢迎的前端工具吗？
• 备战2021：vite工程化实践，建议收藏
• Vite 源码分析
• 下一个时代的打包工具 esbuild
• 从babel讲到AST
• 聊一聊 Babel?
• 不容错过的 Babel7 知识
• 手把手带你入门 AST 抽象语法树
• AST详解与运用

性能优化

• 前端性能优化 - 用RAIL模型分析性能
• 前端性能优化手段
• 重排和重绘
• 动画性能
• 渲染合成层
• 大量图片加载优化
• 白屏

图像

• Canvas教程
• three.js动画教程
• canvas动画时钟
• 怎样用JavaScript和HTML5 Canvas绘制图表
• canvas图表详解系列：柱状图
• 自己动手绘制一个折线图控件ChartView
• Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例
• 14个最好的 JavaScript 数据可视化库
• 我对web前端与可视化的一些思考

浏览器

• 前端开发的你应该知道的浏览器知识
• 前端存贮全家桶--cookie、sessionStorage、localStorage、和indexedDB重点合集
• 一文搞懂V8引擎的垃圾回收
• 彻底理解浏览器的缓存机制
• Chrome 浏览器架构
• 浏览器的工作原理：新式网络浏览器幕后揭秘
• 浏览器的渲染：过程与原理
• 如何处理浏览器的断网情况？
• 11道浏览器原理面试题

web安全

• 前端安全系列（一）：如何防止XSS攻击？
• 前端安全系列之二：如何防止CSRF攻击？
• 【面试篇】寒冬求职之你必须要懂的Web安全
• 常见六大Web安全攻防解析
• 一文读懂 Web 安全

Node

• Node.js v14.16.1 文档
• express文档
• koa文档
• Egg.js文档
• 阿里开源框架 Egg.js 入门与实战
• 中高级前端进阶之极速通关koa2全栈核心内容
• 前后端分离 Vue + NodeJS(Koa) + MongoDB，从产品到开发
• 深入了解Nodejs模块机制
• require() 源码解读
• Node.js 事件循环
• 深度剖析cluster模块源码与node.js多进程
• 深入理解 Node Stream 内部机制
• Nodejs Stream pipe 的使用与实现原理分析
• Nodejs 编写守护进程
• Nodejs进程间通信
• Node.js 异常捕获的一些实践
• Deno文档

跨端开发

• React-Native学习指南
• 一份传男也传女的 React Native 学习笔记
• React Native 性能优化指南
• Flutter完整开发实战详解
• 《Flutter实战》电子书
• Flutter | 老孟
• Flutter | 猫哥
• Flutter | 状态管理指南篇——Provider
• Flutter GetX使用---简洁的魅力！
• 小程序开发：用原生还是选框架（wepy/mpvue/uni-app/taro）？
• Taro入门教程
• UniAPP 入门教程
• uni-app的开发经历（持续更新）

设计模式

• JavaScript 中常见设计模式整理
• JavaScript设计模式
• 前端渣渣唠嗑一下前端中的设计模式（真实场景例子）
• JavaScript设计模式es6（23种)

Git

• git基本操作，一篇文章就够了！
• Git 常用操作总结
• git-flow 的工作流程
• 如何优雅地使用 Git
• 最常见的 Git 问题和操作清单汇总
• 这才是真正的Git——Git内部原理

书籍

• 你不知道的javascript 上中下
• JavaScript 高级程序设计 第四版
• JavaScript 设计模式与开发实战
• javascript dom编程艺术
• JavaScript忍者秘籍（第2版）
• JavaScript 语言精粹
• ES6 标准入门
• 深入理解 ES6
• CSS 世界
• CSS 权威指南
• CSS揭秘
• Web性能权威指南
• 图解HTTP
• 学习 JavaScript 数据结构与算法

其他

• if 我是前端团队 Leader，怎么制定前端协作规范
• 996 前端人该如何持续学习
• 程序员如何自我学习和成长？
• 程序员该怎么保护眼睛视力？
• 程序员怎么保护颈椎，腰椎？
• 程序员需要什么样的椅子？
• 程序员下班晚应该怎么锻炼身体？
• 单身程序员如何找对象？
• 程序员如何与HR谈薪资?

学习路线图

最后

我是觉非，花了几天时间，整理了这份资料，如果觉得对你有所帮助的话，请给我点个赞吧