同学们都知道，前端圈变得越来越卷了，各种技术层出不穷，简直让人应接不暇。可能很多跟我一样，一时间，看到这个也想学，看到那个也想学，最终的结果是什么？那就是：啥都没学！
所以笔者花费了几天时间，整理了一下前端必读文章，同时也可以当作是一份知识图谱，用来查漏补缺。
本资料适宜人群：
- 希望按部就班的、系统的学习前端知识的（初级->中级->高级）；
- 希望对自己的知识图谱进行查漏补缺的；
- 希望当作面试手册进行知识复盘的；
本文主要是笔者查阅了很多资料并结合自己的理解，整理而成的，请大家积极讨论、批评、补充。
在此鸣谢各位写出以下优秀资料的作者，是你们，带动了整个社区的发展。
HTML
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详解与运用
性能优化
图像
- Canvas教程
- three.js动画教程
- canvas动画时钟
- 怎样用JavaScript和HTML5 Canvas绘制图表
- canvas图表详解系列：柱状图
- 自己动手绘制一个折线图控件ChartView
- Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例
- 14个最好的 JavaScript 数据可视化库
- 我对web前端与可视化的一些思考
浏览器
- 前端开发的你应该知道的浏览器知识
- 前端存贮全家桶--cookie、sessionStorage、localStorage、和indexedDB重点合集
- 一文搞懂V8引擎的垃圾回收
- 彻底理解浏览器的缓存机制
- Chrome 浏览器架构
- 浏览器的工作原理：新式网络浏览器幕后揭秘
- 浏览器的渲染：过程与原理
- 如何处理浏览器的断网情况？
- 11道浏览器原理面试题
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的开发经历（持续更新）
设计模式
Git
书籍
- 你不知道的javascript 上中下
- JavaScript 高级程序设计 第四版
- JavaScript 设计模式与开发实战
- javascript dom编程艺术
- JavaScript忍者秘籍（第2版）
- JavaScript 语言精粹
- ES6 标准入门
- 深入理解 ES6
- CSS 世界
- CSS 权威指南
- CSS揭秘
- Web性能权威指南
- 图解HTTP
- 学习 JavaScript 数据结构与算法
其他
- if 我是前端团队 Leader，怎么制定前端协作规范
- 996 前端人该如何持续学习
- 程序员如何自我学习和成长？
- 程序员该怎么保护眼睛视力？
- 程序员怎么保护颈椎，腰椎？
- 程序员需要什么样的椅子？
- 程序员下班晚应该怎么锻炼身体？
- 单身程序员如何找对象？
- 程序员如何与HR谈薪资?
学习路线图
最后
我是觉非，花了几天时间，整理了这份资料，如果觉得对你有所帮助的话，请给我点个赞吧😄
