第 1 篇 从 Vite 起步
第 1 章 从实践开始 ··························· 2
1.1 Hello World ···························· 2
现在开始 ··························· 2
使用 DevTools ····················· 4
第一个优化 ························ 6
1.2 现实开发的例子 ······················· 7
设置开发环境 ······················ 7
Vite ································· 8
vite build ··························· 9
进一步优化 ······················ 11
引入 antd ························· 11
按需引入 ························· 13
动态 import ······················ 14
1.3 小结 ································· 15
第 2 篇 性能优化方法论
第 2 章 度量 ································· 18
2.1 科学的方法 ·························· 19
从一个客户反馈说起 ··········· 19
不度量性能，就无法优化性能 ······························· 19
真实的用户端性能 ·············· 20
2.2 初识 Performance API ··············· 21
performance.now()方法 ·········· 21
构建首屏指标 ···················· 23
2.3 均值、分位数和秒开率 ············· 23
均值 ······························ 24
分位数 ···························· 25
秒开率 ···························· 26
如何选择合适的统计指标 ······ 26
2.4 度量首屏 ···························· 27
FP ································· 27
FCP ······························· 27
FMP ······························ 28
如何度量 FMP ··················· 28
选定并度量首屏 ················· 30
2.5 度量流畅度 ·························· 30
度量流畅度的指标 ·············· 31
可视化工具 ······················ 31
用户端度量 ······················ 32
2.6 Core Web Vitals ····················· 34
LCP ······························· 34
FID ································ 38
CLS ······························· 39
2.6 小结 ·································· 41
第 3 章 分析 ································· 42
3.1 分析方法 ···························· 43
确定目标 ························· 43
收集数据 ························· 43
清洗数据 ························· 44
统计值分析 ······················ 44
时序分析 ························· 45
维度分析 ························· 46
相关性分析 ······················ 48
3.2 常用的过程指标 ····················· 48
TTFB ····························· 49
DOMReady 和 Load ············· 50
3.3 Performance API 详解 ··············· 51
Navigation Timing API ·········· 51
Peformance Entry API ··········· 53
Resource Timing ················· 54
Navigation Timing Level 2 ······ 55
Paint Timing ····················· 56
User Timing ······················ 56
3.4 分阶段性能分析 ···················· 58
常用的指标 ······················ 58
其他值得分析的指标 ··········· 59
3.5 小结 ································· 59
第 4 章 实验 ································· 60
4.1 优化不是照搬军规 ·················· 61
时代在发展 ······················ 61
优化的木桶效应明显 ··········· 62
用户环境差异大 ················· 62
性能实验 ························· 62
4.2 用实验验证优化 ···················· 63
混沌问题 ························· 64
设计实验 ························· 64
分桶 ······························ 65
上报和分析数据 ················· 68
A/B Test 背后的数学 ············ 68
结论不重要，重要的是方法 ··· 69
4.3 用实验改进优化 ···················· 69
建立模型 ························· 69
实验修正 ························· 70
4.4 小结 ································· 71
第 5 章 工具 ································· 72
5.1 DevTools ···························· 73
Network 面板 ···················· 73
Performance 面板 ················ 76
5.2 WebPageTest ························ 81
发起测试 ························· 82
报告 ······························· 83
Waterfall 视图 ··················· 83
5.3 小结 ································· 87
第 3 篇 网络协议与性能
第 6 章 TTFB 为什么这么长 ··············· 90
6.1 TTFB 的合理值 ····················· 91
精确定义 ························· 92
RTT ······························· 92
RTT 一般需要多久 ·············· 93
TTFB 的构成····················· 93
实验环境验证 ···················· 94
6.2 如何优化 TTFB ····················· 95
减少请求的传输量 ·············· 96
减少服务器端的处理时间 ······ 96
减少 RTT ························· 98
TTFB 的值越小越好吗 ·········· 98
6.3 小结 ·································· 99
第 7 章 建立连接为什么这么慢 ·········· 100
7.1 建立连接应该耗时多久 ············ 101
TCP 协议 ························ 101
建立连接需要多少个 RTT ····· 101
抓包验证 ························ 102
7.2 如何优化建立连接的耗时 ········· 103
减少物理距离 ··················· 103
preconnect ······················· 103
复用连接 ························ 103
域名收拢 ························ 104
TCP Fast Open ·················· 104
QUIC 和 HTTP/3 ··············· 104
7.3 小结 ································ 105
第 8 章 Fetch 之前浏览器在干什么 ····· 106
8.1 重定向 ······························ 107
HTML 重定向 ·················· 109
有哪些重定向 ·················· 109
8.2 浏览器打开耗时 ··················· 112
初始化标签页的时间 ·········· 112
unload 的耗时 ··················· 112
8.3 如何优化 beforeFetch 耗时 ········ 114
重定向逻辑前置 ················ 115
合并重定向 ····················· 115
避免使用短链 ·················· 116
使用 beforeFetch 度量和分析 ····························· 116
8.4 小结 ································ 117
第 9 章 HTTPS 协议比 HTTP 协议
更慢吗 ····························· 118
9.1 HTTPS 协议为什么安全 ··········· 119
对称加密和非对称加密 ········ 119
SSL/TLS 的实现 ················ 120
SSL/TLS 握手 ·················· 122
TLS False Start ·················· 124
TLS 1.3 ·························· 124
9.2 HTTPS 协议如何吊销证书 ········· 125
CRL ······························ 125
OCSP ···························· 126
OCSP Stapling ·················· 126
浏览器支持的情况 ············· 126
证书类型 ························ 127
证书验证机制对性能的影响 ···· 129
9.3 HTTPS 协议更慢吗 ················ 129
确保证书链完整 ················ 129
启用 TLS 1.3 ···················· 129
不滥用 EV 证书 ················ 130
开启 OSCP Stapling ············ 130
9.4 小结 ································· 130
第 10 章 HTTP/2、HTTP/3 和性能 ······ 131
10.1 HTTP/2 和性能 ···················· 131
连接复用为什么不生效 ······· 131
头部压缩对我们有什么影响 ··· 137
为什么没有广泛使用 Server Push ···························· 140
10.2 为什么还需要 HTTP/3 ············ 144
HTTP/2 存在什么问题 ········ 145
HTTP/3 如何解决问题 ········ 146
10.3 小结 ······························· 148
第 11 章 压缩和缓存 ······················ 150
11.1 传输速度和压缩速度如何兼得 ···· 151
Content-Encoding ·············· 151
gzip 压缩和 br 压缩 ··········· 152
实时压缩 ······················· 152
离线压缩 ······················· 153
如何优化传输性能 ············ 154
11.2 HTTP 缓存什么时候会失效 ······ 154
缓存不仅仅是浏览器的事情 ···························· 154
缓存 Header ···················· 154
11.3 小结 ······························· 157
第 4 篇 浏览器与性能
第 12 章 浏览器和性能 ···················· 160
12.1 第一次渲染时都发生了什么 ····· 161
最小的渲染路径 ··············· 162
尽快返回 HTML ··············· 167
减少资源的阻塞 ··············· 167
12.2 为什么 DOM 操作很慢 ··········· 168
帧 ··································· 168
重排 ································ 169
重绘 ································ 170
访问 DOM 属性 ················· 170
如何优化 DOM 操作 ··········· 171
12.3 小结 ······························· 172
第 13 章 异步任务和性能 ················· 173
13.1 事件循环机制 ····················· 174
为什么要有事件循环 ········· 174
多线程阻塞模型 ··············· 174
事件循环 ······················· 175
13.2 宏任务和微任务 ·················· 176
13.3 Promise 的 polyfill 性能 ··········· 178
如何正确实现 Promise ········ 178
13.4 requestAnimationFrame ··········· 180
13.5 小结 ······························· 181
第 14 章 内存为什么会影响性能 ········· 182
14.1 内存 ······························· 182
内存管理 ·························· 183
14.2 内存泄漏 ·························· 188
内存泄漏和性能 ··············· 188
常见的导致内存泄漏的原因 ··· 188
内存泄漏问题的诊断工具 ···· 189
14.3 小结 ······························· 191
第 15 章 使用 ServiceWorker 改善性能 ······························· 193
15.1 ServiceWorker 概述 ··············· 194
AppCache······················· 194
ServiceWorker·················· 195
ServiceWorker 能做什么 ······ 195
15.2 使用 ServiceWorker 进行缓存 ···· 196
Cache API ······················ 196
IndexDB ························ 201
控制缓存的 Cache Key ······· 201
更加灵活的缓存更新策略 ···· 203
15.3 API 提前加载 ····················· 204
15.4 ServiceWorker 冷启动 ············ 205
开启 Navigation Preload ······ 206
消费 Navigation Preload ······ 206
15.5 小结 ······························· 207
第 16 章 字体对性能的影响 ·············· 208
16.1 字体导致的布局偏移 ············· 208
如何定位布局偏移 ············ 208
16.2 如何避免字体带来的布局偏移 ···· 210
如何尽快加载字体 ············ 211
字体文件的格式 ··············· 211
字体的加载 ···················· 212
预加载字体 ···················· 213
裁剪字体的大小 ··············· 214
16.3 小结 ······························· 214
第 5 篇 前端工程与性能
第 17 章 构建工具和性能 ················· 218
17.1 为什么需要打包 ·················· 219
CommonJS ····················· 220
AMD ···························· 220
CMD ···························· 221
异步模块加载器 ··············· 222
依赖加载优化 ················· 223
模块打包器 ···················· 224
ES Module ····················· 225
17.2 构建工具可以做什么 ············· 226
构建工具和构建优化 ········· 227
为什么要优化打包体积 ······ 227
Bundle 分析 ···················· 228
Tree Shaking ··················· 229
Scope Hoisting ················· 231
Code Splitting ·················· 233
代码压缩 ······················· 234
Vite 和 Bundleless ············· 237
17.3 小结 ······························· 237
第 18 章 服务器端渲染和性能 ··········· 239
18.1 SSR 和同构 ······················· 241
18.2 SSR 的性能优化 ·················· 241
缓存 ································ 242
数据预取 ·························· 245
按需渲染 ·························· 245
流式渲染 ·························· 246
18.3 小结 ······························· 246
第 6 篇 跨端技术与 CDN
第 19 章 WebView 和性能 ················ 248
19.1 WebView 和 Native 的区别 ······· 249
LayoutInflater ·················· 249
加载 XML 的具体过程 ······· 250
Measure ························· 250
Layout ·························· 251
Paint ···························· 252
Surface ·························· 253
SurfaceFlinger ·················· 253
差异 ····························· 253
19.2 WebView 的通信成本 ············ 254
JavaScript 调用 Native ········· 254
Native 调用 JavaScript ········· 258
双向通信 ······················· 258
通信对性能的影响 ············ 259
减少通信数据量 ··············· 259
避免频繁通信 ·················· 259
19.3 React Native 的懒加载有何不同 ······························· 260
Web 实现 ······················ 260
基于滚动容器的懒加载 ······ 260
基于位置获取的懒加载 ······ 262
虚拟列表 ······················· 263
19.4 React Native 如何减小打包体积 ······························· 265
Metro ··························· 265
度量 ···························· 266
分析 ···························· 266
手动 Tree Shaking ············· 267
利用 Babel 插件进行优化 ···· 269
体积和性能的关系 ············ 271
19.5 API 并行请求 ····················· 271
发起请求 ·························· 272
请求拦截 ·························· 273
一致性检验 ······················· 274
命中率分析 ······················· 274
19.6 小结 ······························· 274
第 20 章 CDN 和性能 ····················· 275
20.1 什么是 CDN ······················· 275
解析 ································ 276
边缘节点 ·························· 276
回源 ································ 277
缓存策略 ·························· 277
20.2 如何提升缓存命中率 ············· 278
如何在端侧统计缓存命中的情况 ····························· 278
减少缓存分裂 ·················· 279
缓存忽略动态参数 ············ 279
归一化 Vary Header ··········· 280
长效缓存 ······················· 280
20.3 动态加速 ·························· 281
海外加速 ·························· 282
连接复用 ·························· 282
客户端连接复用 ················· 282
HTTPS 优化 ······················ 283
动静分离 ·························· 283
压缩 ································ 284
什么场景适合使用动态加速 ··· 284
20.4 自动 polyfill ······················· 284
什么是 polyfill ················· 284
Polyfill.io ······················· 285
实现原理 ······················· 287
20.5 边缘计算和性能 ·················· 288
CDN 的可编程功能 ··········· 288
Hello World ···················· 289
自定义 Cache Key ············· 289
前置重定向 ···················· 290
流式渲染 ······················· 290
20.6 小结 ······························· 291
· · · · · · (
收起)
0 有用 思来享趣 2024-10-21 20:42:33 陕西
4.5星。 受益匪浅 这个主题的书太少了 国内作者的书，比起国外作者，在行文、示例等细节上，还有很大差距——大概是被我们的教材毒害的。
3 有用 卤代烃 2022-10-13 21:25:23 北京
写的比较基础，适合入门者走马观花看一下。 限于篇幅原因，很多内容只能蜻蜓点水的提一下（里面每个章节实际上都能独立写一本书了），最后两章跨端和CDN的内容说实话个人感觉加入的蛮突兀的，就看着看着突然塞了个 jsb 怎么写，rn 怎么包体积优化，cdn 怎么优化，其实这几个方向也能写很多东西的，但是放在这里感觉内容不是很聚焦… 希望搞性能优化的读者，最好还是把 chrome/edge 开发者文档和... 写的比较基础，适合入门者走马观花看一下。 限于篇幅原因，很多内容只能蜻蜓点水的提一下（里面每个章节实际上都能独立写一本书了），最后两章跨端和CDN的内容说实话个人感觉加入的蛮突兀的，就看着看着突然塞了个 jsb 怎么写，rn 怎么包体积优化，cdn 怎么优化，其实这几个方向也能写很多东西的，但是放在这里感觉内容不是很聚焦… 希望搞性能优化的读者，最好还是把 chrome/edge 开发者文档和 web.dev 教程过一遍比较好，这是正路，逃不掉的。 (展开)
0 有用 君临 2026-03-24 19:00:27 内蒙古
2026.3.24 看完豆包总结。
1 有用 葱花小当家 2022-10-16 14:30:23 浙江
从简单可上手的案例出发，到具体的方法论。作为前端从业者还是很有收获的，性能优化毕竟前端永远绕不开的话题
2 有用 胡布斯 2022-10-16 14:35:08 浙江
这本书以性能为主题，在知识上涵盖了前端的各个领域，更以此为契机，展示了大厂资深工程师的做事方法（度量、实验、分析）和乐趣所在（创造、对精密系统的持续探索和深度理解）。非常适合在校学习前端的学生，以及希望进大厂的前端从业者阅读！在大厂的同学也可以通过阅读本书查漏补缺，非常不错！