之前写过一篇 一年半阅历怎样准备阿里巴巴前端面试，给咱们同享了一个面试温习导图，有许多朋友说希望可以针对每个 case 提供一个参考答案。

写答案就算了，一是「精力有限」，二是我觉得咱们D T 4 o仍是需求自6 U H ( A己k J q g J i 6「了解总结会比较好」。

给咱们拾掇了一? 6 G P 1下每个 case 一些还算不错的文章吧（还包含一些躺在我保藏夹里的好文章），咱们可以自己看文章总结一下答案，这样也会了解更深刻。

「并不是悉数文章都需求看」，希望是一个抛砖引玉的作用，咱们也可以训练一下自己寻找有用材料的才能 ~

( 文章排c ` J }序不分前后，随机排序 ~

建议保藏文章，结合温习导图食用，作用更佳。

无缺温习导图全展开太大了，可重视群众号「「前端试炼」」回复【面试】获取。

1. JavB ] b S l : P ] }aScript 基础

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

• 了解 JavaScript 中的实行上下文和p b E k 1 ( A d X实行栈
• JavaScript深) J ( g u & ) 3化之实行上下文栈
• 一) A X Q & 4 d z道js面试题引发的考虑
• JavaScript深化之词法作用域和动态作用域
• JavaScrip? i &t深化之作用域链
• 发现 JavaScript 中闭包的强大威力
• JavaScript闭包的底层运行机制
• 我从来不r w | 4 e f H – 了解Jas . fvaScript闭包，直到有人这样向我说明它…
• 破解x + N前端面试（80% 应聘者不及格系列）：从闭包说起

1.2 this/h P } L v =call/apply/bind

• JavaScript基础心法——this
• JavaScript深化之从ECMAScript规范解读this
• 前端基础进阶（七）：全方位解读t/ y & % c Ihis
• 面试官问：JS的this指向
• JavaScript深化之call和apply的仿照完结
• JavaScript基础心法—— call apply bind
• 面试官问：能否仿照完结JS的call和apply方法
• 回味JS基础:call apply 与 bind
• 面试官问：能否仿照完结JS的bind方法
• 不必call和applyT Y = l k e ~ E C方法仿照完结ES5的bind方法

1.3 原型/承继

• 深| ; | a q化了解 JavaScript 原型
• 【THE LAST TIME】一文吃透悉数JS原型相关常识点
• 重新认识结构函数、原型和原型链
• JavaScript深化之从原型到原型链
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二）
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三）
• JavaScript 引擎基础：原型优化
• Prototypes in JavaScript
• JavaScript深化之创立方针的多种方法以及优缺点
• 详解JS原型链与承继
• 从__proto__和prototype来深7 g K . , L化了解JS方针和原型链
• 代码复用方式y 9 d 1 / O a
• Jav) F . D (aScript 中的承继：ES3、ES5 和 ES6

1.4 Promise

• 100 行代码完结 Promise% w % 2s/A+ 规范
• 你好，JavaScript异步编程—- 了解JavaScript异步的夸姣
• PromiseO t 8 5 0 n /不会？？看这儿！！！史上最深入浅出的Promise！！！
• 一同学习造轮子（一）：从零开始写一个契合Promises/A+规范的promise
• Promise完结原理（附源码）
• 当 async/await 遇上 forEach
• PG Q u n J m m , 0romise 必知必会（十道题）
• BAT前端经典面试问题：史上最& A r / e [ b 1 m最最详细的手写Promise教程

asyncfunctionasync1(){
console.log('F Y Dasync1star[ } W [ b t K /t');
awaitasync2();
console.log('asy? w # Q @ ?nc1end');
}

//Q R Z v ` _ 1相当于
asyncfunctioh 8 8 ] i U t Lnasync1(){
console.log('async1start')1 l y d s M;& / Y / [ `
Promise.resolve(async2()).then(()=>{
console.log('async1end');
})
}

1.5 深浅仿制

• JavaScE 4 / a # L –ript基础心法——深浅仿制
• 深仿制的终极探求（90%的人都不知道）
• JavaScrig V @ k 8 ]pt专题之深浅仿制
• javaScript中浅仿制和深仿制的完结
• 深化剖析 JavaScript 的深仿制
• 「JavaScript」带你彻底搞清楚深仿制、浅仿制和循环引证
• 面试题之怎样完结一个深仿制

1.6 工作机制/Event Loop

• Tasks, microtasks, queues and sch& X 3 G i A Aedules
• How JavaScript works
• 从event loop规范探求javaScript异步及阅读器更新烘托机会
• 这一次，彻底弄懂 JavaScr( @ P W ` d f ,ipt 实行机制
• 【THE LAST TIME】彻底吃透 JavaScript 实行机制
• 一次弄懂EventM . O G Loop（彻底处理此类面试问题）
• 阅读器与Node的工作循环(Event Looa P n hp)有何差异?
• 深化了解 JavaScript Event Loop
• The Node.js Event Loop, Timers, and process.nextTick()

这个常识点真的是重在了解，必定要了解彻底

for(constmacroTaskofmacroTaskQueue){
handleMacroTh E - B Nask();

fy t ] ) 0or(constmicr_ L 4 * E ] V :oTaskofmicroTaskQueue){
handleMicroTask(microTask);
}
}

