本書(shū)涵蓋了前端優(yōu)化的方方面面，不只是教給讀者解決具體性能問(wèn)題的工具手冊(cè)，更重要的是幫助讀者構(gòu)筑起一套完整的知識(shí)體系。在此基礎(chǔ)上讀者可以做到舉一反三，觸類旁通，從一個(gè)性能問(wèn)題出發(fā)能夠提出對(duì)整個(gè)系統(tǒng)的優(yōu)化改進(jìn)策略。雖然前端性能優(yōu)化是一個(gè)老生常談的問(wèn)題，業(yè)界也已經(jīng)有比較成熟的優(yōu)化方法，但也需要承認(rèn)這是一個(gè)不斷進(jìn)行著技術(shù)更新和迭代的領(lǐng)域，新技術(shù)的出現(xiàn)帶來(lái)了新的方法同時(shí)也會(huì)引入新的問(wèn)題，本書(shū)對(duì)這些新技術(shù)和新問(wèn)題都有所涉及。另外說(shuō)到底前端性能優(yōu)化是一個(gè)工程實(shí)踐，所以本書(shū)不僅有扎實(shí)全面的理論做基礎(chǔ)，同時(shí)還包含了大量的實(shí)踐案例，充分做到了理論結(jié)合實(shí)踐。
田佳奇，985軟件工程碩士，5年多前端開(kāi)發(fā)經(jīng)驗(yàn)。曾供職于華為，負(fù)責(zé)某大數(shù)據(jù)可視化平臺(tái)的前端開(kāi)發(fā)工作。之前在有贊工作，負(fù)責(zé)過(guò)有贊美業(yè)SaaS系統(tǒng)在PC、H5和小程序多端上的項(xiàng)目開(kāi)發(fā)、持續(xù)集成及性能優(yōu)化等工作。具有豐富的企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)就職于阿里云。
第1 篇 前端性能優(yōu)化概述
第1 章 什么是性能優(yōu)化 1
1.1 性能的起因 1
1.2 性能的影響 2
1.2.1 用戶的留存 2
1.2.2 網(wǎng)站的轉(zhuǎn)化率 3
1.2.3 體驗(yàn)與傳播 3
1.3 性能評(píng)估模型 4
1.3.1 響應(yīng) 4
1.3.2 動(dòng)畫(huà) 5
1.3.3 空閑 5
1.3.4 加載 5
1.4 性能優(yōu)化的步驟 6
1.4.1 性能測(cè)量 6
1.4.2 生命周期 7
1.4.3 優(yōu)化方案 8
1.5 本章小結(jié). 9
第2 章 前端頁(yè)面的生命周期 10
2.1 一道前端面試題 10
2.2 網(wǎng)絡(luò)請(qǐng)求線程開(kāi)啟 11
2.2.1 進(jìn)程與線程. 12
2.2.2 單進(jìn)程瀏覽器 12
2.2.3 多進(jìn)程瀏覽器 13
2.3 建立HTTP 請(qǐng)求 15
2.3.1 DNS 解析 15
2.3.2 網(wǎng)絡(luò)模型 16
2.3.3 TCP 連接 17
目錄∣VII
2.4 前后端的交互 19
2.4.1 反向代理服務(wù)器 19
2.4.2 后端處理流程 20
2.4.3 HTTP 相關(guān)協(xié)議特性 20
2.4.4 瀏覽器緩存. 21
2.5 關(guān)鍵渲染路徑 22
2.5.1 構(gòu)建對(duì)象模型 23
2.5.2 渲染繪制 25
2.6 本章小結(jié) 26
第2 篇 典型模塊的性能優(yōu)化
第3 章 圖像優(yōu)化 27
3.1 圖像基礎(chǔ) 27
3.1.1 圖像是否必需 28
3.1.2 矢量圖和位圖 28
3.1.3 分辨率 31
3.1.4 壓縮的有損和無(wú)損 32
3.2 圖像格式 33
3.2.1 JPEG 33
3.2.2 GIF 36
3.2.3 PNG ... 38
3.2.4 WebP 39
3.2.5 SVG ... 41
3.2.6 Base64 42
3.2.7 格式選擇建議 43
3.3 使用建議 43
3.3.1 CSS Sprite 44
3.3.2 Web 字體 46
3.3.3 注意display:none 的使用 47
3.4 本章小結(jié) 48
第4 章 加載優(yōu)化 49
4.1 圖像延遲加載 49
4.1.1 什么是延遲加載 49
4.1.2 實(shí)現(xiàn)圖片的延遲加載：傳統(tǒng)方式 52
4.1.3 實(shí)現(xiàn)圖片的延遲加載：Intersection Observer 方式 55
4.1.4 實(shí)現(xiàn)圖片的延遲加載：CSS 類名方式. 56
4.1.5 原生的延遲加載支持 58
4.2 視頻加載 59
4.2.1 不需要自動(dòng)播放 59
4.2.2 視頻代替GIF 動(dòng)畫(huà) 60
4.3 加載注意事項(xiàng) 61
4.3.1 首屏加載 62
4.3.2 資源占位 63
4.3.3 內(nèi)容加載失敗 63
4.3.4 圖像解碼延遲 64
4.3.5 JavaScript 是否可用 65
4.4 資源優(yōu)先級(jí) 66
4.4.1 優(yōu)先級(jí) 66
4.4.2 預(yù)加載 67
4.4.3 預(yù)連接 68
4.4.4 預(yù)提取 68
4.5 本章小結(jié) 69
第5 章 書(shū)寫(xiě)高性能的代碼 71
5.1 數(shù)據(jù)存取 71
5.1.1 數(shù)據(jù)存取方式 71
5.1.2 作用域和作用域鏈 72
5.1.3 實(shí)戰(zhàn)經(jīng)驗(yàn) 73
5.2 流程控制 75
5.2.1 條件判斷 75
5.2.2 循環(huán)語(yǔ)句 79
5.2.3 遞歸 ... 81
5.3 字符串處理 84
5.3.1 字符串拼接. 84
5.3.2 正則表達(dá)式. 85
5.3.3 優(yōu)化正則表達(dá)式 87
5.4 快速響應(yīng) 88
5.4.1 瀏覽器的限制 89
5.4.2 異步隊(duì)列 89
5.5 其他建議 90
5.5.1 避免多重求值 90
5.5.2 使用位操作. 91
5.5.3 使用原生方法 92
5.6 本章小結(jié) 93
第6 章 構(gòu)建優(yōu)化 94
6.1 壓縮與合并 94
6.1.1 HTML 壓縮 94
6.1.2 CSS 壓縮 97
6.1.3 JavaScript 壓縮與混淆 98
6.1.4 文件合并 99
6.2 使用fis3 進(jìn)行前端構(gòu)建 102
6.2.1 構(gòu)建流程 102
6.2.2 構(gòu)建實(shí)操 103
6.3 使用webpack 進(jìn)行前端構(gòu)建 105
6.3.1 模塊打包工具 105
6.3.2 安裝建議 106
6.3.3 配置文件 106
6.4 webpack 的優(yōu)化性能 107
6.4.1 盡量與時(shí)俱進(jìn) 107
6.4.2 減少Loader 的執(zhí)行 107
6.4.3 確保插件的精簡(jiǎn)和可靠 108
6.4.4 合理配置resolve 參數(shù) 109
6.4.5 使用DllPlugin 110
6.4.6 將單進(jìn)程轉(zhuǎn)化為多進(jìn)程 113
6.4.7 壓縮打包結(jié)果的體積 114
6.5 本章小結(jié) 117
第7 章 渲染優(yōu)化 118
7.1 頁(yè)面渲染性能 118
7.1.1 流暢的使用體驗(yàn) 118
7.1.2 渲染過(guò)程 119
7.2 JavaScript 執(zhí)行優(yōu)化 120
7.2.1 實(shí)現(xiàn)動(dòng)畫(huà)效果 120
7.2.2 恰當(dāng)使用Web Worker 122
7.2.3 事件節(jié)流和事件防抖 124
7.2.4 恰當(dāng)?shù)腏avaScript 優(yōu)化 126
7.3 計(jì)算樣式優(yōu)化 128
7.3.1 減少要計(jì)算樣式的元素?cái)?shù)量 128
7.3.2 降低選擇器的復(fù)雜性 129
7.3.3 使用BEM 規(guī)范 129
7.4 頁(yè)面布局與重繪的優(yōu)化 131
7.4.1 觸發(fā)頁(yè)面布局與重繪的操作 131
7.4.2 避免對(duì)樣式的頻繁改動(dòng) 131
7.4.3 通過(guò)工具對(duì)繪制進(jìn)行評(píng)估 133
7.4.4 降低繪制復(fù)雜度 136
7.5 合成處理 137
7.5.1 新增圖層 137
7.5.2 僅與合成相關(guān)的動(dòng)畫(huà)屬性 137
7.6 本章小結(jié) 138
第8 章 服務(wù)器端渲染 139
8.1 頁(yè)面渲染 139
8.1.1 頁(yè)面渲染的發(fā)展 139
8.1.2 多層次優(yōu)化方案 141
8.2 Vue 中的服務(wù)器端渲染 142
8.2.1 Vue 的SSR 基本流程 142
8.2.2 Vue 的SSR 項(xiàng)目實(shí)例 143
8.3 React 中的服務(wù)器端渲染 147
8.3.1 項(xiàng)目搭建 147
8.3.2 同構(gòu) 149
8.3.3 服務(wù)器端渲染的路由設(shè)置 150
8.3.4 結(jié)合Redux 進(jìn)行狀態(tài)管理 152
8.3.5 通過(guò)中間層獲取數(shù)據(jù) 158
8.3.6 處理樣式 160
8.3.7 搜索引擎優(yōu)化相關(guān)技巧 162
8.4 本章小結(jié) 165
第9 章 數(shù)據(jù)存儲(chǔ) 166
9.1 數(shù)據(jù)存儲(chǔ)概覽 166
9.1.1 數(shù)據(jù)存儲(chǔ)分類 166
9.1.2 Cookie 168
9.1.3 Local Storage 和Session Storage 169
9.1.4 Web SQL 170
9.1.5 IndexedDB 171
9.2 通過(guò)Chrome 開(kāi)發(fā)者工具調(diào)試本地存儲(chǔ) 173
9.2.1 調(diào)試Cookie 173
9.2.2 調(diào)試Local Storage 和Session Storage 174
9.2.3 調(diào)試IndexedDB 175
9.2.4 調(diào)試Web SQL 176
9.3 IndexedDB 實(shí)踐建議 177
9.3.1 注意平臺(tái)兼容性 178
9.3.2 完善錯(cuò)誤處理 178
9.3.3 注意修改、刪除和過(guò)期 179
9.3.4 存儲(chǔ)性能 180
9.4 Cache Storage 180
9.4.1 兼容與數(shù)據(jù)類型 181
9.4.2 創(chuàng)建緩存并存儲(chǔ)數(shù)據(jù) 181
9.4.3 刪除緩存 183
9.4.4 檢索與查詢 183
9.5 本章小結(jié) 185
第10 章 緩存技術(shù) 186
10.1 HTTP 緩存 186
10.1.1 強(qiáng)制緩存. 186
10.1.2 協(xié)商緩存. 188
10.1.3 緩存決策. 190
10.1.4 緩存設(shè)置注意事項(xiàng) 193
XII∣Web 前端性能優(yōu)化
10.2 Service Worker 緩存 194
10.2.1 Service Worker 概覽 194
10.2.2 生命周期. 195
10.2.3 本地開(kāi)發(fā)注意事項(xiàng) 199
10.2.4 高性能加載 200
10.3 Push 緩存 ... 202
10.3.1 最后一道緩存 202
10.3.2 Push 緩存與預(yù)加載 203
10.4 CDN 緩存 ... 205
10.4.1 CDN 概述 205
10.4.2 應(yīng)用場(chǎng)景. 208
10.4.3 優(yōu)化實(shí)踐. 209
10.5 本章小結(jié) 210
第3 篇 前端性能檢測(cè)實(shí)踐
第11 章 性能檢測(cè) 212
11.1 性能檢測(cè)概述 212
11.1.1 如何進(jìn)行性能檢測(cè) 213
11.1.2 常見(jiàn)的檢測(cè)工具 214
11.2 Lighthouse 221
11.2.1 使用方式 221
11.2.2 性能狀況 223
11.2.3 可訪問(wèn)性 231
11.2.4 最佳實(shí)踐 232
11.2.5 搜索引擎優(yōu)化 233
11.3 Performance 面板的使用 234
11.3.1 使用方式 234
11.3.2 面板信息 235
11.4 本章小結(jié) 239
書(shū)單推薦
