本书虽名为前端性能揭秘,但涉及领域远远不止前端。系统性从性能的度量、分析、优化、防腐,抽丝剥茧般地娓娓道来——
1.前端老鸟也不甚了了的前端性能优化硬核知识。
2.性能是前端技术挑战巅峰与工程师追求的极限。
3.涉及底层网络到上层框架值得长期投入众课题。
4.三位一体思路:性能度量+工具分析+优化解决。
5.从用户体验角度理解浏览器处理页面生命流程。
6.剖析数据收集分析、各项性能指标定义及优化。
本书既有大量理论基础,也有扎实实战佐证,值得一读。
第 1 篇 从 Vite 起步
第 1 章 从实践开始 ··························· 2
1.1 Hello World ···························· 2
1.2 现实开发的例子 ······················· 7
1.3 小结 ································· 15
第 2 篇 性能优化方法论
第 2 章 度量 ································· 18
2.1 科学的方法 ·························· 19
2.2 初识 Performance API ··············· 21
2.3 均值、分位数和秒开率 ············· 23
2.4 度量首屏 ···························· 27
2.5 度量流畅度 ·························· 30
2.6 Core Web Vitals ····················· 34
2.6 小结 ·································· 41
第 3 章 分析 ································· 42
3.1 分析方法 ···························· 43
3.2 常用的过程指标 ····················· 48
3.3 Performance API 详解 ··············· 51
3.4 分阶段性能分析 ···················· 58
3.5 小结 ································· 59
第 4 章 实验 ································· 60
4.1 优化不是照搬军规 ·················· 61
4.2 用实验验证优化 ···················· 63
4.3 用实验改进优化 ···················· 69
4.4 小结 ································· 71
第 5 章 工具 ································· 72
5.1 DevTools ···························· 73
5.2 WebPageTest ························ 81
5.3 小结 ································· 87
第 3 篇 网络协议与性能
第 6 章 TTFB 为什么这么长 ··············· 90
6.1 TTFB 的合理值 ····················· 91
6.2 如何优化 TTFB ····················· 95
6.3 小结 ·································· 99
第 7 章 建立连接为什么这么慢 ·········· 100
7.1 建立连接应该耗时多久 ············ 101
7.2 如何优化建立连接的耗时 ········· 103
7.3 小结 ································ 105
第 8 章 Fetch 之前浏览器在干什么 ····· 106
8.1 重定向 ······························ 107
8.2 浏览器打开耗时 ··················· 112
8.3 如何优化 beforeFetch 耗时 ········ 114
8.4 小结 ································ 117
第 9 章 HTTPS 协议比 HTTP 协议
9.1 HTTPS 协议为什么安全 ··········· 119
9.2 HTTPS 协议如何吊销证书 ········· 125
9.3 HTTPS 协议更慢吗 ················ 129
9.4 小结 ································· 130
第 10 章 HTTP/2、HTTP/3 和性能 ······ 131
10.1 HTTP/2 和性能 ···················· 131
10.2 为什么还需要 HTTP/3 ············ 144
10.3 小结 ······························· 148
第 11 章 压缩和缓存 ······················ 150
11.1 传输速度和压缩速度如何兼得 ···· 151
11.2 HTTP 缓存什么时候会失效 ······ 154
11.3 小结 ······························· 157
第 4 篇 浏览器与性能
第 12 章 浏览器和性能 ···················· 160
12.1 第一次渲染时都发生了什么 ····· 161
12.2 为什么 DOM 操作很慢 ··········· 168
12.3 小结 ······························· 172
第 13 章 异步任务和性能 ················· 173
13.1 事件循环机制 ····················· 174
13.2 宏任务和微任务 ·················· 176
13.3 Promise 的 polyfill 性能 ··········· 178
13.4 requestAnimationFrame ··········· 180
13.5 小结 ······························· 181
第 14 章 内存为什么会影响性能 ········· 182
14.1 内存 ······························· 182
14.2 内存泄漏 ·························· 188
14.3 小结 ······························· 191
第 15 章 使用 ServiceWorker 改善
15.1 ServiceWorker 概述 ··············· 194
15.2 使用 ServiceWorker 进行缓存 ···· 196
15.3 API 提前加载 ····················· 204
15.4 ServiceWorker 冷启动 ············ 205
15.5 小结 ······························· 207
第 16 章 字体对性能的影响 ·············· 208
16.1 字体导致的布局偏移 ············· 208
16.2 如何避免字体带来的布局偏移 ···· 210
16.3 小结 ······························· 214
第 5 篇 前端工程与性能
第 17 章 构建工具和性能 ················· 218
17.1 为什么需要打包 ·················· 219
17.2 构建工具可以做什么 ············· 226
17.3 小结 ······························· 237
第 18 章 服务器端渲染和性能 ··········· 239
18.1 SSR 和同构 ······················· 241
18.2 SSR 的性能优化 ·················· 241
18.3 小结 ······························· 246
第 6 篇 跨端技术与 CDN
第 19 章 WebView 和性能 ················ 248
19.1 WebView 和 Native 的区别 ······· 249
19.2 WebView 的通信成本 ············ 254
19.3 React Native 的懒加载有何
19.4 React Native 如何减小打包
19.5 API 并行请求 ····················· 271
19.6 小结 ······························· 274
第 20 章 CDN 和性能 ····················· 275
20.1 什么是 CDN ······················· 275
20.2 如何提升缓存命中率 ············· 278
20.3 动态加速 ·························· 281
20.4 自动 polyfill ······················· 284
20.5 边缘计算和性能 ·················· 288
20.6 小结 ······························· 291