1.I | W M 4 G Q g y7 函数式编程

• 函数式编程指北
• JavaScript专题之函数柯里化
• Understanding Functional Programming in Javascript
• What is5 ^ U Functional ProgrammingQ H h /?
• 简明 JavaScript 函数式编程——入门篇
• You Should Learn Functional Programming
• JavaScript 函数式编程终究是个啥
• JavaScript-函数式编程

1r . 9 f v w 2 8.8 Service Worker / PWA

• Service Worker：简介
• JavaScript 是怎样作业的：Service Worker 的生命周期及运用场景
• 借助Service Worker和cacheStorage缓存及离线开发d A | o K T S
• PWA Lavas 文档
• PWA 学习手册
• 面试官：请你完结一个PWA

1.9 Web Worker

• 浅谈HTML5 Web Worker
• JavaScript 中的多线程 — Web Worker
• JavaScript 功用利器 —— Web Worker
• A Simple IntrI _ s ;oduction to Web Workerx G ; U u 4 6 Ls in JavaScript
• Speedy Introduction to Web Workers

1.10 常用方法

太多了… 总的来说就是 API 必定要了解…

• 近一万字的ES6语法常识点补充
• ES6、ES7、ES8特性一锅炖(ES6、ESP j @ # I V7、ES8学习攻略)
• 解锁多种JavaScript数组去重姿态
• Here’s how you canL I 5 A _ + make better use of JavaScript arrays
• 一个合格的中级s k s B前端工程师需求掌握的 28 个 JavaScript 技巧
• 1.5万字概括ES6悉数特性(已更新ES202P F C 4 | )0)

2. CSS 基础

• positionA S m R ] ! 0 * A – CSS: Cascading Style Sheets | MDN
• position | CS| 6 2 m S r FS Tricks
• 杀了/ 2 I v , 3 R ,个回马枪，仍是说说position:stickyP & 7 g * ? S吧
• 30 分钟学会 Flex 布局
• css行高line-` b v Dheight的一些深化了解及运用
• At 6 h a Complete Guide to Flexbox
• 写给自己看的display: flex布局教程
• 从网易与淘宝的font-size考虑前端规划稿与作业流
• 细说移动端 经典的REM布局0 $ B w 与 新秀VW布局
• 移动端1px处理计划
• Retina屏的移动设备怎样完结真实1px的线？
• CSS retina haf K q Q ) ( iirA E ` ^ Yline, the easy way.
• 阅读器的回流与重绘 (Reflow & Rt ( h R A 1epaint)
• 回流与重绘：CSS功用让JavaScript变慢？
• CSS0 l T r x } Y完结水平垂直居中的1010种方法（史上最全）
• 干货!各种常见布局完结
• CSS 常见布局方法
• 彻底搞懂CSS层叠上下文、层叠等级、层叠次第、z-index
• 深化了p ] P T 9解CSS中的层叠上下文和层叠次第
• Sass vs. Less
• 2019年，你是否可以丢掉 CSS 预处理器？
• 浅谈 CSN [ R RS 预处理器（一）：为什么要运用预处理器？
• 阅读器将rem转成px时有精度过失怎样办？
• Fi) r a ,ghting the Space Between Inline Block Elements

