"繫統：構築前端性能知識體繫，將零散知識點聚沙成塔，理清脈絡深入：針對6大優化場景，層層剝繭式分析，讓讀者知其然也知其所以然實用：沉澱作者5年一線大廠開發經驗，逐個性能點解析實踐場景豐富：彙集12年專業知識，帶你全面理解關乎性能的前因後果"

●第1篇前端性能優化概述
第1章什麼是性能優化1
1.1性能的起因1
1.2性能的影響2
1.2.1用戶的留存2
1.2.2網站的轉化率3
1.2.3體驗與傳播3
1.3性能評估模型4
1.3.1響應4
1.3.2動畫5
1.3.3空閑5
1.3.4加載5
1.4性能優化的步驟6
1.4.1性能測量6
1.4.2生命周期7
1.4.3優化方案8
1.5本章小結9
第2章前端頁面的生命周期10
2.1一道前端面試題10
2.2網絡請求線程開啟11
2.2.1進程與線程12
2.2.2單進程瀏覽器12
2.2.3多進程瀏覽器13
2.3建立HTTP請求15
2.3.1DNS解析15
2.3.2網絡模型16
2.3.3TCP連接17
2.4前後端的交互19
2.4.1反向代理服務器19
2.4.2後端處理流程20
2.4.3HTTP相關協議特性20
2.4.4瀏覽器緩存21
2.5關鍵渲染路徑22
2.5.1構建對像模型23
2.5.2渲染繪制25
2.6本章小結26
第2篇典型模塊的性能優化
第3章圖像優化27
3.1圖像基礎27
3.1.1圖像是否必需28
3.1.2矢量圖和位圖28
3.1.3分辨率31
3.1.4壓縮的有損和無損32
3.2圖像格式33
3.2.1JPEG33
3.2.2GIF36
3.2.3PNG38
3.2.4WebP39
3.2.5SVG41
3.2.6Base6442
3.2.7格式選擇建議43
3.3使用建議43
3.3.1CSSSprite44
3.3.2Web字體46
3.3.3注意display：none的使用47
3.4本章小結48
第4章加載優化49
4.1圖像延遲加載49
4.1.1什麼是延遲加載49
4.1.2實現圖片的延遲加載：傳統方式52
4.1.3實現圖片的延遲加載：Intersection Observer方式55
4.1.4實現圖片的延遲加載：CSS類名方式.56
4.1.5原生的延遲加載支持58
4.2視頻加載59
4.2.1不需要自動播放59
4.2.2視頻代替GIF動畫60
4.3加載注意事項61
4.3.1首屏加載62
4.3.2資源占位63
4.3.3內容加載失敗63
4.3.4圖像解碼延遲64
4.3.5JavaScript是否可用65
4.4資源優先級66
4.4.1優先級66
4.4.2預加載67
4.4.3預連接68
4.4.4預提取68
4.5本章小結69
第5章書寫高性能的代碼71
5.1數據存取71
5.1.1數據存取方式71
5.1.2作用域和作用域鏈72
5.1.3實戰經驗73
5.2流程控制75
5.2.1條件判斷75
5.2.2循環語句79
5.2.3遞歸81
5.3字符串處理84
5.3.1字符串拼接84
5.3.2正則表達式85
5.3.3優化正則表達式87
5.4快速響應88
5.4.1瀏覽器的89
5.4.2異步隊列89
5.5其他建議90
5.5.1避免多重求值90
5.5.2使用位操作91
5.5.3使用原生方法92
5.6本章小結93
第6章構建優化94
6.1壓縮與合並94
6.1.1HTML壓縮94
6.1.2CSS壓縮97
6.1.3JavaScript壓縮與混淆98
6.1.4文件合並99
6.2使用fis3進行前端構建102
6.2.1構建流程102
6.2.2構建實操103
6.3使用webpack進行前端構建105
6.3.1模塊打包工具105
6.3.2安裝建議106
6.3.3配置文件106
6.4webpack的優化性能107
6.4.1盡量與時俱進107
6.4.2減少Loader的執行107
6.4.3確保插件的精簡和可靠108
6.4.4合理配置resolve參數109
6.4.5使用DllPlugin110
6.4.6將單進程轉化為多進程113
6.4.7壓縮打包結果的體積114
6.5本章小結117
第7章渲染優化118
7.1頁面渲染性能118
7.1.1流暢的使用體驗118
7.1.2渲染過程119
7.2JavaScript執行優化120
7.2.1實現動畫效果120
7.2.2恰當使用Web Worker122
7.2.3事件節流和事件防抖124
7.2.4恰當的JavaScript優化126
7.3計算樣式優化128
7.3.1減少要計算素數量128
7.3.2降低選擇器的復雜性129
7.3.3使用BEM規範129
7.4頁面布局與重繪的優化131
7.4.1觸發頁面布局與重繪的操作131
7.4.2避免對樣式的頻繁改動131
7.4.3通過工具對繪制進行評估133
7.4.4降低繪制復雜度136
7.5合成處理137
7.5.1新增圖層137
7.5.2僅與合成相關的動畫屬性137
7.6本章小結138
第8章服務器端渲染139
8.1頁面渲染139
8.1.1頁面渲染的發展139
8.1.2多層次優化方案141
8.2Vue中的服務器端渲染142
8.2.1Vue的SSR基本流程142
8.2.2Vue的SSR項目實例143
8.3React中的服務器端渲染147
8.3.1項目搭建147
8.3.2同構149
8.3.3服務器端渲染的路由設置150
8.3.4結合Redu行狀態管理152
8.3.5通過中間層獲取數據158
8.3.6處理樣式160
8.3.7搜索引擎優化相關技巧162
8.4本章小結165
第9章數據存儲166
9.1數據存儲概覽166
9.1.1數據存儲分類166
9.1.2Cookie168
9.1.3Local Storage和Session Storage169
9.1.4WebSQL170
9.1.5IndexedDB171
9.2通過Chrome開發者工具調試本地存儲173
9.2.1調試Cookie173
9.2.2調試Local Storage和Session Storage174
9.2.3調試IndexedDB175
9.2.4調試WebSQL176
9.3IndexedDB實踐建議177
9.3.1注意平臺兼容性178
9.3.2完善錯誤處理178
9.3.3注意修改、刪除和過期179
9.3.4存儲性能180
9.4Cache Storage180
9.4.1兼容與數據類型181
9.4.2創建緩存並存儲數據181
9.4.3刪除緩存183
9.4.4檢索與查詢183
9.5本章小結185
第10章緩存技術186
10.1HTTP緩存186
10.1.1強制緩存.186
10.1.2協商緩存.188
10.1.3緩存決策.190
10.1.4緩存設置注意事項193
10.2Service Worker緩存194
10.2.1Service Worker概覽194
10.2.2生命周期195
10.2.3本地開發注意事項199
10.2.4高性能加載200
10.3Push緩存202
10.3.1最後一道緩存202
10.3.2Push緩存與預加載203
10.4CDN緩存205
10.4.1CDN概述205
10.4.2應用場景208
10.4.3優化實踐209
10.5本章小結210
第3篇前端性能檢測實踐
第11章性能檢測212
11.1性能檢測概述212
11.1.1如何進行性能檢測213
11.1.2常見的檢測工具214
11.2Lighthouse221
11.2.1使用方式221
11.2.2性能狀況223
11.2.3可訪問性231
11.2.4很好實踐232
11.2.5搜索引擎優化233
11.3Performance面板的使用234
11.3.1使用方式234
11.3.2面板信息235
11.4本章小結239

本書以Web前端性能優化為關注點，不但給出了一套性能分析的思路與評價標準，而且針對影響網站性能的諸多方面分章節進行了詳細介紹。本書內容包括圖像方面的優化，資源加載方面的優化，如何編寫高性能的代碼，打包構建方面的優化，客戶端渲染的優化、服務器端渲染，瀏覽器本地數據存儲，以及緩存技術所帶來的性能優化等，通過對這些內容的講述與分析，逐漸幫助讀者構建起相對完善的前端性能知識體繫。本書同時結合性能檢測與優化實踐，讓讀者在面對實際的性能優化問題時，能夠將理論知識轉化為實踐能力。本書理論與實踐並重，既可以作為前端工程師進階性能優化領域的參考資料，又可以作為前端求職面試人員復習性能相關知識的工具手冊。

田佳奇 編