2022-03-16

建议收藏文章，结合复习导图使用，效果更佳。

1. JavaScript 基础

1.1 执行上下文/作用域链/闭包

理解 JavaScript 中的执行上下文和执行栈
JavaScript深入之执行上下文栈
一道js面试题引发的思考
JavaScript深入之词法作用域和动态作用域
JavaScript深入之作用域链
发现 JavaScript 中闭包的强大威力
JavaScript闭包的底层运行机制
我从来不理解JavaScript闭包，直到有人这样向我解释它...
破解前端面试（80% 应聘者不及格系列）：从闭包说起

1.2 this/call/apply/bind

JavaScript基础心法——this
JavaScript深入之从ECMAScript规范解读this
前端基础进阶（七）：全方位解读this
面试官问：JS的this指向
JavaScript深入之call和apply的模拟实现
JavaScript基础心法—— call apply bind
面试官问：能否模拟实现JS的call和apply方法
回味JS基础:call apply 与 bind
面试官问：能否模拟实现JS的bind方法
不用call和apply方法模拟实现ES5的bind方法

1.3 原型/继承

深入理解 JavaScript 原型
【THE LAST TIME】一文吃透所有JS原型相关知识点
重新认识构造函数、原型和原型链
JavaScript深入之从原型到原型链
最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）
最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二）
最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三）
JavaScript 引擎基础：原型优化
Prototypes in JavaScript
JavaScript深入之创建对象的多种方式以及优缺点
详解JS原型链与继承
从proto和prototype来深入理解JS对象和原型链
代码复用模式
JavaScript 中的继承：ES3、ES5 和 ES6

1.4 Promise

100 行代码实现 Promises/A+ 规范
你好，JavaScript异步编程---- 理解JavaScript异步的美妙
Promise不会？？看这里！！！史上最通俗易懂的Promise！！！
一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise
Promise实现原理（附源码）
当 async/await 遇上 forEach
Promise 必知必会（十道题）
BAT前端经典面试问题：史上最最最详细的手写Promise教程

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

// 相当于
async function async1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(() => {
      console.log('async1 end');
  })
}

1.5 深浅拷贝

JavaScript基础心法——深浅拷贝
深拷贝的终极探索（90%的人都不知道）
JavaScript专题之深浅拷贝
javaScript中浅拷贝和深拷贝的实现
深入剖析 JavaScript 的深复制
「JavaScript」带你彻底搞清楚深拷贝、浅拷贝和循环引用
面试题之如何实现一个深拷贝

1.6 事件机制/Event Loop

Tasks, microtasks, queues and schedules
How JavaScript works
从event loop规范探究javaScript异步及浏览器更新渲染时机
这一次，彻底弄懂 JavaScript 执行机制
【THE LAST TIME】彻底吃透 JavaScript 执行机制
一次弄懂Event Loop（彻底解决此类面试问题）
浏览器与Node的事件循环(Event Loop)有何区别?
深入理解 JavaScript Event Loop
The Node.js Event Loop, Timers, and process.nextTick()

这个知识点真的是重在理解，一定要理解彻底

for (const macroTask of macroTaskQueue) {
  handleMacroTask();

  for (const microTask of microTaskQueue) {
    handleMicroTask(microTask);
  }
}

1.7 函数式编程

函数式编程指北
JavaScript专题之函数柯里化
Understanding Functional Programming in Javascript
What is Functional Programming?
简明 JavaScript 函数式编程——入门篇
You Should Learn Functional Programming
JavaScript 函数式编程到底是个啥
JavaScript-函数式编程

1.8 Service Worker / PWA

Service Worker：简介
JavaScript 是如何工作的：Service Worker 的生命周期及使用场景
借助Service Worker和cacheStorage缓存及离线开发
PWA Lavas 文档
PWA 学习手册
面试官：请你实现一个PWA

1.9 Web Worker

浅谈HTML5 Web Worker
JavaScript 中的多线程 -- Web Worker
JavaScript 性能利器 —— Web Worker
A Simple Introduction to Web Workers in JavaScript
Speedy Introduction to Web Workers

1.10 常用方法

太多了... 总的来说就是 API 一定要熟悉...

近一万字的ES6语法知识点补充
ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)
解锁多种JavaScript数组去重姿势
Here’s how you can make better use of JavaScript arrays
一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧
1.5万字概括ES6全部特性(已更新ES2020)

2. CSS 基础

[图片上传失败...(image-a32f6e-1647411705002)]

