前端技术清单

最后更新：2019/10/09 新增内容 (diff) >>

学习文章的知识往往是碎片化的。而前端涉及到的面很广，这些知识如果不进行有效梳理，则无法相互串联、形成体系。因此，我结合工作体会将抽象出了一些前端基础能力，并将看过、写过的一些不错的文章进行整理，形成了一份（纯）前端技术清单。

不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。

• 0. 年度报告
• 1. 基础拾遗
  • 1.1. JavaScript
  • 1.2. CSS
  • 1.3. 浏览器
• 2. 工程化与工具
  • 2.1. webpack
  • 2.2. Gulp
  • 2.3. Linter
  • 2.4. 静态类型（Typescript/Flow）
  • 2.5. Babel
  • 2.6. CSS预处理与模块化
• 3. 性能优化
  • 3.1. 加载性能
  • 3.2. 运行时性能
  • 3.3. 前端缓存
  • 3.4. 性能调试与实践
  • 3.5. 性能指标
• 4. 安全
  • 4.1. XSS
  • 4.2. CSRF
  • 4.3. CSP
  • 4.4. HTTPS
  • 4.5. 安全实录
  • 4.6. 代码保护
  • 4.7. JS沙盒
  • 4.8. 其他
• 5. 自动化测试
  • 5.1. 单元测试
  • 5.2. 端到端测试 (E2E)
  • 5.3. 其他
• 6. 框架与类库
  • 6.1. React
  • 6.2. Vue
  • 6.3. Redux
  • 6.4. RxJS
• 7. 新技术/方向
  • 7.1. PWA
  • 7.2. CSS Houdini
  • 7.3. Web Components
  • 7.4. 微前端（Micro Frontends）
  • 7.5. HTTP/2
  • 7.6. WebAssembly
  • 7.7. 小程序
  • 7.8. Serverless
• 8. 业务相关
  • 8.1. 数据打点上报
  • 8.2. 前端监控
  • 8.3. A/B测试
  • 8.4. “服务端推”
  • 8.5. 动效
• 9. 其他

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
• CSSOM 及其相关浏览器 API 使用指南 [英]
• CSS布局指南
• CSS 中的各类换行处理方式 [英]：处理经典的换行问题
• 浏览器将rem转成px时有精度误差怎么办？
• 精准操控的滚动体验，浅谈新标准 Scroll Snap
• 如何完美实现一个非button元素的按钮 [英]
• 巧用 CSS Grid 来创建横向滚动容器 [英]
• 如何处理内联元素中的空隙 [英]
• CSS Stacking Context 里那些鲜为人知的坑
• 在 (S)CSS 中实现主题功能的 4½ 种方法

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 插件手册
• 如何通过 Babel 实现你的自定义 JS 语法

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
  • 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