2020年前端知识复习必读文章

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-函数式编程

• 优雅代码之巧用 Ramda

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 基础

• 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 为主)

3.1 MVVM

• 50行代码的MVVM，感受闭包的艺术

• 不好意思！耽误你的十分钟，让MVVM原理还给你

• 基于Vue实现一个简易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 到底是什么？(长文建议收藏)

• 面试官问: 如何理解Virtual 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. 工程化

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. 性能优化

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

• 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. 网络

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. 设计模式

• Javascript常用的设计模式详解

• JavaScript设计模式

• JavaScript 中常见设计模式整理

• JavaScript 常见设计模式解析

• 深入 JavaScript 设计模式，从此有了优化代码的理论依据

• 设计模式之美-前端

9. 数据结构/算法

• Linked Lists in JavaScript (ES6 code)

• DS with JS — Linked Lists — II

• LeetCode List

• JS中的算法与数据结构——链表(Linked-list)

• 前端笔试&面试爬坑系列---算法

• 漫画：什么是红黑树？

• 前端你应该了解的数据结构与算法

• 数据结构和算法在前端领域的应用（前菜）

• 数据结构与算法在前端领域的应用 - 第二篇

• JavaScript 数据结构与算法之美

10. 安全

• 前端安全系列（一）：如何防止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 技术内幕（讲浏览器的，挺好的）

• 重构：改善既有代码的涉及

• 码农翻身

• 程序员思维修炼

• 编码：隐匿在计算机软硬件背后的语言

• 写给大家看的设计书

• 技术之瞳：阿里巴巴技术笔试心得