前端性能揭秘

定　　价：100 元

• 作者：佘锦鑫（当轩）
• 出版时间：2022/9/1
• ISBN：9787121442407
• 出 版 社：电子工业出版社

• 中图法分类：TP393.092.2 
• 页码：312
• 版次：01
• 开本：16开

内容简介

本书主要介绍用于指导前端性能优化工作的通用优化方法，从网络、浏览器、构建工具、跨端技术和CDN 等方面介绍不同技术、系统对性能的影响，同时帮助读者了解如何有效优化性能。本书从性能的度量、分析和实验这三个方面开始介绍。首先介绍性能优化的一些通用方法，然后将性能作为一个切面帮助读者了解与前端技术栈和性能有关的知识。从这个切面观察，这些系统的工作原理等知识被赋予了另外一层意义，通过这种联系把工作原理真正运用到工作中，在性能优化方面发挥重要作用。本书面向的读者为具有一定经验的 Web 开发工程师，以及对前端开发或 Web 开发有一定了解的开发人员。同时，假定读者能够进行简单的网页开发，并且具备相关的基础知识。

作者介绍

佘锦鑫，花名当轩。毕业于江南大学理学院，阿里巴巴前前端技术专家，曾负责Alibaba.com海外版性能优化，讲师、开源爱好者。现就职于网易云音乐，对Web性能、跨端、可视化搭建等领域有较深入的理解。

目 录

第 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