# 「必读」2021前端必读文章爆肝整理
本资料适宜人群:
- 希望按部就班的、系统的学习前端知识的(初级->中级->高级);
- 希望对自己的知识图谱进行查漏补缺的;
- 希望当作面试手册进行知识复盘的;
在此鸣谢各位写出以下优秀资料的作者,是你们,带动了整个社区的发展。
# 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谈薪资?
# 学习路线图
# 最后
加油吧,骚年。