《web性能實戰》是2020年人民郵電出版社出版的圖書，作者是[美] 傑里米·華格納（Jeremy Wagner）。
基本介紹
- 中文名：web性能實戰
- 作者：[美] 傑里米·華格納（Jeremy Wagner）
- 出版社：人民郵電出版社
- 出版時間：2020年6月1日
- ISBN：9787115538321
內容簡介,圖書目錄,作者簡介,
內容簡介
在Web 變得越來越複雜的時代，解決Web 性能問題正當時。本書旨在幫助讀者創建更加快速的網站，內容涵蓋Web 性能的基礎知識、性能評估工具、CSS 最佳化、圖像最佳化、字型最佳化、JavaScript 相關的內容、Brotli 壓縮算法、資源提示、配置快取策略、HTTP/2，等等。
圖書目錄
第1 章 理解Web 性能 1
1.1 理解Web 性能 1
1.1.1 Web 性能和用戶體驗 1
1.1.2 Web 瀏覽器如何與Web 伺服器通信 2
1.1.3 Web 頁面如何載入 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 使用Google PageSpeed Insights 進行評估 20
2.1.1 評估網站性能 20
2.1.2 使用Google Analytics 進行批量報告 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 使用Google Chrome 的Performance 面板 30
2.4.3 識別問題事件：jank 是元兇 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.4 LESS 和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.2 Mobilegeddon 算法 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.3 CSS 中的圖像傳輸 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.3 使用元素 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 使用CSS font-display屬性 168
7.4.3 使用字型載入API 169
7.4.4 使用Font Face Observer作為回退 173
7.5 小結 175
第8 章 保持JavaScript 的簡潔與快速 176
8.1 影響腳本載入行為 176
8.1.1 合理放置script元素 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.2 選擇元素並綁定事件 187
8.3.3 使用classList 操作元素上的類 188
8.3.4 讀取和修改元素屬性與內容 189
8.3.5 使用Fetch API 發起AJAX請求 192
8.3.6 使用Fetch API 192
8.3.7 Fetch API 的polyfill 193
8.4 使用requestAnimationFrame設定動畫 194
8.4.1 requestAnimationFrame一覽 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 章 使用Service Worker 提升性能 200
9.1 何為Service Worker 200
9.2 編寫第一個Service Worker 202
9.2.1 安裝Service Worker 203
9.2.2 註冊Service Worker 203
9.2.3 攔截並快取網路請求 207
9.2.4 衡量性能收益 209
9.2.5 最佳化網路請求的攔截行為 209
9.3 更新Service Worker 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.2 CDN 發生故障怎么辦 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.1 HTTP/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.2 gulp 的工作原理 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
作者簡介
傑里米·華格納（Jeremy Wagner）
Web性能諮詢師、Web前端開發者，在多家機構和大公司積累了十餘年經驗。撰寫過大量Web性能方面的圖書和文章，還經常在各種Web開發會議上發表演講。