3. 框架(Vue 为主)

3.1 MVVM

• 50行代码的MVVM，感受闭包的艺术
• 不好意思！耽误你的十^ ! M R 5 v |分钟，让MVVM原理还给你
• 根据Vue完结一个简易MVVM
• 剖析Vue完结原理 – 怎样完结双向绑定mvvm

3.2 生命周期

• Vue 生命周期源码剖析
• 你真的了解$nt m ? U ^ K – ?extTick么
• React 源码剖析系列 － 生命周期的处理艺术

3.3 数据绑定

• Vue 深; 5 a t 8 v化照应式原理
• 面试官: 完结双向; ? # ~ J ) 7 k v绑定Proxy比defineproperty好坏怎样?
• 为什么Vue3.– 4 !0不再运用defineProperty完结数据监听？

3.4 情况处理

• VD / z K )uex) } | d ` h、Flux、Redux、Redux-s{ 0 B Z [ %aga、Dva、MobX
• 10行代码看尽redux完结
• Mobx 思维的完结原理，及与 Redux 对比
• 运用原生 JavaScript 构建情况处理体系

3.5 组件通讯

• vue中8/ / f g & G h s种组件通讯方法, 值得保藏!
• Vue 组件间通讯六种方法（无缺版）
• Vue组件间通讯

3.6 VirtuZ A –al DOM

• VM j z 0 mue Virtual DOM 源码剖析
• 面试官: 你对虚拟DOM原理的了解?
• 让虚拟DOM和T n g W 0DOM-diff不再成为你的绊脚石
• 探求Virtual DOM的前世此生
• 虚拟 DOM 终究是什么？(长文建议保藏)

3.7 Diff

• 详解vue的diff算法
• Deep In React 之详谈 React 16 Diff 战略(二)
• React 源码剖析5 C L o t W系列 － 难以想象G b R的 reac; ? e } gt diff
• 浅入浅出图解 Dom Diff

3.8 Vue 核算特色 VS 侦听特色

• Vue 核算特色 VS 侦听特色源码剖析
• Vue.js的computed和watch是怎样作业的？

3.9 React Hooks

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

3.w = 0 p * [ ^10 React Hoc/Vue mixin

• 探求Vue高阶组件
• React 高阶组件(HOC)入门攻略
• 深化了解 React 高阶组件

3.11 Vue 和 React 有什么不同

从思维、生态、语R J N m L法、数据、通讯、diff等视点自己总结一下吧。

4. 工程化

4.1 Webpack

• 前端工程师都得掌握的 webpack Loader
• webpack loader 从上手到了解系列：vue-loader
• webpack loader 从上手到了解系列：style-load2 e 4 M x f V ,er
• 一文掌握Wz , k 9 D j V rebpack编译流程
• 手把手教你撸一个简易的 webpack
• 带你走进webpack世界，成为webpaG { & *ck头号玩家。
• 关于webpack4的14个常识点,童叟无欺
• 手把手教你撸一个 Webpack Loader
• w! x Q 2 h qebpack 怎样通过作用域剖析消除无用w + h ^ b w n r代码
• 【webpack进& E C – ?阶】你真的掌握了loaY x [ 1 t Mder么？- loader十问
• Webpack小书
• 聊一聊webpack-dX ^ = g ,ev-server和其间soc. D F jket，HMR的完结
• 运K q 9 + m i o用web7 y % $pack4提高180%编译速度
• Webpack 大法之 Cods G [ | +e Splitting
• 轻松了解webpack热更新原理
• 轻松了解webpack热更新原理
• 揭秘webpack plugin

4.2 Babel

• 一篇文章了解前端开发有必要懂的 Babel
• 不容失去的 Babel7 常识
• 前端工程师需求了解的 Babel 常识
• 深化浅出 Babel 上; t c t篇：架构和原理 + 实战
• 深化浅出 Babel 下篇：既生 Plugin 何生 Macros
• 前端工Y O M z ~ r 程师的自我涵养-关于 Bh [ x habel 那些事儿
• 前端与编译原理—, w P ) 6 @ U k ]—用JS写一个JS说明器

4.3 模板引擎

• 编写一个简略的JavaScript模板引擎
• JavaScript模板引擎原理，几行代码的事儿
• Vue 模板编译原理
• JavaScript template engine in just 20 lines
• Un= ( / 0derstanding JavaScriw q B M F k rpt Micro-Templating

4.4 前端发布

• 大公司里怎样开发和安置前端代码？
• 前端高级进阶8 _ & 0 X . 0 p 7：前端安置的开展进程

4.5 weex

• 深化了解 Weex
• Weex原理概述
• Weex 是怎样在 iOS 客户端上跑起来的
• 详解 Weex 页面的烘托进程
• JSBridge 介绍及完结原理
• 移动混合开发中的 JSBridge

4.6 前端监控

• 5 分钟撸一个前端功用监控东西
• 把前端监控做到极致
• Go 3 5 `Ma c _ 2 /TC 大前端年代前端监控的最佳实践
• 前端监控和前A 9 } D = 4 ? b $端埋点计划规划
• 腾讯CDC团队：前端U E d异常监控处理计划