position - CSS: Cascading Style Sheets | MDN
position | CSS Tricks
杀了个回马枪，还是说说position:sticky吧
30 分钟学会 Flex 布局
css行高line-height的一些深入理解及应用
A Complete Guide to Flexbox
写给自己看的display: flex布局教程
从网易与淘宝的font-size思考前端设计稿与工作流
细说移动端经典的REM布局与新秀VW布局
移动端1px解决方案
Retina屏的移动设备如何实现真正1px的线？
CSS retina hairline, the easy way.
浏览器的回流与重绘 (Reflow & Repaint)
回流与重绘：CSS性能让JavaScript变慢？
CSS实现水平垂直居中的1010种方式（史上最全）
干货!各种常见布局实现
CSS 常见布局方式
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
深入理解CSS中的层叠上下文和层叠顺序
Sass vs. Less
2019年，你是否可以抛弃 CSS 预处理器？
浅谈 CSS 预处理器（一）：为什么要使用预处理器？
浏览器将rem转成px时有精度误差怎么办？
Fighting the Space Between Inline Block Elements

3. 框架(Vue 为主)

[图片上传失败...(image-e2cdd5-1647411705002)]

3.1 MVVM

50行代码的MVVM，感受闭包的艺术
不好意思！耽误你的十分钟，让MVVM原理还给你
基于Vue实现一个简易MVVM
剖析Vue实现原理 - 如何实现双向绑定mvvm

3.2 生命周期

Vue 生命周期源码剖析
你真的理解$nextTick么
React 源码剖析系列－生命周期的管理艺术

3.3 数据绑定

Vue 深入响应式原理
面试官: 实现双向绑定Proxy比defineproperty优劣如何?
为什么Vue3.0不再使用defineProperty实现数据监听？

3.4 状态管理

Vuex、Flux、Redux、Redux-saga、Dva、MobX
10行代码看尽redux实现
Mobx 思想的实现原理，及与 Redux 对比
使用原生 JavaScript 构建状态管理系统

3.5 组件通信

vue中8种组件通信方式, 值得收藏!
Vue 组件间通信六种方式（完整版）
Vue组件间通信

3.6 Virtual DOM

Vue Virtual DOM 源码剖析
面试官: 你对虚拟DOM原理的理解?
让虚拟DOM和DOM-diff不再成为你的绊脚石
探索Virtual DOM的前世今生
虚拟 DOM 到底是什么？(长文建议收藏)

3.7 Diff

详解vue的diff算法
Deep In React 之详谈 React 16 Diff 策略(二)
React 源码剖析系列－不可思议的 react diff
浅入浅出图解 Dom Diff

3.8 Vue 计算属性 VS 侦听属性

Vue 计算属性 VS 侦听属性源码剖析
Vue.js的computed和watch是如何工作的？

3.9 React Hooks

React Hooks 原理
React hooks: not magic, just arrays
Deep dive: How do React hooks really work?
【React深入】从Mixin到HOC再到Hook
React Hooks 详解【近 1W 字】+ 项目实战
30分钟精通React今年最劲爆的新特性——React Hooks
React Hooks 详解（一）

3.10 React Hoc/Vue mixin

探索Vue高阶组件
React 高阶组件(HOC)入门指南
深入理解 React 高阶组件

3.11 Vue 和 React 有什么不同

从思想、生态、语法、数据、通信、diff等角度自己总结一下吧。

4. 工程化

[图片上传失败...(image-30a9e4-1647411705002)]

4.1 Webpack

前端工程师都得掌握的 webpack Loader
webpack loader 从上手到理解系列：vue-loader
webpack loader 从上手到理解系列：style-loader
一文掌握Webpack编译流程
手把手教你撸一个简易的 webpack
带你走进webpack世界，成为webpack头号玩家。
关于webpack4的14个知识点,童叟无欺
手把手教你撸一个 Webpack Loader
webpack 如何通过作用域分析消除无用代码
【webpack进阶】你真的掌握了loader么？- loader十问
Webpack小书
聊一聊webpack-dev-server和其中socket，HMR的实现
使用webpack4提升180%编译速度
Webpack 大法之 Code Splitting
轻松理解webpack热更新原理
轻松理解webpack热更新原理
揭秘webpack plugin

4.2 Babel

一篇文章了解前端开发必须懂的 Babel
不容错过的 Babel7 知识
前端工程师需要了解的 Babel 知识
深入浅出 Babel 上篇：架构和原理 + 实战
深入浅出 Babel 下篇：既生 Plugin 何生 Macros
前端工程师的自我修养-关于 Babel 那些事儿
前端与编译原理——用JS写一个JS解释器

