本書(shū)主要介紹用于指導(dǎo)前端性能優(yōu)化工作的通用優(yōu)化方法，從網(wǎng)絡(luò)、瀏覽器、構(gòu)建工具、跨端技術(shù)和CDN 等方面介紹不同技術(shù)、系統(tǒng)對(duì)性能的影響，同時(shí)幫助讀者了解如何有效優(yōu)化性能。本書(shū)從性能的度量、分析和實(shí)驗(yàn)這三個(gè)方面開(kāi)始介紹。首先介紹性能優(yōu)化的一些通用方法，然后將性能作為一個(gè)切面幫助讀者了解與前端技術(shù)棧和性能有關(guān)的知識(shí)。從這個(gè)切面觀察，這些系統(tǒng)的工作原理等知識(shí)被賦予了另外一層意義，通過(guò)這種聯(lián)系把工作原理真正運(yùn)用到工作中，在性能優(yōu)化方面發(fā)揮重要作用。本書(shū)面向的讀者為具有一定經(jīng)驗(yàn)的 Web 開(kāi)發(fā)工程師，以及對(duì)前端開(kāi)發(fā)或 Web 開(kāi)發(fā)有一定了解的開(kāi)發(fā)人員。同時(shí)，假定讀者能夠進(jìn)行簡(jiǎn)單的網(wǎng)頁(yè)開(kāi)發(fā)，并且具備相關(guān)的基礎(chǔ)知識(shí)。
佘錦鑫，花名當(dāng)軒。畢業(yè)于江南大學(xué)理學(xué)院，阿里巴巴前前端技術(shù)專家，曾負(fù)責(zé)Alibaba.com海外版性能優(yōu)化，講師、開(kāi)源愛(ài)好者�，F(xiàn)就職于網(wǎng)易云音樂(lè)，對(duì)Web性能、跨端、可視化搭建等領(lǐng)域有較深入的理解。
第 1 篇 從 Vite 起步
第 1 章 從實(shí)踐開(kāi)始 ··························.2
1.1 Hello World ···························.2
現(xiàn)在開(kāi)始 ··························.2
使用 DevTools ····················.4
第一個(gè)優(yōu)化 ·······················.6
1.2 現(xiàn)實(shí)開(kāi)發(fā)的例子 ······················.7
設(shè)置開(kāi)發(fā)環(huán)境 ·····················.7
Vite ································.8
vite build ··························.9
進(jìn)一步優(yōu)化 ·····················.11
引入 antd ························.11
按需引入 ························.13
動(dòng)態(tài) import ·····················.14
1.3 小結(jié) ································.15
第 2 篇 性能優(yōu)化方法論
第 2 章 度量 ································.18
2.1 科學(xué)的方法 ·························.19
從一個(gè)客戶反饋說(shuō)起 ··········.19
不度量性能，就無(wú)法優(yōu)化
性能 ······························.19
真實(shí)的用戶端性能 ·············.20
2.2 初識(shí) Performance API ··············.21
performance.now()方法 ·········.21
構(gòu)建首屏指標(biāo) ···················.23
2.3 均值、分位數(shù)和秒開(kāi)率 ············.23
均值 ·····························.24
分位數(shù) ···························.25
秒開(kāi)率 ···························.26
如何選擇合適的統(tǒng)計(jì)指標(biāo) ·····.26
2.4 度量首屏 ···························.27
FP ································.27
FCP ······························.27
FMP ·····························.28
如何度量 FMP ··················.28
選定并度量首屏 ················.30
2.5 度量流暢度 ·························.30
度量流暢度的指標(biāo) ·············.31
可視化工具 ·····················.31
用戶端度量 ·····················.32
2.6 Core Web Vitals ····················.34
LCP ······························.34
FID ·······························.38
CLS ······························.39
2.6 小結(jié) ·································.41
第 3 章 分析 ································.42
3.1 分析方法 ···························.43
確定目標(biāo) ························.43
收集數(shù)據(jù) ························.43
清洗數(shù)據(jù) ························.44
統(tǒng)計(jì)值分析 ·····················.44
時(shí)序分析 ························.45
維度分析 ························.46
相關(guān)性分析 ·····················.48
3.2 常用的過(guò)程指標(biāo) ····················.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
常用的指標(biāo) ·····················.58
其他值得分析的指標(biāo) ··········.59
3.5 小結(jié) ································.59
第 4 章 實(shí)驗(yàn) ································.60
4.1 優(yōu)化不是照搬軍規(guī) ·················.61
時(shí)代在發(fā)展 ·····················.61
優(yōu)化的木桶效應(yīng)明顯 ··········.62
用戶環(huán)境差異大 ················.62
性能實(shí)驗(yàn) ························.62
4.2 用實(shí)驗(yàn)驗(yàn)證優(yōu)化 ···················.63
混沌問(wèn)題 ························.64
設(shè)計(jì)實(shí)驗(yàn) ························.64
分桶 ·····························.65
上報(bào)和分析數(shù)據(jù) ················.68
A/B Test 背后的數(shù)學(xué) ···········.68
結(jié)論不重要，重要的是方法 ··.69
4.3 用實(shí)驗(yàn)改進(jìn)優(yōu)化 ···················.69
建立模型 ························.69
實(shí)驗(yàn)修正 ························.70
4.4 小結(jié) ································.71
第 5 章 工具 ································.72
5.1 DevTools ···························.73
Network 面板 ···················.73
Performance 面板 ···············.76
5.2 WebPageTest ·······················.81
發(fā)起測(cè)試 ························.82
報(bào)告 ······························.83
Waterfall 視圖 ··················.83
5.3 小結(jié) ································.87
第 3 篇 網(wǎng)絡(luò)協(xié)議與性能
第 6 章 TTFB 為什么這么長(zhǎng) ··············.90
6.1 TTFB 的合理值 ····················.91
精確定義 ························.92
RTT ······························.92
RTT 一般需要多久 ·············.93
TTFB 的構(gòu)成····················.93
實(shí)驗(yàn)環(huán)境驗(yàn)證 ···················.94
6.2 如何優(yōu)化 TTFB ····················.95
減少請(qǐng)求的傳輸量 ·············.96
減少服務(wù)器端的處理時(shí)間 ·····.96
減少 RTT ························.98
TTFB 的值越小越好嗎 ·········.98
6.3 小結(jié) ·································.99
第 7 章 建立連接為什么這么慢 ·········.100
7.1 建立連接應(yīng)該耗時(shí)多久 ···········.101
TCP 協(xié)議 ·······················.101
建立連接需要多少個(gè) RTT ····.101
抓包驗(yàn)證 ·······················.102
7.2 如何優(yōu)化建立連接的耗時(shí) ········.103
減少物理距離 ··················.103
preconnect ······················.103
復(fù)用連接 ·······················.103
域名收攏 ·······················.104
TCP Fast Open ·················.104
QUIC 和 HTTP/3 ··············.104
7.3 小結(jié) ·······························.105
第 8 章 Fetch 之前瀏覽器在干什么 ····.106
8.1 重定向 ·····························.107
HTML 重定向 ·················.109
有哪些重定向 ·················.109
8.2 瀏覽器打開(kāi)耗時(shí) ··················.112
初始化標(biāo)簽頁(yè)的時(shí)間 ·········.112
unload 的耗時(shí) ··················.112
8.3 如何優(yōu)化 beforeFetch 耗時(shí) ·······.114
重定向邏輯前置 ···············.115
合并重定向 ····················.115
避免使用短鏈 ·················.116
使用 beforeFetch 度量和
分析 ····························.116
8.4 小結(jié) ·······························.117
第 9 章 HTTPS 協(xié)議比 HTTP 協(xié)議
更慢嗎 ····························.118
9.1 HTTPS 協(xié)議為什么安全 ··········.119
對(duì)稱加密和非對(duì)稱加密 ·······.119
SSL/TLS 的實(shí)現(xiàn) ···············.120
SSL/TLS 握手 ·················.122
TLS False Start ·················.124
TLS 1.3 ·························.124
9.2 HTTPS 協(xié)議如何吊銷證書(shū) ········.125
CRL ·····························.125
OCSP ···························.126
OCSP Stapling ·················.126
瀏覽器支持的情況 ············.126
證書(shū)類型 ·······················.127
證書(shū)驗(yàn)證機(jī)制對(duì)性能的影響 ···.129
9.3 HTTPS 協(xié)議更慢嗎 ···············.129
確保證書(shū)鏈完整 ···············.129
啟用 TLS 1.3 ···················.129
不濫用 EV 證書(shū) ···············.130
開(kāi)啟 OSCP Stapling ···········.130
9.4 小結(jié) ································.130
第 10 章 HTTP/2、HTTP/3 和性能 ·····.131
10.1 HTTP/2 和性能 ···················.131
連接復(fù)用為什么不生效 ······.131
頭部壓縮對(duì)我們有什么影響 ··.137
為什么沒(méi)有廣泛使用 Server
Push ···························.140
10.2 為什么還需要 HTTP/3 ···········.144
HTTP/2 存在什么問(wèn)題 ·······.145
HTTP/3 如何解決問(wèn)題 ·······.146
10.3 小結(jié) ······························.148
第 11 章 壓縮和緩存 ·····················.150
11.1 傳輸速度和壓縮速度如何兼得 ···.151
Content-Encoding ·············.151
gzip 壓縮和 br 壓縮 ··········.152
實(shí)時(shí)壓縮 ······················.152
離線壓縮 ······················.153
如何優(yōu)化傳輸性能 ···········.154
11.2 HTTP 緩存什么時(shí)候會(huì)失效 ·····.154
緩存不僅僅是瀏覽器的
事情 ···························.154
緩存 Header ···················.154
11.3 小結(jié) ······························.157
第 4 篇 瀏覽器與性能
第 12 章 瀏覽器和性能 ···················.160
12.1 第一次渲染時(shí)都發(fā)生了什么 ····.161
最小的渲染路徑 ··············.162
盡快返回 HTML ··············.167
減少資源的阻塞 ··············.167
12.2 為什么 DOM 操作很慢 ··········.168
幀 ··································.168
重排 ·······························.169
重繪 ·······························.170
訪問(wèn) DOM 屬性 ················.170
如何優(yōu)化 DOM 操作 ··········.171
12.3 小結(jié) ······························.172
第 13 章 異步任務(wù)和性能 ················.173
13.1 事件循環(huán)機(jī)制 ····················.174
為什么要有事件循環(huán) ········.174
多線程阻塞模型 ··············.174
事件循環(huán) ······················.175
13.2 宏任務(wù)和微任務(wù) ·················.176
13.3 Promise 的 polyfill 性能 ··········.178
如何正確實(shí)現(xiàn) Promise ·······.178
13.4 requestAnimationFrame ··········.180
13.5 小結(jié) ······························.181
第 14 章 內(nèi)存為什么會(huì)影響性能 ········.182
14.1 內(nèi)存 ······························.182
內(nèi)存管理 ·························.183
14.2 內(nèi)存泄漏 ·························.188
內(nèi)存泄漏和性能 ··············.188
常見(jiàn)的導(dǎo)致內(nèi)存泄漏的原因 ··.188
內(nèi)存泄漏問(wèn)題的診斷工具 ···.189
14.3 小結(jié) ······························.191
第 15 章 使用 ServiceWorker 改善
性能 ······························.193
15.1 ServiceWorker 概述 ··············.194
AppCache······················.194
ServiceWorker·················.195
ServiceWorker 能做什么 ·····.195
15.2 使用 ServiceWorker 進(jìn)行緩存 ···.196
Cache API ·····················.196
IndexDB ·······················.201
控制緩存的 Cache Key ······.201
更加靈活的緩存更新策略 ···.203
15.3 API 提前加載 ····················.204
15.4 ServiceWorker 冷啟動(dòng) ···········.205
開(kāi)啟 Navigation Preload ·····.206
消費(fèi) Navigation Preload ·····.206
15.5 小結(jié) ······························.207
第 16 章 字體對(duì)性能的影響 ·············.208
16.1 字體導(dǎo)致的布局偏移 ············.208
如何定位布局偏移 ···········.208
16.2 如何避免字體帶來(lái)的布局偏移 ···.210
如何盡快加載字體 ···········.211
字體文件的格式 ··············.211
字體的加載 ···················.212
預(yù)加載字體 ···················.213
裁剪字體的大小 ··············.214
16.3 小結(jié) ······························.214
第 5 篇 前端工程與性能
第 17 章 構(gòu)建工具和性能 ················.218
17.1 為什么需要打包 ·················.219
CommonJS ····················.220
AMD ···························.220
CMD ···························.221
異步模塊加載器 ··············.222
依賴加載優(yōu)化 ················.223
模塊打包器 ···················.224
ES Module ····················.225
17.2 構(gòu)建工具可以做什么 ············.226
構(gòu)建工具和構(gòu)建優(yōu)化 ········.227
為什么要優(yōu)化打包體積 ·····.227
Bundle 分析 ···················.228
Tree Shaking ··················.229
Scope Hoisting ················.231
Code Splitting ·················.233
代碼壓縮 ······················.234
Vite 和 Bundleless ············.237
17.3 小結(jié) ······························.237
第 18 章 服務(wù)器端渲染和性能 ··········.239
18.1 SSR 和同構(gòu) ······················.241
18.2 SSR 的性能優(yōu)化 ·················.241
緩存 ·······························.242
數(shù)據(jù)預(yù)取 ·························.245
按需渲染 ·························.245
流式渲染 ·························.246
18.3 小結(jié) ······························.246
第 6 篇 跨端技術(shù)與 CDN
第 19 章 WebView 和性能 ···············.248
19.1 WebView 和 Native 的區(qū)別 ······.249
LayoutInflater ·················.249
加載 XML 的具體過(guò)程 ······.250
Measure ························.250
Layout ·························.251
Paint ···························.252
Surface ·························.253
SurfaceFlinger ·················.253
差異 ····························.253
19.2 WebView 的通信成本 ···········.254
JavaScript 調(diào)用 Native ········.254
Native 調(diào)用 JavaScript ········.258
雙向通信 ······················.258
通信對(duì)性能的影響 ···········.259
減少通信數(shù)據(jù)量 ··············.259
避免頻繁通信 ·················.259
19.3 React Native 的懶加載有何
不同 ······························.260
Web 實(shí)現(xiàn) ·····················.260
基于滾動(dòng)容器的懶加載 ·····.260
基于位置獲取的懶加載 ·····.262
虛擬列表 ······················.263
19.4 React Native 如何減小打包
體積 ······························.265
Metro ··························.265
度量 ···························.266
分析 ···························.266
手動(dòng) Tree Shaking ············.267
利用 Babel 插件進(jìn)行優(yōu)化 ···.269
體積和性能的關(guān)系 ···········.271
19.5 API 并行請(qǐng)求 ····················.271
發(fā)起請(qǐng)求 ·························.272
請(qǐng)求攔截 ·························.273
一致性檢驗(yàn) ······················.274
命中率分析 ······················.274
19.6 小結(jié) ······························.274
第 20 章 CDN 和性能 ····················.275
20.1 什么是 CDN ······················.275
解析 ·······························.276
邊緣節(jié)點(diǎn) ·························.276
回源 ·······························.277
緩存策略 ·························.277
20.2 如何提升緩存命中率 ············.278
如何在端側(cè)統(tǒng)計(jì)緩存命中的
情況 ····························.278
減少緩存分裂 ·················.279
緩存忽略動(dòng)態(tài)參數(shù) ···········.279
歸一化 Vary Header ··········.280
長(zhǎng)效緩存 ······················.280
20.3 動(dòng)態(tài)加速 ·························.281
海外加速 ·························.282
連接復(fù)用 ·························.282
客戶端連接復(fù)用 ················.282
HTTPS 優(yōu)化 ·····················.283
動(dòng)靜分離 ·························.283
壓縮 ·······························.284
什么場(chǎng)景適合使用動(dòng)態(tài)加速 ··.284
20.4 自動(dòng) polyfill ······················.284
什么是 polyfill ················.284
Polyfill.io ······················.285
實(shí)現(xiàn)原理 ······················.287
20.5 邊緣計(jì)算和性能 ·················.288
CDN 的可編程功能 ··········.288
Hello World ···················.289
自定義 Cache Key ············.289
前置重定向 ···················.290
流式渲染 ······················.290
20.6 小結(jié) ······························.291
書(shū)單推薦