5. 功用优化

5.1 打包阶段

• Webpack优化——将你的构建功率+ . F Y E ( ; % T提速翻倍
• 功用优化篇—Webpack构建速度优化
• webpack构建速度与成果优化
• 让你的Webpack起飞—考拉会员后台Webpack优化实战
• weg { y ] ) z ( 8bpack dllPlugin打包体积和速度优化
• 运用webpack4` 4 6 = F : v r提高180%编译速度
• Webpack 打包优化之速度篇
• 多进程并行紧缩代码
• Tree-Shaking功用优化实践 – 原理篇
• 体积减少80%！开释webpack tree-shaking的真实潜力
• 你的Tree-| ( G dShaking并没什么卵用
• wM m |ebpack 怎样通过f j 8 Q m 4作用域剖析消除无用代码
• 加快Webpacko i V G ? ? 4 W-缩小文件查找规模
• Brief introduction to scopej m b ; j B v ! f hoisting in Webpack
• 通过Scope% 3 } p T Hoisting优化Webpack输出
• webpack 的 scope hoisting 是w S F y o $ c什么？
• webpack优W k } } X t j % w化之code spl; m d Kitti_ q g P } 5ng
• webpack= C ? j M Y / % 4: Code Splittib ` [ s w A Wng和chunks切分优化
• Wey ~ z m j : 8 s ebpack 大法之 Code Splitting
• Better tree shaking with deep scope analysis
• Front-End PerformanN K b zce Checklist 2020
• （译）2019年前端功用优化清单 — 上篇o d 0 6 L

5.2 其它优化

• 网站功用优化实战——从12.z l K67s到1.06s的故事
• 阅读器页面资源加载进程与优化
• 聊聊前端开发中的长列表
• 再谈前端虚拟列表的完结
• 浅说虚拟列表的完结原理
• 阅读器Iy 5 L PMG图片原生懒加载loading=”lazy”实a 6 7 d { e践攻略
• 用 preload 预加载页面资源
• App内网页启动加快实践：静态资源预加载视角
• 腾讯HTTPS功用优化实践
• Preload, Prefetch And Priorities in Chrome
• Front-End Performance Checklist
• 图片与f 6 + G ~ P 视频懒加载的详细攻略
• 运用 IntersecP { r I 9 8tion Observer 来懒加载图片_ : k i W

6. TypeScript

• TypeScript 是什么
• 为什么要在javasD Y R _ L R lcript中进行静态类型检查
• TypeScript Start: 基础类型
• TypeScript真香系列——接口篇
• TypeScr G N ) Rript 中高级运用与最佳实践
• typescript 高级技巧
• 可能是你需求的 React + TypeScript 50 条规范和阅历
• 从 JavaScript 到 TypeScript
• Type[ | y K 2 Y a ? }SY x u $ r .cript + 大型项目实战
• TypeSc G l Q 3 bcript – 一种思维方法
• 怎样编写一个d.ts文件
• TypeScript 的声明文件的运y G r用与编写
• TypeSc_ O : X 0 P eript 进阶：给第三方库编写声明文件
• TypeScript泛型
• TypeScri7 S # : Tpt 重构 Axios 阅历同享
• 手把手教写 TypeScript Tr% ( $ 7 J – l RansfZ ? m { t n hormer Plugin

7. 网络

7.1 HTTP

• 传闻『99% 的人都了解错了 HTTP 中 GET 与 POST 的` t { S b差异』？？
• 前端基础篇之HTTP协议
• 都9102年了，还问GET和POST的差异
• HTTP 照应代码 | MDN
• 怎样了解HTTP照应的情况码？
• 你所知道的3xx情况码
• 关于阅读器缓存你知道多少Z V A . o
• 阅读器缓存
• HTTP协议头部与Keep-Alive方式详解
• HTTP keep-alive 二三事

7.2 HTTPS/# n a 9 HTTP2

• 深化了解HTTPS作业原理
• 九个问题从入门到了解HTTPS
• 谈谈 HTTPS
• 看图t R &学o A 0 6 fHTTPS
• 分分钟让你了解HTTPS
• 解密HTTP/2与HTTP/3 的新特性
• 浅V 1 9 j $ F t l谈 HTTP/2 Server Push
• HTTP2根本概念学习笔记E ] H j – j ~ L

7.3 DNS

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

7.4 TCP

• 浅显大白话来了解TCN / 7 – , & mP协议的三次握手和四次分手
• 就是要你懂 TCP
• TCP协议详解
• 面试时Z O Z T 6 . E 3 X，你被问到过 TCP/IP 协议吗?
• “三W r } M : C g – l次握手，四次挥手”你真的懂吗？

7.5 CDN

• 五分钟了解CDN
• 漫话：怎样给女朋友说明什么是CDN？
• 关于 cdn、回源等问题一网打尽
• CDN是什么？运用CDN有什么优势？

7.6 经典题

• 从输入URL到页面展示，这中心发生了什么？
• 前端经典面试题: 从输入URL到% t W / + g页面加载发生了什么？

8. 规划方式

• Javascript常用的规划方式详解
• JavaScript规划方式
• Ja0 t 6 )vaScript 中常见规划方式拾掇
• JavaScript 常见规划方式解析W X Y i n v
• 深化 JavaScript 规划方式，从此有了优化代码的理论依据
• 规划方式之美-前端

9. 数据结构/算法

• Linked Lists in JavaScri S [ A J m b } upt (ES6 code)
• DS with JS — Linked Lists — Im B Q T | S eI
• LeetCode List
• JS中的算法与数据结构——链表(Linked-list)
• 前端笔` s u试&面试爬坑系列—算法
• 漫画：什么是红黑树？5 – x
• 前端你应该了解的数据结构与算法
• 数据结构和算法在前端范畴的运用（前菜）
• 数据结构与算法在前端范畴的运用 – 第二篇
• JavaScript 数据结构与算法之美

10. 安全

• 前端安全系列（一）h 5 T z B：怎样避免XSS侵犯？
• 前端安全系列（二）：怎样防$ j = 2 C = R y [止CSRF侵犯？
• Security
• 前端也需求了解的 JSONP 安全
• 【面试篇】隆冬求职之你有必要要懂的Web安全
• 谈谈对 Web 安全的了解
• 程序员有必要要了解的web安全
• 可信前端之路：代码维] M O [护
• 前端怎样给 JavaScript 加密（不是混杂）？
• 常见 Web 安全攻防总结

11. Node

• 一篇文章构建你的 NodeJS 常识体系
• 真-Node多线程5 / * , Y ~ ~
• 阅读器与Node的工作b * H k + Y循环(Event Loop)有何差异?
• 聊聊 Node.js RPC
• UnderstandiN u ^ &ng Streams in Node.js
• 深化了解 Node.js 进程与线程
• 怎样通过饿了么 Node.js 面试
• 字节跳动面试官：请你完结一个大文件上传和断点续传G u 6 ] 7

12. 项目/业务

考虑题，自由发挥

13. 其它

• 深化浅出阅读8 L L k z I Y s 9器烘托5 { ( 4 : f j } g原理
• 前端开发怎样独立处理跨域问题
• 探求 Serverless 中的前端开发方式
• 「NGW」前端– 8 k新技术赛场：Serverless SSR 技术底细
• JavaScript与Unicode
• 九& # 6 p f [ X :种跨域方法完结原理（无缺版）
• 7分钟了解JS的节省、防抖及运用场景
• 阅读器的作业原理：新式网络阅读器背地里揭秘
• Different Types Of Observers Supported By Modern Browsers
• 阅读器同源战略与ajax跨域方法汇总

14. 面试

• 一年半阅历怎样准备阿里n x : H y T L 4巴巴 P6 前端面试
• 面试同享：两年作业阅历成功面试阿里P6总结
• 总结了17年初到18年初百场前端面试的面试阅历(含答案)
• 2018春招前端面试& ^ B @: 闯关记(精排精校) | 6HU网技术征文
• 20道JS原理题助你面试一臂之E J B $ Q力！
• 一年半阅历，百度、有赞、阿里前端面试总结
• 22 道高频 JavaScript 手写面试题及答案
• 面试同享：R E N C专科半年阅历面试阿里前端P6+总结(附面试真题及答案)
• 写给女朋友的中级前端面试秘籍
• 阿里j N ) ~ ! = h前端攻城狮们M / G 6写了一份前端面试题T g j答案，请查收
• 字节跳动今日头条前端面经（4轮技术面+hr面）
• 「面试题」20+Vue面试z , K U 5 d u ~ H题拾掇(持续更新)
• 「吐血拾掇」再来一打Webpack面试题(持续更新)
• 高级前端开发者必会的34道Vue面试题系列

15. 书单

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

15.1 JavaScript

• JavaScript 高级程序规划（高程就不多说了，第四版有英文版）
• JavaScript 规划方式
• 你不知道的 JavaScript
• JavaScript 言语精粹
• 高功用 JavaScript
• Learning TypeScript 中文版
• 深化了解2 z S k ! h 3 T ES6
• ES6 规范入门
• 深化了解 JavaScript 特性

15.2 CSS

• CSK $ 6 c c ?S 威望攻略（建议看英文版）
• 通晓 CSS 高级 Web 规范处理计划
• CSS 世界（张鑫旭教师的W | e I [ N h高文，但是建议需求有必定 CSS 实践后再看）

15.3 Node

• Node.j] ] O i M # 2 ws 实D , )战
• 了不起的 Node.js

15.4 核算机基础

• 鬼话数据F b # S ? q V结构
• 图解 HTTP
• 核算机/程序是怎样跑起来的
• 学习 JavaScript 数据结构` Q s `与算法

15.5 工程化/阅读器/软技术

• 前端工程化体系规划与实践
• webpack 实战：入门、进阶与优化（了解一! Y i 1 [ : _ |下 webpack 的悉数会触及到的常识点）
• WebKiA = Qt 技术底细（讲阅读器的，挺好的）
• 重构：改善既有代码的= _ 7触及
• 码农翻身
• 程序员思维修S + 0 / (炼
• 编码：藏匿在核算机软硬件反面的言语
• 写给咱们看的规划书
• 技术之瞳：阿里巴巴技术书面考试心得