共计 5473 个字符，预计需要花费 14 分钟才能阅读完成。
2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？
记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。
在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此，我结合工作体会抽象出了一些前端基础技术能力，并将这段时间学习或产出的一些不错的内容根据这些能力进行整理，形成了一份前端技术清单（github 地址）。
不论你是正在自学前端遇到了瓶颈，还是对某些技术熟练掌握但某些还未涉足，都希望这份清单能对你有所帮助。
由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此 github 上的清单内容 也会不断更新。目前只包含纯前端基础内容，NodeJS、客户端泛前端、小程序、可视化等内容先留着坑吧。
清单内容↓↓↓
0. 年度报告
2018 前端工具调查报告
2018 JavaScript 调查报告
1. 基础拾遗
温故而知新，不知则习之，是以牢固根基。
1.1. JavaScript
You-Dont-Know-JS [英]
JavaScript 基础运行机制：
JS 引擎、运行时与调用栈概述 [英]
V8 引擎简介 [英]
内存管理与 4 中常见的泄漏 [英]
Event Loop（面试里总会有一题 Event Loop…）：
从 Event Loop 规范探究 JavaScript 异步及浏览器更新渲染时机
异步之 Event Loop [英]
NodeJS 中的 Event Loop、Timers 与 process.nextTick() [ 英]
Tasks、Microtasks、Queues 与 Schedules [英]
Web Workers 及其 5 个常见使用场景 [英]
如何避免 async/await 地狱 [英]
“回调地狱”的解决思路汇总
1.2. CSS
You-Need-to-Know-CSS
CSS 布局指南
CSS 中的各类换行处理方式 [英]：处理经典的换行问题
浏览器将 rem 转成 px 时有精度误差怎么办？
精准操控的滚动体验，浅谈新标准 Scroll Snap
如何完美实现一个非 button 元素的按钮 [英]
巧用 CSS Grid 来创建横向滚动容器 [英]
如何处理内联元素中的空隙 [英]
CSS Stacking Context 里那些鲜为人知的坑
1.3. 浏览器
浏览器的工作原理
现代浏览器内部是如何运行的：
Chrome 浏览器概览
浏览时发生了什么？
渲染进程的内部工作原理
compositor 是如何来提高交互性能的？
完整的页面生命周期 API 介绍 [英]
四个新的观察者：Intersection / Mutation / Resize / Performance (Observer)
渲染引擎工作方式及优化建议 [英]
浏览器内核渲染：重建引擎
跨域解决方案汇总
2. 工程化与工具
软件规模的扩大带来了工程化的需求，前端也不例外。随着 NodeJS 的出现，前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。
2.1. webpack
webpack 中的 Chunk 关系图算法 [英]
webpack 进阶系列文章
编译优化：
如何提升大型项目中 webpack 的性能 ???? [英]
运行时优化：Separating a Manifest [英]
在 webpack 中使用 <link rel=”prefetch/preload”> [英]
如何更好使用 webpack tree-shaking
关于 webpack 编译缓存的讨论：
mzgoddard’s comment
[spec: webpack 5] – A module disk cache between build processes
2.2. Gulp
Gulp 4 简介 [英]
基于 Gulp 的多页面应用实践指南
2.3. Linter
JS Linter 进化史
为何要在项目汇总使用 ESLint [英]
2.4. 静态类型（Typescript/Flow）
Typescript 总体架构 [英]
为什么要在 JavaScript 中进行静态类型检查：
第一部分
第二、三部分
第四部分
2.5. Babel
Babel 用户手册
Babel 插件手册
2.6. CSS 预处理与模块化
CSS 进化史 [英]
CSS 模块化方案系列
3. 性能优化
性能优化其实就是在理解浏览器的基础上“因地制宜”，因此可以配合 1.3 节“浏览器”部分进行理解。
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点，非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。
3.1. 加载性能
PRPL 模式 [英]
图片懒加载完全指南 [英]
使用 Intersection Observer 来懒加载图片 [英]
图片与视频懒加载的详细指南 [英]
使用 Application Shell 架构来实现秒开应用 [英]
3.2. 运行时性能
避免大型、复杂的布局和布局抖动 [英]
什么导致强制同步布局（reflow）？[英]
如何诊断强制同步布局 [英]
无线性能优化：Composite
如何不择手段提升 scroll 事件的性能
使用 passive event listener 来提高滚动流畅性 [英]
节流和去抖（throttle & debounce）：
JavaScript 函数节流和函数去抖应用场景辨析
underscore 函数去抖的实现
requestIdleCallback – 一个强大而神器的 API：
requestIdleCallback 使用入门 [英]
Idle Until Urgent [英]：requestIdleCallback 的妙用
3.3. 前端缓存
Web 缓存简介：以购买牛奶的为例 [英]
大话前端缓存 [英]
缓存（一）—— 缓存总览：从性能优化的角度看缓存
缓存（二）—— 浏览器缓存机制：强缓存、协商缓存
缓存（三）—— 数据存储：cookie、Storage、indexedDB
3.4. 性能调试与实践
使用 Chrome DevTools 提升页面速度 [英]：Chrome DevTools 实操讲解
了解 DevTools 中的 Resource Timing
淘宝新势力周 H5 性能优化实战
优化打包策略来提升页面加载速度
Chrome DevTools 中你可能不知道的调试技巧
前端性能测量 [英]
3.5. 性能指标
以用户为中心的前端性能指标 [英]：前端性能指标的来龙去脉
DOMContentLoaded:
你不知道的 DOMContentLoaded
Deciphering the Critical Rendering Path [英]
FP (First Paint)：
Chrome 的 First Paint
FCP (First Contentful Paint)：
First Contentful Paint Explained [英]
First Contentful Paint [英]
FMP (First Meaningful Paint)：
Chrome 中的 First Meaningful Paint
Time to First Meaningful Paint
TTI (Time to interactive)：
Time to Interactive Explainer
衡量用户体验的新标准
TTFB (Time To First Byte)：
TTFB，以及页面加载的时间节点
FID (First Input Delay)：
First Input Delay
Speed Index：
WebPagetest: Speed Index
4. 安全
很多安全风险老生常谈，但是往往到出现问题时，才会被重视或者意识到。
8 大前端安全问题上篇
8 大前端安全问题下篇
概念讲解：编码、加密、哈希与混淆 [英]
常见 Web 安全攻防总结
4.1. XSS
如何防止 XSS 攻击？
4.2. CSRF
如何防止 CSRF 攻击？
Site Isolation [英]：Chrome 的新特性
4.3. CSP
Content Security Policy 入门教程
Content Security Policy (CSP) [英]
4.4. HTTPS
图文还原 HTTPS 原理
浅谈有赞全站 HTTPS 推进
4.5. 安全实录
About rel=noopener [英]：打开一个新页面是如何带来安全隐患的
一种新型的“钓鱼”方式 [英]
一个媒体文件请求引发的跨站风险 [英]
Mitigating Spectre [英]：Chrome 中的跨站安全问题
5. 自动化测试
自动化测试是软件工程的重要部分之一，但却极容易被忽视。
2018 前端自动化测试综述 [英]
测试你的前端代码（介绍篇）[英]
5.1. 单元测试
测试你的前端代码（单元测试篇）[英]
Fakes、Mocks 以及 Stubs 概念明晰
测试覆盖（率）到底有什么用？
5.2. 端到端测试 (E2E)
测试你的前端代码（E2E 测试篇）[英]
什么是一个好的 E2E 测试？[英]
平衡单元测试和端到端测试
对过多的 E2E 测试说“不”[英]
5.3. 其他
测试你的前端代码（集成测试篇）[英]
测试你的前端代码（可视化测试篇）[英]
6. 框架与类库
如果说基础知识是道，那框架与工具可能就是术；学习与理解它们，但千万不要成为它们的奴隶。
6.1. React
React 底层揭秘 [英]
你所需要知道的 React 细节
React Fiber 架构
React 16 Fiber 源码速览
React 是怎样炼成的：React 早期的进化之路
从零开始实现一个 React：
1. JSX 和虚拟 DOM
2. 组件和生命周期
3. diff 算法
4. 异步的 setState
「react 技术栈」单页应用实践快速入门
6.2. Vue
深入浅出 – vue 变化侦测原理
Vue 模板编译原理
6.3. Redux
重新设计 Redux [英]：Rematch
如何用 GraphQL 来替代 Redux [英]
解读 Redux 的设计思路与用法
(Redux) 应用构建的三个原则 [英]
6.4. RxJS
ReactiveX 官网：宝石图真的非常形象易读
响应式编程，是明智的选择
图解 RxJS [英]
调试 RxJS：Tooling [英]
调试 RxJS：Logging [英]
7. 新技术 / 方向
前端领域新技术、新方向层出不穷，这里汇总一些新技术方向；作为开发者需要多了解但是不要盲从
7.1. PWA
PWA 学习与实践系列
Service Worker 入门简介 [英]
PWA 在 iOS 平台上的特殊问题 [英]
在你的 PWA 中小心使用 iOS 的 meta 标签 [英]
饿了么的 PWA 升级实践
离线指南
Android 中的 WebAPKs [英]
Pinterest 的 PWA 实践 [英]
异步 HTTP Cookies API [英]：赋能 Service Worker
7.2. CSS Houdini
认识 Houdini 与 CSS Paint API [英]
用 Houdini 来拯救 CSS Polyfill [英]
7.3. Web Components
Web Components 基本概念和用法
Web Components 指南 [英]
Shadow DOM 使用简介
HTMLUnknownElement 与 HTML5 自定义元素的故事
7.4. 微前端（Micro Frontends）
微前端主页 [英]
微前端的那些事儿
技术雷达之「微前端」- 将微服务理念扩展到前端开发
7.5. HTTP/2
HTTP/2 幕后原理
全面介绍的 HTTP/2 [英]
HTTP/2 主页:
HTTP/2 协议 [英]
HPACK: HTTP/2 Header 压缩 [英]
7.6. WebAssembly
WebAssembly 官网
WebAssembly 现状与实战
WebAssembly 系列：
一、生动形象地介绍 WebAssembly
二、JavaScript Just-in-time (JIT) 工作原理
三、编译器如何生成汇编
四、WebAssembly 工作原理
五、为什么 WebAssembly 更快？
六、WebAssembly 的现在与未来
8. 业务相关
在业务中往往还有一些与“业务无关”的场景需求，不论是什么业务几乎都会遇到；因此，在变与不变中，我们更需要去抽象出这些问题。
8.1. 数据打点上报
如何精确统计页面停留时长
揭开 JS 无埋点技术的神秘面纱
8.2. 前端监控
前端异常监控解决方案研究
监控平台前端 SDK 开发实践
把前端监控做到极致
前端监控系统探索总结
8.3. A/ B 测试
Twitter 的 A / B 测试实践：
一、为什么要测试以及测试的意义
二、技术概述
三、检测和避免 A/B Test 中 bucket 不平衡问题
四、A/B Test 中使用多个控制的启示
Netflix A/B Test 实验平台实践 [英]
指导方法
实验中容易遇到的七种问题 [英]
实验的七个准则 [英]
小流量如何进行 AB 测试
案例分享
大众点评 AB 测试框架 Gemini
新浪新闻客户端 AB 测试与灰度发布
天猫 App A/ B 测试实践
工具
AB 测试样本数量计算器
AB 测试结果有效性分析工具
8.4.“服务端推”
各类“服务器推”技术原理与实例
长连接 /websocket/SSE 等主流服务器推送技术比较
Comet：基于 HTTP 长连接的“服务器推”技术
深入 WebSockets、HTTP/2 SSE [英]
WebSocket 应用安全问题分析
8.5. 动效
动画设计的 12 个原则???? [英]
贝塞尔曲线扫盲
动画：从 AE 到 Web
最全最好用的动效落地方法：
基础知识
落地方式
9. 不归类的好文
开卷有益。
Recursion? We don’t need no stinking recursion!：如何将一些递归改为循环（尾递归优化）
Turning your web traffic into a Super Computer：通过 Web Worker 和 WebSocket 来将全世界的电脑连接成超级计算机
Designing very large (JavaScript) applications：高屋建瓴，适合阅读与思考