目錄
第1章 理解Web性能
1.1 理解Web性能
1.1.1 Web性能和用戶體驗
1.1.2 Web瀏覽器如何與Web伺服器通信
1.1.3 Web頁面如何載入
1.2 上手準備
1.2.1 安裝Node.js和Git
1.2.2 下載並運行客戶的網站
1.2.3 模擬網路連接
1.3 檢查客戶網站
1.4 優化客戶網站
1.4.1 縮小資源
1.4.2 使用伺服器壓縮
1.4.3 壓縮圖像
1.5 最終性能測試
1.6 小結
第2章 使用評估工具
2.1 使用Google PageSpeed Insights進行評估
2.1.1 評估網站性能
2.1.2 使用Google Analytics進行批量報告
2.2 使用基於瀏覽器的評估工具
2.3 檢查網路請求
2.3.1 查看計時信息
2.3.2 查看HTTP請求和響應頭
2.4 渲染性能檢查工具
2.4.1 理解瀏覽器如何渲染網頁
2.4.2 使用Google Chrome的Performance面板
2.4.3 識別問題事件：jank是元凶
2.4.4 用JavaScript在時間線中標記點
2.4.5 其他瀏覽器中的渲染分析器
2.5 在Chrome中對JavaScript進行基準測試
2.6 模擬和監控設備
2.6.1 在桌面Web瀏覽器中模擬設備
2.6.2 在Android設備上遠程調試網站
2.6.3 在iOS設備上遠程調試網站
2.7 創建自定義網路節流配置
2.8 小結
第3章 優化CSS
3.1 直入主題，保持DRY
3.1.1 簡寫CSS
3.1.2 使用CSS淺選擇器
3.1.3 挑選淺選擇器
3.1.4 LESS和SASS預編譯器：簡單就是美
3.1.5 不要重複自己
3.1.6 實現DRY
3.1.7 使用csscss查找冗余
3.1.8 分割CSS
3.1.9 自定義框架下載
3.2 移動優先即用戶優先
3.2.1 移動優先與桌面優先
3.2.2 Mobilegeddon演算法
3.2.3 使用Google的移動友好指南
3.2.4 驗證網站的移動友好性
3.3 對CSS進行性能調整
3.3.1 避免使用@import聲明
3.3.2 @import串列請求
3.3.3 並行請求
3.3.4 在中放置CSS
3.3.5 防止無樣式內容閃爍
3.3.6 提高渲染速度
3.3.7 使用更快的選擇器
3.3.8 構建和運行基準測試
3.3.9 檢查基準測試結果
3.3.10 盡可能使用flexbox
3.3.11 對比盒子模型和flexbox樣式
3.3.12 檢查基準測試結果
3.4 使用CSS過渡
3.4.1 使用CSS過渡
3.4.2 觀察CSS過渡性能
3.4.3 使用will-change屬性優化過渡
3.5 小結
第4章 理解關鍵CSS
4.1 關鍵CSS及其解決的問題
4.1.1 理解摺疊
4.1.2 理解渲染阻塞
4.2 關鍵CSS的原理
4.2.1 載入首屏樣式
4.2.2 載入首屏以外內容的樣式
4.3 實現關鍵CSS
4.3.1 配置並運行菜譜網站
4.3.2 識別和分離首屏CSS
4.3.3 載入首屏以外內容的CSS
4.4 權衡收益
4.5 提升可維護性
4.6 多頁網站的注意事項
4.7 小結
第5章 響應式圖像
5.1 為什麼要考慮圖像傳輸
5.2 理解圖像類型及其應用
5.2.1 使用光柵圖像
5.2.2 使用SVG圖像
5.2.3 選擇圖像格式
5.3 CSS中的圖像傳輸
5.3.1 使用媒體查詢在CSS中適配顯示器
5.3.2 通過媒體查詢適配高DPI顯示器
5.3.3 在CSS中使用SVG背景圖像
5.4 在HTML中傳輸圖像
5.4.1 圖像的全局max-width規則
5.4.2 使用srcset
5.4.3 使用元素
5.4.4 使用Picturefill提供polyfill支持
5.4.5 在HTML中使用SVG
5.5 小結
第6章 圖像的進一步處理
6.1 使用圖像雪碧圖
6.1.1 準備工作
6.1.2 生成雪碧圖
6.1.3 使用生成的雪碧圖
6.1.4 使用雪碧圖時的考量
6.1.5 使用Grumpicon回退到光柵圖像雪碧圖
6.2 縮小圖像
6.2.1 使用imagemin優化光柵圖像
6.2.2 優化SVG圖像
6.3 使用WebP編碼圖像
6.3.1 使用imagemin編碼有損WebP圖像
6.3.2 使用imagemin編碼無損WebP圖像
6.3.3 支持不支持WebP的瀏覽器
6.4 懶載入圖像
6.4.1 配置標記
6.4.2 編寫懶載入程序
6.4.3 考慮不支持JavaScript的用戶
6.5 小結
第7章 更快的字體
7.1 明智地使用字體
7.1.1 選擇字體和字體變體
7.1.2 構建你自己的@font-face級聯
7.2 壓縮EOT和TTF字體格式
7.3 取字體子集
7.3.1 手動生成字體子集
7.3.2 使用unicode-range屬性傳輸字體子集
7.4 優化字體載入
7.4.1 理解字體載入的問題
7.4.2 使用CSS font-display屬性
7.4.3 使用字體載入API
7.4.4 使用Font Face Observer作為回退
7.5 小結
第8章 保持JavaScript的簡潔與快速
8.1 影響腳本載入行為
8.1.1 合理放置script元素
8.1.2 使用非同步腳本載入
8.1.3 使用async
8.1.4 在多腳本載入中可靠地使用async
8.2 使用更簡潔的兼容jQuery的替代方案
8.2.1 比較替代方案
8.2.2 探索競品
8.2.3 比較大小
8.2.4 比較性能
8.2.5 實現替代方案
8.2.6 使用Zepto
8.2.7 理解使用Shoestring或Sprint的注意事項
8.3 脫離jQuery編碼
8.3.1 檢查DOM是否準備就緒
8.3.2 選擇元素並綁定事件
8.3.3 使用classList操作元素上的類
8.3.4 讀取和修改元素屬性與內容
8.3.5 使用Fetch API發起AJAX請求
8.3.6 使用Fetch API
8.3.7 Fetch API 的polyfill
8.4 使用requestAnimationFrame設置動畫
8.4.1 requestAnimationFrame一覽
8.4.2 計時器函數驅動的動畫和requestAnimationFrame
8.4.3 比較性能
8.4.4 實現requestAnimationFrame
8.4.5 了解Velocity.js
8.5 小結
第9章 使用Service Worker提升性能
9.1 何為Service Worker
9.2 編寫第一個Service Worker
9.2.1 安裝Service Worker
9.2.2 註冊Service Worker
9.2.3 攔截並緩存網路請求
9.2.4 衡量性能收益
9.2.5 優化網路請求的攔截行為
9.3 更新Service Worker
9.3.1 文件版本控制
9.3.2 清理舊緩存
9.4 小結
第10章 微調資源傳輸
10.1 壓縮資源
10.1.1 遵循壓縮指導原則
10.1.2 使用Brotli壓縮
10.2 緩存資源
10.2.1 理解緩存
10.2.2 制定最佳緩存策略
10.2.3 使緩存資源失效
10.3 使用CDN資源
10.3.1 使用CDN托管資源
10.3.2 CDN發生故障怎麼辦
10.3.3 使用子資源完整性驗證CDN資源
10.4 使用資源提示
10.4.1 使用preconnect資源提示
10.4.2 使用prefetch和preload資源提示
10.5 小結
第11章 HTTP/2未來展望
11.1 理解HTTP/2的必要性
11.1.1 理解HTTP/1中的問題
11.1.2 通過HTTP/2解決常見的HTTP/1問題
11.1.3 在Node中編寫一個簡單的HTTP/2伺服器
11.1.4 觀察收益
11.2 探索HTTP/2對應的優化技術變化
11.2.1 資源粒度與緩存效率
11.2.2 識別HTTP/2的性能反模式
11.3 使用伺服器推送搶先發送資源
11.3.1 理解伺服器推送及其工作原理
11.3.2 使用伺服器推送
11.3.3 測量伺服器推送性能
11.4 同時優化HTTP/1和HTTP/2
11.4.1 HTTP/2伺服器如何處理不支持HTTP/2的瀏�
[