4.3 模板引擎

编写一个简单的JavaScript模板引擎
JavaScript模板引擎原理，几行代码的事儿
Vue 模板编译原理
JavaScript template engine in just 20 lines
Understanding JavaScript Micro-Templating

4.4 前端发布

大公司里怎样开发和部署前端代码？
前端高级进阶：前端部署的发展历程

4.5 weex

深入了解 Weex
Weex原理概述
Weex 是如何在 iOS 客户端上跑起来的
详解 Weex 页面的渲染过程
JSBridge 介绍及实现原理
移动混合开发中的 JSBridge

4.6 前端监控

5 分钟撸一个前端性能监控工具
把前端监控做到极致
GMTC 大前端时代前端监控的最佳实践
前端监控和前端埋点方案设计
腾讯CDC团队：前端异常监控解决方案

5. 性能优化

[图片上传失败...(image-1775dd-1647411705002)]

5.1 打包阶段

Webpack优化——将你的构建效率提速翻倍
性能优化篇---Webpack构建速度优化
webpack构建速度与结果优化
让你的Webpack起飞—考拉会员后台Webpack优化实战
webpack dllPlugin打包体积和速度优化
使用webpack4提升180%编译速度
Webpack 打包优化之速度篇
多进程并行压缩代码
Tree-Shaking性能优化实践 - 原理篇
体积减少80%！释放webpack tree-shaking的真正潜力
你的Tree-Shaking并没什么卵用
webpack 如何通过作用域分析消除无用代码
加速Webpack-缩小文件搜索范围
Brief introduction to scope hoisting in Webpack
通过Scope Hoisting优化Webpack输出
webpack 的 scope hoisting 是什么？
webpack优化之code splitting
webpack 4: Code Splitting和chunks切分优化
Webpack 大法之 Code Splitting
Better tree shaking with deep scope analysis
Front-End Performance Checklist 2020
（译）2019年前端性能优化清单 — 上篇

5.2 其它优化

网站性能优化实战——从12.67s到1.06s的故事
浏览器页面资源加载过程与优化
聊聊前端开发中的长列表
再谈前端虚拟列表的实现
浅说虚拟列表的实现原理
浏览器IMG图片原生懒加载loading=”lazy”实践指南
用 preload 预加载页面资源
App内网页启动加速实践：静态资源预加载视角
腾讯HTTPS性能优化实践
Preload, Prefetch And Priorities in Chrome
Front-End Performance Checklist
图片与视频懒加载的详细指南
使用 Intersection Observer 来懒加载图片

6. TypeScript

[图片上传失败...(image-6a5eb2-1647411705001)]

TypeScript 是什么
为什么要在javascript中进行静态类型检查
TypeScript Start: 基础类型
TypeScript真香系列——接口篇
TypeScript 中高级应用与最佳实践
typescript 高级技巧
可能是你需要的 React + TypeScript 50 条规范和经验
从 JavaScript 到 TypeScript
TypeScript + 大型项目实战
TypeScript - 一种思维方式
如何编写一个d.ts文件
TypeScript 的声明文件的使用与编写
TypeScript 进阶：给第三方库编写声明文件
TypeScript泛型
TypeScript 重构 Axios 经验分享
手把手教写 TypeScript Transformer Plugin

7. 网络

[图片上传失败...(image-cb6b8c-1647411705001)]

7.1 HTTP

听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？
前端基础篇之HTTP协议
都9102年了，还问GET和POST的区别
HTTP 响应代码 | MDN
如何理解HTTP响应的状态码？
你所知道的3xx状态码
关于浏览器缓存你知道多少
浏览器缓存
HTTP协议头部与Keep-Alive模式详解
HTTP keep-alive 二三事

7.2 HTTPS/HTTP2

深入理解HTTPS工作原理
九个问题从入门到熟悉HTTPS
谈谈 HTTPS
看图学HTTPS
分分钟让你理解HTTPS
解密HTTP/2与HTTP/3 的新特性
浅谈 HTTP/2 Server Push
HTTP2基本概念学习笔记

7.3 DNS

写给前端工程师的DNS基础知识
前端优化: DNS预解析提升页面速度
DNS解析

7.4 TCP

通俗大白话来理解TCP协议的三次握手和四次分手
就是要你懂 TCP
TCP协议详解
面试时，你被问到过 TCP/IP 协议吗?
“三次握手，四次挥手”你真的懂吗？

7.5 CDN

五分钟了解CDN
漫话：如何给女朋友解释什么是CDN？
关于 cdn、回源等问题一网打尽
CDN是什么？使用CDN有什么优势？

