●第1章理解Web性能 1
1.1理解Web性能 1
1.1.1Web性能和用戶體驗 1
1.1.2Web瀏覽器如何與Web服務器通信 2
1.1.3Web頁面如何加載 4
1.2上手準備 5
1.2.1安裝Node.js和Git 6
1.2.2下載並運行客戶的網站 6
1.2.3模擬網絡連接 7
1.3檢查客戶網站 8
1.4優化客戶網站 10
1.4.1縮小資源 11
1.4.2使用服務器壓縮 13
1.4.3壓縮圖像 16
1.5最終性能測試 18
1.6小結 19
第2章使用評估工具 20
2.1使用GooglePageSpeedInsights進行評估 20
2.1.1評估網站性能 20
2.1.2使用GoogleAnalytics進行批量報告 23
2.2使用基於瀏覽器的評估工具 24
2.3檢查網絡請求 25
2.3.1查看計時信息 25
2.3.2查看HTTP請求和響應頭 27
2.4渲染性能檢查工具 29
2.4.1理解瀏覽器如何渲染網頁 29
2.4.2使用GoogleChrome的Performance面板 30
2.4.3識別問題事件：ja兇 32
2.4.4用JavaScript在時間線中標記點 37
2.4.5其他瀏覽器中的渲染分析器 38
2.5在Chrome中對JavaScript進行基準測試 39
2.6模擬和監控設備 40
2.6.1在桌面Web瀏覽器中模擬設備 41
2.6.2在Android設備上遠程調試網站 42
2.6.3在iOS設備上遠程調試網站 43
2.7創建自定義網絡節流配置 44
2.8小結 45
第3章優化CSS 47
3.1直入主題，保持DRY 47
3.1.1簡寫CSS 47
3.1.2使用CSS淺選擇器 50
3.1.3挑選淺選擇器 51
3.1.4LESS和SASS預編譯器：簡單就是美 52
3.1.5不要重復自己 53
3.1.6實現DRY 53
3.1.7使用csscss查找冗餘 54
3.1.8分割CSS 56
3.1.9自定義框架下載 57
3.2移動優先即用戶優先 58
3.2.1移動優先與桌面優先 58
3.2.2Mobilegeddon算法 61
3.2.3使用Google的移動友好指南 62
3.2.4驗證網站的移動友好性 63
3.3對CSS進行性能調整 63
3.3.1避免使用@import聲明 63
3.3.2@import串行請求 64
3.3.3並行請求 64
3.3.4在中放置CSS 65
3.3.5防止無樣式內容閃爍 65
3.3.6提高渲染速度 66
3.3.7使用更快的選擇器 66
3.3.8構建和運行基準測試 67
3.3.9檢查基準測試結果 68
3.3.10盡可能使用flexbox 69
3.3.11對比盒子模型和flexbox樣式 69
3.3.12檢查基準測試結果 70
3.4使用CSS過渡 71
3.4.1使用CSS過渡 71
3.4.2觀察CSS過渡性能 73
3.4.3使用will-change屬性優化過渡 74
3.5小結 75
第4章理解關鍵CSS 76
4.1關鍵CSS及其解決的問題 76
4.1.1理解折疊 76
4.1.2理解渲染阻塞 77
4.2關鍵CSS的原理 78
4.2.1加載首屏樣式 79
4.2.2加載首屏以外內容的樣式 79
4.3實現關鍵CSS 80
4.3.1配置並運行菜譜網站 81
4.3.2識別和分離首屏CSS 82
4.3.3加載首屏以外內容的CSS 88
4.4權衡收益 89
4.5提升可維護性 91
4.6多頁網站的注意事項 91
4.7小結 92
第5章響應式圖像 94
5.1為什麼要考慮圖像傳輸 94
5.2理解圖像類型及其應用 96
5.2.1使用光柵圖像 96
5.2.2使用SVG圖像 99
5.2.3選擇圖像格式 100
5.3CSS中的圖像傳輸 101
5.3.1使用媒體查詢在CSS中適配顯示器 101
5.3.2通過媒體查詢適配高DPI顯示器 104
5.3.3在CSS中使用SVG背景圖像 106
5.4在HTML中傳輸圖像 106
5.4.1圖像的全局max-width規則 107
5.4.2使用srcset 107
5.4.素 110
5.4.4使用Picturefill提供polyfill支持 114
5.4.5在HTML中使用SVG 116
5.5小結 117
第6章圖像的進一步處理 118
6.1使用圖像雪碧圖 118
6.1.1準備工作 119
6.1.2生成雪碧圖 119
6.1.3使用生成的雪碧圖 121
6.1.4使用雪碧圖時的考量 122
6.1.5使用Grumpicon回退到光柵圖像雪碧圖 123
6.2縮小圖像 124
6.2.1使用imagemin優化光柵圖像 125
6.2.2優化SVG圖像 129
6.3使用WebP編碼圖像 131
6.3.1使用imagemin編碼有損WebP圖像 132
6.3.2使用imagemin編碼無損WebP圖像 133
6.3.3支持不支持WebP的瀏覽器 134
6.4懶加載圖像 136
6.4.1配置標記 137
6.4.2編寫懶加載程序 138
6.4.3考慮不支持JavaScript的用戶 144
6.5小結 146
第7章更快的字體 148
7.1明智地使用字體 149
7.1.1選擇字體和字體變體 149
7.1.2構建你自己的@font-face級聯 151
7.2壓縮EOT和TTF字體格式 154
7.3取字體子集 156
7.3.1手動生成字體子集 156
7.3.2使用unicode-range屬性傳輸字體子集 160
7.4優化字體加載 166
7.4.1理解字體加載的問題 166
7.4.2使用CSSfont-display屬性 168
7.4.3使用字體加載API 169
7.4.4使用FontFaceObserver作為回退 173
7.5小結 175
第8章保持JavaScript的簡潔與快速 176
8.1影響腳本加載行為 176
8.1.1合理放置scr素 177
8.1.2使用異步腳本加載 178
8.1.3使用async 178
8.1.4在多腳本加載中可靠地使用async 180
8.2使用更簡潔的兼容jQuery的替代方案 182
8.2.1比較替代方案 182
8.2.2探索競品 182
8.2.3比較大小 182
8.2.4比較性能 183
8.2.5實現替代方案 185
8.2.6使用Zepto 185
8.2.7理解使用Shoestring或Sprint的注意事項 185
8.3脫離jQuery編碼 186
8.3.1檢查DOM是否準備就緒 186
8.3.素並綁定事件 187
8.3.3使用classLis素上的類 188
8.3.4讀取素屬性與內容 189
8.3.5使用FetchAPI發起AJAX請求 192
8.3.6使用FetchAPI 192
8.3.7FetchAPI的polyfill 193
8.4使用requestAnimationFrame設置動畫 194
8.4.1requestAnimationFrame一覽 194
8.4.2計時器函數驅動的動畫和requestAnimationFrame 194
8.4.3比較性能 195
8.4.4實現requestAnimationFrame 196
8.4.5了解Velocity.js 198
8.5小結 199
第9章使用ServiceWorker提升性能 200
9.1何為ServiceWorker 200
9.2編寫第一個ServiceWorker 202
9.2.1安裝ServiceWorker 203
9.2.2注冊ServiceWorker 203
9.2.3攔截並緩存網絡請求 207
9.2.4衡量性能收益 209
9.2.5優化網絡請求的攔截行為 209
9.3更新ServiceWorker 212
9.3.1文件版本控制 212
9.3.2清理舊緩存 214
9.4小結 215
第10章微調資源傳輸 217
10.1壓縮資源 217
10.1.1遵循壓縮指導原則 218
10.1.2使用Brotli壓縮 221
10.2緩存資源 225
10.2.1理解緩存 225
10.2.2制定很好緩存策略 230
10.2.3使緩存資源失效 233
10.3使用CDN資源 234
10.3.1使用CDN托管資源 234
10.3.2CDN發生故障怎麼辦 236
10.3.3使用子資源完整性驗證CDN資源 237
10.4使用資源提示 239
10.4.1使用preconnect資源提示 239
10.4.2使用prefetch和preload資源提示 241
10.5小結 243
第11章HTTP/2未來展望 245
11.1理解HTTP/2的必要性 245
11.1.1理解HTTP/1中的問題 246
11.1.2通過HTTP/2解決常見的HTTP/1問題 248
11.1.3在Node中編寫一個簡單的HTTP/2服務器 251
11.1.4觀察收益 253
11.2探索HTTP/2對應的優化技術變化 255
11.2.1資源粒度與緩存效率 255
11.2.2識別HTTP/2的性能反模式 256
11.3使用服務器推送搶先發送資源 257
11.3.1理解服務器推送及其工作原理 258
11.3.2使用服務器推送 258
11.3.3測量服務器推送性能 261
11.4同時優化HTTP/1和HTTP/2 262
11.4.1HTTP/2服務器如何處理不支持HTTP/2的瀏覽器 262
11.4.2劃分用戶 263
11.4.3根據瀏覽器功能提供資源 264
11.5小結 269
第12章使用gulp自動化優化任務 270
12.1關於gulp 270
12.1.1為什麼要使用構建繫統 271
12.1.2gulp的工作原理 272
12.2奠定基礎 273
12.2.1組織項目文件夾 273
12.2.2安裝gulp及其插件 274
12.3編寫gulp任務 277
12.3.1剖析gulp任務 277
12.3.2編寫核心任務 279
12.3.3編寫實用程序任務 285
12.4深入理解gulp插件 288
12.5小結 289
附錄A工具參考 290
附錄B常用jQuery功能的原生等價實現 295
