Web 前端性能優化

田佳奇，5年前端工作經驗。
目前就職於深圳有贊信息技術有限公司，高級前端開發工程師，主要負責有讚美業SaaS系統在PC、H5和小程序多端上的開發，以及持續集成和性能優化相關工作，曾就職於華為信息技術有限公司，前端開發工程師，負責大數據可視化平台的前端開發。

封面
前摺頁
版權信息
內容簡介
前言

第1篇前端性能優化概述
第1章什麼是性能優化
1.1性能的起因
1.2性能的影響
1.2.1用戶的留存
1.2.2網站的轉化率
1.2.3體驗與傳播
1.3性能評估模型
1.3.1響應
1.3.2動畫
1.3.3空閒
1.3.4加載
1.4性能優化的步驟
1.4.1性能測量
1.4.2生命週期
1.4.3優化方案
1.5本章小結

第2章前端頁面的生命週期
2.1一道前端面試題
2.2網絡請求線程開啟
2.2.1進程與線程
2.2.2單進程瀏覽器
2.2.3多進程瀏覽器
2.3建立HTTP請求
2.3.1 DNS解析
2.3.2網絡模型
2.3.3 TCP連接
2.4前後端的交互
2.4.1反向代理服務器
2.4.2後端處理流程
2.4.3 HTTP相關協議特性
2.4.4瀏覽器緩存
2.5關鍵渲染路徑
2.5.1構建對像模型
2.5.2渲染繪製
2.6本章小結

第2篇典型模塊的性能優化
第3章圖像優化
3.1圖像基礎
3.1.1圖像是否必需
3.1.2矢量圖和位圖
3.1. 3分辨率
3.1.4壓縮的有損和無損
3.2圖像格式
3.2.1 JPEG
3.2.2 GIF
3.2.3 PNG
3.2.4 WebP
3.2.5 SVG
3.2.6 Base64
3.2.7格式選擇建議
3.3使用建議
3.3. 1 CSS Sprite
3.3.2 Web字體
3.3.3注意display：none的使用
3.4本章小結

第4章加載優化
4.1圖像延遲加載
4.1.1什麼是延遲加載
4.1.2實現圖片的延遲加載：傳統方式
4.1.3實現圖片的延遲加載：Intersection Observer方式
4.1.4實現圖片的延遲加載：CSS類名方式
4.1.5原生的延遲加載支持
4.2視頻加載
4.2.1不需要自動播放
4.2.2視頻代替GIF動畫
4.3加載注意事項
4.3.1首屏加載
4.3.2資源佔位
4.3.3內容加載失敗
4.3.4圖像解碼延遲
4.3.5 JavaScript是否可用
4.4資源優先級
4.4.1優先級
4.4.2預加載
4.4.3預連接
4.4.4預提取
4.5本章小結

第5章書寫高性能的代碼
5.1數據存取
5.1.1數據存取方式
5.1.2作用域和作用域鏈
5.1.3實戰經驗
5.2流程控制
5.2.1條件判斷
5.2.2循環語句
5.2.3遞歸
5.3字符串處理
5.3.1字符串拼接
5.3.2正則表達式
5.3.3優化正則表達式
5.4快速響應
5.4.1瀏覽器的限制
5.4.2異步隊列
5.5其他建議
5.5.1避免多重求值
5.5.2使用位操作
5.5.3使用原生方法
5.6本章小結

第6章構建優化
6.1壓縮與合併
6.1.1 HTML壓縮
6.1.2 CSS壓縮
6.1.3 JavaScript壓縮與混淆
6.1.4文件合併
6.2使用fis3進行前端構建
6.2.1構建流程
6.2.2構建實操
6.3使用webpack進行前端構建
6.3.1模塊打包工具
6.3.2安裝建議
6.3.3配置文件
6.4 webpack的優化性能
6.4.1盡量與時俱進
6.4.2減少Loader的執行
6.4.3確保插件的精簡和可靠
6.4.4合理配置resolve參數
6.4.5使用DllPlugin
6.4.6將單進程轉化為多進程
6.4.7壓縮打包結果的體積
6.5本章小結

第7章渲染優化
7.1頁面渲染性能
7.1.1流暢的使用體驗
7.1.2渲染過程
7.2 JavaScript執行優化
7.2. 1實現動畫效果
7.2.2恰當使用Web Worker
7.2.3事件節流和事件防抖
7.2.4恰當的JavaScript優化
7.3計算樣式優化
7.3.1減少要計算樣式的元素數量
7.3.2降低選擇器的複雜性
7.3.3使用BEM規範
7.4頁面佈局與重繪的優化
7.4.1觸發頁面佈局與重繪的操作
7.4.2避免對樣式的頻繁改動
7.4.3通過工具對繪製進行評估
7.4.4降低繪製複雜度
7.5合成處理
7.5.1新增圖層
7.5.2僅與合成相關的動畫屬性
7.6本章小結

第8章服務器端渲染
8.1頁面渲染
8.1.1頁面渲染的發展
8.1. 2多層次優化方案
8.2 Vue中的服務器端渲染
8.2.1 Vue的SSR基本流程
8.2.2 Vue的SSR項目實例
8.3 React中的服務器端渲染
8.3.1項目搭建
8.3.2同構
8.3.3服務器端渲染的路由設置
8.3.4結合Redux進行狀態管理
8.3.5通過中間層獲取數據
8.3.6處理樣式
8.3.7搜索引擎優化相關技巧
8.4本章小結

第9章數據存儲
9.1數據存儲概覽
9.1.1數據存儲分類
9.1.2 Cookie
9.1.3 Local Storage和Session Storage
9.1.4 Web SQL
9.1.5 IndexedDB
9.2通過Chrome開發者工具調試本地存儲
9.2.1調試Cookie
9.2.2調試Local Storage和Session Storage
9.2.3調試IndexedDB
9.2.4調試Web SQL
9.3 IndexedDB實踐建議
9.3.1注意平台兼容性
9.3.2完善錯誤處理
9.3.3注意修改、刪除和過期
9.3.4存儲性能
9.4 Cache Storage
9.4.1兼容與數據類型
9.4.2創建緩存並存儲數據
9.4.3刪除緩存
9.4.4檢索與查詢
9.5本章小結

第10章緩存技術
10.1 HTTP緩存
10.1.1強制緩存
10.1.2協商緩存
10.1.3緩存決策
10.1.4緩存設置注意事項
10.2 Service Worker緩存
10.2.1 Service Worker概覽
10.2.2生命週期
10.2.3本地開發注意事項
10.2.4高性能加載
10.3 Push緩存
10.3.1最後一道緩存
10.3.2 Push緩存與預加載
10.4 CDN緩存
10.4.1 CDN概述
10.4.2應用場景
10.4.3優化實踐
10.5本章小結

第3篇前端性能檢測實踐
第11章性能檢測
11.1性能檢測概述
11.1.1如何進行性能檢測
11.1.2常見的檢測工具
11.2 Lighthouse
11.2.1使用方式
11.2.2性能狀況
11.2.3可訪問性
11.2.4最佳實踐
11.2.5搜索引擎優化
11.3 Performance面板的使用
11.3.1使用方式
11.3 .2面板信息
11.4本章小結
後摺頁
封底