7.6 经典题

从输入URL到页面展示，这中间发生了什么？
前端经典面试题: 从输入URL到页面加载发生了什么？

8. 设计模式

[图片上传失败...(image-8e09c9-1647411705001)]

Javascript常用的设计模式详解
JavaScript设计模式
JavaScript 中常见设计模式整理
JavaScript 常见设计模式解析
深入 JavaScript 设计模式，从此有了优化代码的理论依据
设计模式之美-前端

9. 数据结构/算法

[图片上传失败...(image-31d9e7-1647411705001)]

Linked Lists in JavaScript (ES6 code)
DS with JS — Linked Lists — II
LeetCode List
JS中的算法与数据结构——链表(Linked-list)
前端笔试&面试爬坑系列---算法
漫画：什么是红黑树？
前端你应该了解的数据结构与算法
数据结构和算法在前端领域的应用（前菜）
数据结构与算法在前端领域的应用 - 第二篇
JavaScript 数据结构与算法之美

10. 安全

[图片上传失败...(image-13d52a-1647411705001)]

前端安全系列（一）：如何防止XSS攻击？
前端安全系列（二）：如何防止CSRF攻击？
Security
前端也需要了解的 JSONP 安全
【面试篇】寒冬求职之你必须要懂的Web安全
谈谈对 Web 安全的理解
程序员必须要了解的web安全
可信前端之路：代码保护
前端如何给 JavaScript 加密（不是混淆）？
常见 Web 安全攻防总结

11. Node

一篇文章构建你的 NodeJS 知识体系
真-Node多线程
浏览器与Node的事件循环(Event Loop)有何区别?
聊聊 Node.js RPC
Understanding Streams in Node.js
深入理解 Node.js 进程与线程
如何通过饿了么 Node.js 面试
字节跳动面试官：请你实现一个大文件上传和断点续传

12. 项目/业务

思考题，自由发挥

13. 其它

深入浅出浏览器渲染原理
前端开发如何独立解决跨域问题
探索 Serverless 中的前端开发模式
「NGW」前端新技术赛场：Serverless SSR 技术内幕
JavaScript与Unicode
九种跨域方式实现原理（完整版）
7分钟理解JS的节流、防抖及使用场景
浏览器的工作原理：新式网络浏览器幕后揭秘
Different Types Of Observers Supported By Modern Browsers
浏览器同源策略与ajax跨域方法汇总

14. 面试

一年半经验如何准备阿里巴巴 P6 前端面试
面试分享：两年工作经验成功面试阿里P6总结
总结了17年初到18年初百场前端面试的面试经验(含答案)
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
20道JS原理题助你面试一臂之力！
一年半经验，百度、有赞、阿里前端面试总结
22 道高频 JavaScript 手写面试题及答案
面试分享：专科半年经验面试阿里前端P6+总结(附面试真题及答案)
写给女朋友的中级前端面试秘籍
阿里前端攻城狮们写了一份前端面试题答案，请查收
字节跳动今日头条前端面经（4轮技术面+hr面）
「面试题」20+Vue面试题整理(持续更新)
「吐血整理」再来一打Webpack面试题(持续更新)
高级前端开发者必会的34道Vue面试题系列

15. 书单

推荐一些值得看的书，基本都是我看完或者有翻过几页觉得不错但是还没时间看的书。

15.1 JavaScript

JavaScript 高级程序设计（高程就不多说了，第四版有英文版）
JavaScript 设计模式
你不知道的 JavaScript
JavaScript 语言精粹
高性能 JavaScript
Learning TypeScript 中文版
深入理解 ES6
ES6 标准入门
深入理解 JavaScript 特性

15.2 CSS

CSS 权威指南（建议看英文版）
精通 CSS 高级 Web 标准解决方案
CSS 世界（张鑫旭老师的大作，但是建议需要有一定 CSS 实践后再看）

15.3 Node

Node.js 实战
了不起的 Node.js

15.4 计算机基础

大话数据结构
图解 HTTP
计算机/程序是怎样跑起来的
学习 JavaScript 数据结构与算法

15.5 工程化/浏览器/软技能

前端工程化体系设计与实践
webpack 实战：入门、进阶与优化（了解一下 webpack 的所有会涉及到的知识点）
WebKit 技术内幕（讲浏览器的，挺好的）
重构：改善既有代码的涉及
码农翻身
程序员思维修炼
编码：隐匿在计算机软硬件背后的语言
写给大家看的设计书
技术之瞳：阿里巴巴技术笔试心得