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

整理了网上的一些相关文章还需要持续学习呀 ~

放弃了假期快落的岛上生活（动森），吐血整理这份资料，希望对大家有所帮助~

欢迎访问「「www.aeui.cn」资源喵」，获取最新IT学习资料。助力你技能提升~

1. JavaScript 基础

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

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

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. 工程化

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 技术内幕（讲浏览器的，挺好的）

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

码农翻身

程序员思维修炼

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

写给大家看的设计书

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