前言
之前写过一篇 一年半经验如何准备阿里巴巴前端面试，给大家分享了一个面试复习导图，有很多朋友说希望能够针对每个 case 提供一个参考答案。
写答案就算了，一是精力有限，二是我觉得大家还是需要自己理解总结会比较好。
给大家整理了一下每个 case 一些还算不错的文章吧（还包括一些躺在我收藏夹里的好文章），大家可以自己看文章总结一下答案，这样也会理解更深刻。
“我自己是一名从事了8年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2020年自学的web前端全套培训教程（视频+笔记+素材+源码+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴（总共约85G），这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“2020”即可领取）。
并不是所有文章都需要看，希望是一个抛砖引玉的作用，大家也可以锻炼一下自己寻找有效资料的能力 ~
( 文章排序不分前后，随机排序 ~
建议收藏文章，结合复习导图食用，效果更佳。
完整复习导图全展开太大了，可关注公众号「前端试炼」回复【面试】获取。
1. JavaScript 基础
1.1 执行上下文/作用域链/闭包
理解 JavaScript 中的执行上下文和执行栈JavaScript深入之执行上下文栈一道js面试题引发的思考JavaScript深入之词法作用域和动态作用域JavaScript深入之作用域链发现 JavaScript 中闭包的强大威力JavaScript闭包的底层运行机制我从来不理解JavaScript闭包，直到有人这样向我解释它...破解前端面试（80% 应聘者不及格系列）：从闭包说起
1.2 this/call/apply/bind
JavaScript基础心法——thisJavaScript深入之从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 JavaScriptJavaScript深入之创建对象的多种方式以及优缺点详解JS原型链与继承从__proto__和prototype来深入理解JS对象和原型链代码复用模式JavaScript 中的继承：ES3、ES5 和 ES6
1.4 Promise
100 行代码实现 Promises/A+ 规范你好，JavaScript异步编程---- 理解JavaScript异步的美妙Promise不会？？看这里！！！史上最通俗易懂的Promise！！！一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promisePromise实现原理（附源码）当 async/await 遇上 forEachPromise 必知必会（十道题）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 schedulesHow JavaScript works从event loop规范探究javaScript异步及浏览器更新渲染时机这一次，彻底弄懂 JavaScript 执行机制【THE LAST TIME】彻底吃透 JavaScript 执行机制一次弄懂Event Loop（彻底解决此类面试问题）浏览器与Node的事件循环(Event Loop)有何区别?深入理解 JavaScript Event LoopThe 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 JavascriptWhat is Functional Programming?简明 JavaScript 函数式编程——入门篇You Should Learn Functional ProgrammingJavaScript 函数式编程到底是个啥JavaScript-函数式编程
1.8 Service Worker / PWA
Service Worker：简介JavaScript 是如何工作的：Service Worker 的生命周期及使用场景借助Service Worker和cacheStorage缓存及离线开发PWA Lavas 文档PWA 学习手册面试官：请你实现一个PWA
1.9 Web Worker
浅谈HTML5 Web WorkerJavaScript 中的多线程 -- Web WorkerJavaScript 性能利器 —— Web WorkerA Simple Introduction to Web Workers in JavaScriptSpeedy 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 | MDNposition | 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. Less2019年，你是否可以抛弃 CSS 预处理器？浅谈 CSS 预处理器（一）：为什么要使用预处理器？浏览器将rem转成px时有精度误差怎么办？Fighting the Space Between Inline Block Elements
3. 框架(Vue 为主)
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、MobX10行代码看尽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 arraysDeep dive: How do React hooks really work?【React深入】从Mixin到HOC再到HookReact Hooks 详解 【近 1W 字】+ 项目实战30分钟精通React今年最劲爆的新特性——React HooksReact Hooks 详解（一）
3.10 React Hoc/Vue mixin
探索Vue高阶组件React 高阶组件(HOC)入门指南深入理解 React 高阶组件
3.11 Vue 和 React 有什么不同
从思想、生态、语法、数据、通信、diff等角度自己总结一下吧。
4. 工程化
4.1 Webpack
前端工程师都得掌握的 webpack Loaderwebpack loader 从上手到理解系列：vue-loaderwebpack loader 从上手到理解系列：style-loader一文掌握Webpack编译流程手把手教你撸一个简易的 webpack带你走进webpack世界，成为webpack头号玩家。关于webpack4的14个知识点,童叟无欺手把手教你撸一个 Webpack Loaderwebpack 如何通过作用域分析消除无用代码【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 linesUnderstanding JavaScript Micro-Templating
4.4 前端发布
大公司里怎样开发和部署前端代码？前端高级进阶：前端部署的发展历程
4.5 weex
深入了解 WeexWeex原理概述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 splittingwebpack 4: Code Splitting和chunks切分优化Webpack 大法之 Code SplittingBetter tree shaking with deep scope analysisFront-End Performance Checklist 2020（译）2019年前端性能优化清单 — 上篇
5.2 其它优化
网站性能优化实战——从12.67s到1.06s的故事浏览器页面资源加载过程与优化聊聊前端开发中的长列表再谈前端虚拟列表的实现浅说虚拟列表的实现原理浏览器IMG图片原生懒加载loading=”lazy”实践指南用 preload 预加载页面资源App内网页启动加速实践：静态资源预加载视角腾讯HTTPS性能优化实践Preload, Prefetch And Priorities in ChromeFront-End Performance Checklist图片与视频懒加载的详细指南使用 Intersection Observer 来懒加载图片
6. TypeScript
TypeScript 是什么为什么要在javascript中进行静态类型检查TypeScript Start: 基础类型TypeScript真香系列——接口篇TypeScript 中高级应用与最佳实践typescript 高级技巧可能是你需要的 React + TypeScript 50 条规范和经验从 JavaScript 到 TypeScriptTypeScript + 大型项目实战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 PushHTTP2基本概念学习笔记
7.3 DNS
写给前端工程师的DNS基础知识前端优化: DNS预解析提升页面速度DNS解析
7.4 TCP
通俗大白话来理解TCP协议的三次握手和四次分手就是要你懂 TCPTCP协议详解面试时，你被问到过 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 — IILeetCode ListJS中的算法与数据结构——链表(Linked-list)前端笔试&面试爬坑系列---算法漫画：什么是红黑树？前端你应该了解的数据结构与算法数据结构和算法在前端领域的应用（前菜）数据结构与算法在前端领域的应用 - 第二篇JavaScript 数据结构与算法之美
10. 安全
前端安全系列（一）：如何防止XSS攻击？前端安全系列（二）：如何防止CSRF攻击？Security前端也需要了解的 JSONP 安全【面试篇】寒冬求职之你必须要懂的Web安全谈谈对 Web 安全的理解程序员必须要了解的web安全可信前端之路：代码保护前端如何给 JavaScript 加密（不是混淆）？常见 Web 安全攻防总结
11. Node
一篇文章构建你的 NodeJS 知识体系真-Node多线程浏览器与Node的事件循环(Event Loop)有何区别?聊聊 Node.js RPCUnderstanding 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 设计模式你不知道的 JavaScriptJavaScript 语言精粹高性能 JavaScriptLearning TypeScript 中文版深入理解 ES6ES6 标准入门深入理解 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 技术内幕（讲浏览器的，挺好的）重构：改善既有代码的涉及码农翻身程序员思维修炼编码：隐匿在计算机软硬件背后的语言写给大家看的设计书技术之瞳：阿里巴巴技术笔试心得
结束语
上文整理了网上的一些相关文章和躺在我收藏夹里精选文章，有一些文章还没看，还需要持续学习呀 ~
放弃了假期快落的岛上生活（动森），吐血整理这份资料，希望对大家有所帮助~
