Web前端性能優(yōu)化

第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 體驗與傳播  3

1.3 性能評估模型  4

1.3.1 響應 4

1.3.2 動畫 5

1.3.3 空閑 5

1.3.4 加載 5

1.4 性能優(yōu)化的步驟  6

1.4.1 性能測量   6

1.4.2 生命周期   7

1.4.3 優(yōu)化方案   8

1.5 本章小結(jié). 9

第2 章 前端頁面的生命周期  10

2.1 一道前端面試題   10

2.2 網(wǎng)絡請求線程開啟   11

2.2.1 進程與線程. 12

2.2.2 單進程瀏覽器  12

2.2.3 多進程瀏覽器  13

2.3 建立HTTP 請求   15

2.3.1 DNS 解析   15

2.3.2 網(wǎng)絡模型   16

2.3.3 TCP 連接   17

目錄∣VII

2.4 前后端的交互   19

2.4.1 反向代理服務器  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)建對象模型  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 壓縮的有損和無損    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 實現(xiàn)圖片的延遲加載：傳統(tǒng)方式  52

4.1.3 實現(xiàn)圖片的延遲加載：Intersection Observer 方式  55

4.1.4 實現(xiàn)圖片的延遲加載：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 內(nèi)容加載失敗  63

4.3.4 圖像解碼延遲  64

4.3.5 JavaScript 是否可用    65

4.4 資源優(yōu)先級   66

4.4.1 優(yōu)先級  66

4.4.2 預加載  67

4.4.3 預連接  68

4.4.4 預提取  68

4.5 本章小結(jié) 69

第5 章 書寫高性能的代碼  71

5.1 數(shù)據(jù)存取 71

5.1.1 數(shù)據(jù)存取方式  71

5.1.2 作用域和作用域鏈    72

5.1.3 實戰(zhàn)經(jīng)驗   73

5.2 流程控制 75

5.2.1 條件判斷   75

5.2.2 循環(huán)語句   79

5.2.3 遞歸  ... 81

5.3 字符串處理   84

5.3.1 字符串拼接. 84

5.3.2 正則表達式. 85

5.3.3 優(yōu)化正則表達式  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 本章小結(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 進行前端構(gòu)建  102

6.2.1 構(gòu)建流程   102

6.2.2 構(gòu)建實操   103

6.3 使用webpack 進行前端構(gòu)建   105

6.3.1 模塊打包工具    105

6.3.2 安裝建議   106

6.3.3 配置文件   106

6.4 webpack 的優(yōu)化性能  107

6.4.1 盡量與時俱進    107

6.4.2 減少Loader 的執(zhí)行 107

6.4.3 確保插件的精簡和可靠 108

6.4.4 合理配置resolve 參數(shù)   109

6.4.5 使用DllPlugin    110

6.4.6 將單進程轉(zhuǎn)化為多進程 113

6.4.7 壓縮打包結(jié)果的體積   114

6.5 本章小結(jié) 117

第7 章 渲染優(yōu)化 118

7.1 頁面渲染性能  118

7.1.1 流暢的使用體驗  118

7.1.2 渲染過程   119

7.2 JavaScript 執(zhí)行優(yōu)化  120

7.2.1 實現(xiàn)動畫效果    120

7.2.2 恰當使用Web Worker   122

7.2.3 事件節(jié)流和事件防抖   124

7.2.4 恰當?shù)腏avaScript 優(yōu)化 126

7.3 計算樣式優(yōu)化  128

7.3.1 減少要計算樣式的元素數(shù)量  128

7.3.2 降低選擇器的復雜性   129

7.3.3 使用BEM 規(guī)范  129

7.4 頁面布局與重繪的優(yōu)化  131

7.4.1 觸發(fā)頁面布局與重繪的操作  131

7.4.2 避免對樣式的頻繁改動 131

7.4.3 通過工具對繪制進行評估   133

7.4.4 降低繪制復雜度  136

7.5 合成處理   137

7.5.1 新增圖層   137

7.5.2 僅與合成相關(guān)的動畫屬性   137

7.6 本章小結(jié)   138

第8 章 服務器端渲染  139

8.1 頁面渲染   139

8.1.1 頁面渲染的發(fā)展  139

8.1.2 多層次優(yōu)化方案  141

8.2 Vue 中的服務器端渲染  142

8.2.1 Vue 的SSR 基本流程   142

8.2.2 Vue 的SSR 項目實例   143

8.3 React 中的服務器端渲染    147

8.3.1 項目搭建   147

8.3.2 同構(gòu)   149

8.3.3 服務器端渲染的路由設置   150

8.3.4 結(jié)合Redux 進行狀態(tài)管理   152

8.3.5 通過中間層獲取數(shù)據(jù)   158

8.3.6 處理樣式   160

8.3.7 搜索引擎優(yōu)化相關(guān)技巧 162

8.4 本章小結(jié)   165

第9 章 數(shù)據(jù)存儲   166

9.1 數(shù)據(jù)存儲概覽  166

9.1.1 數(shù)據(jù)存儲分類    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 通過Chrome 開發(fā)者工具調(diào)試本地存儲  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 實踐建議  177

9.3.1 注意平臺兼容性  178

9.3.2 完善錯誤處理    178

9.3.3 注意修改、刪除和過期 179

9.3.4 存儲性能   180

9.4 Cache Storage  180

9.4.1 兼容與數(shù)據(jù)類型  181

9.4.2 創(chuàng)建緩存并存儲數(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 強制緩存. 186

10.1.2 協(xié)商緩存. 188

10.1.3 緩存決策. 190

10.1.4 緩存設置注意事項 193

XII∣Web 前端性能優(yōu)化

10.2 Service Worker 緩存    194

10.2.1 Service Worker 概覽   194

10.2.2 生命周期. 195

10.2.3 本地開發(fā)注意事項 199

10.2.4 高性能加載  200

10.3 Push 緩存  ... 202

10.3.1 最后一道緩存  202

10.3.2 Push 緩存與預加載   203

10.4 CDN 緩存  ... 205

10.4.1 CDN 概述  205

10.4.2 應用場景. 208

10.4.3 優(yōu)化實踐. 209

10.5 本章小結(jié)   210

第3 篇 前端性能檢測實踐

第11 章 性能檢測   212

11.1 性能檢測概述   212

11.1.1 如何進行性能檢測 213

11.1.2 常見的檢測工具    214

11.2 Lighthouse  221

11.2.1 使用方式  221

11.2.2 性能狀況  223

11.2.3 可訪問性  231

11.2.4 最佳實踐  232

11.2.5 搜索引擎優(yōu)化  233

11.3 Performance 面板的使用  234

11.3.1 使用方式  234

11.3.2 面板信息  235

11.4 本章小結(jié)   239