|
關于我們
 書單推薦 新書推薦 |
前端性能揭秘 
定 價：100 元
9 7 4 8 4 7 2 1 4 2 0 1 7 讀者對象:初級和高級前端工程師，或有興趣了解 Web 性能的工程師。 
本書主要介紹用于指導前端性能優(yōu)化工作的通用優(yōu)化方法，從網(wǎng)絡、瀏覽器、構建工具、跨端技術和CDN 等方面介紹不同技術、系統(tǒng)對性能的影響，同時幫助讀者了解如何有效優(yōu)化性能。本書從性能的度量、分析和實驗這三個方面開始介紹。首先介紹性能優(yōu)化的一些通用方法，然后將性能作為一個切面幫助讀者了解與前端技術棧和性能有關的知識。從這個切面觀察，這些系統(tǒng)的工作原理等知識被賦予了另外一層意義，通過這種聯(lián)系把工作原理真正運用到工作中，在性能優(yōu)化方面發(fā)揮重要作用。本書面向的讀者為具有一定經(jīng)驗的 Web 開發(fā)工程師，以及對前端開發(fā)或 Web 開發(fā)有一定了解的開發(fā)人員。同時，假定讀者能夠進行簡單的網(wǎng)頁開發(fā)，并且具備相關的基礎知識。
佘錦鑫，花名當軒。畢業(yè)于江南大學理學院，阿里巴巴前前端技術專家，曾負責Alibaba.com海外版性能優(yōu)化，講師、開源愛好者。現(xiàn)就職于網(wǎng)易云音樂，對Web性能、跨端、可視化搭建等領域有較深入的理解。
第 1 篇 從 Vite 起步
第 1 章 從實踐開始 ··························.2 1.1 Hello World ···························.2 現(xiàn)在開始 ··························.2 使用 DevTools ····················.4 第一個優(yōu)化 ·······················.6 1.2 現(xiàn)實開發(fā)的例子 ······················.7 設置開發(fā)環(huán)境 ·····················.7 Vite ································.8 vite build ··························.9 進一步優(yōu)化 ·····················.11 引入 antd ························.11 按需引入 ························.13 動態(tài) import ·····················.14 1.3 小結 ································.15 第 2 篇 性能優(yōu)化方法論 第 2 章 度量 ································.18 2.1 科學的方法 ·························.19 從一個客戶反饋說起 ··········.19 不度量性能，就無法優(yōu)化 性能 ······························.19 真實的用戶端性能 ·············.20 2.2 初識 Performance API ··············.21 performance.now()方法 ·········.21 構建首屏指標 ···················.23 2.3 均值、分位數(shù)和秒開率 ············.23 均值 ·····························.24 分位數(shù) ···························.25 秒開率 ···························.26 如何選擇合適的統(tǒng)計指標 ·····.26 2.4 度量首屏 ···························.27 FP ································.27 FCP ······························.27 FMP ·····························.28 如何度量 FMP ··················.28 選定并度量首屏 ················.30 2.5 度量流暢度 ·························.30 度量流暢度的指標 ·············.31 可視化工具 ·····················.31 用戶端度量 ·····················.32 2.6 Core Web Vitals ····················.34 LCP ······························.34 FID ·······························.38 CLS ······························.39 2.6 小結 ·································.41 第 3 章 分析 ································.42 3.1 分析方法 ···························.43 確定目標 ························.43 收集數(shù)據(jù) ························.43 清洗數(shù)據(jù) ························.44 統(tǒng)計值分析 ·····················.44 時序分析 ························.45 維度分析 ························.46 相關性分析 ·····················.48 3.2 常用的過程指標 ····················.48 TTFB ····························.49 DOMReady 和 Load ············.50 3.3 Performance API 詳解 ··············.51 Navigation Timing API ·········.51 Peformance Entry API ··········.53 Resource Timing ················.54 Navigation Timing Level 2 ·····.55 Paint Timing ····················.56 User Timing ·····················.56 3.4 分階段性能分析 ···················.58 常用的指標 ·····················.58 其他值得分析的指標 ··········.59 3.5 小結 ································.59 第 4 章 實驗 ································.60 4.1 優(yōu)化不是照搬軍規(guī) ·················.61 時代在發(fā)展 ·····················.61 優(yōu)化的木桶效應明顯 ··········.62 用戶環(huán)境差異大 ················.62 性能實驗 ························.62 4.2 用實驗驗證優(yōu)化 ···················.63 混沌問題 ························.64 設計實驗 ························.64 分桶 ·····························.65 上報和分析數(shù)據(jù) ················.68 A/B Test 背后的數(shù)學 ···········.68 結論不重要，重要的是方法 ··.69 4.3 用實驗改進優(yōu)化 ···················.69 建立模型 ························.69 實驗修正 ························.70 4.4 小結 ································.71 第 5 章 工具 ································.72 5.1 DevTools ···························.73 Network 面板 ···················.73 Performance 面板 ···············.76 5.2 WebPageTest ·······················.81 發(fā)起測試 ························.82 報告 ······························.83 Waterfall 視圖 ··················.83 5.3 小結 ································.87 第 3 篇 網(wǎng)絡協(xié)議與性能 第 6 章 TTFB 為什么這么長 ··············.90 6.1 TTFB 的合理值 ····················.91 精確定義 ························.92 RTT ······························.92 RTT 一般需要多久 ·············.93 TTFB 的構成····················.93 實驗環(huán)境驗證 ···················.94 6.2 如何優(yōu)化 TTFB ····················.95 減少請求的傳輸量 ·············.96 減少服務器端的處理時間 ·····.96 減少 RTT ························.98 TTFB 的值越小越好嗎 ·········.98 6.3 小結 ·································.99 第 7 章 建立連接為什么這么慢 ·········.100 7.1 建立連接應該耗時多久 ···········.101 TCP 協(xié)議 ·······················.101 建立連接需要多少個 RTT ····.101 抓包驗證 ·······················.102 7.2 如何優(yōu)化建立連接的耗時 ········.103 減少物理距離 ··················.103 preconnect ······················.103 復用連接 ·······················.103 域名收攏 ·······················.104 TCP Fast Open ·················.104 QUIC 和 HTTP/3 ··············.104 7.3 小結 ·······························.105 第 8 章 Fetch 之前瀏覽器在干什么 ····.106 8.1 重定向 ·····························.107 HTML 重定向 ·················.109 有哪些重定向 ·················.109 8.2 瀏覽器打開耗時 ··················.112 初始化標簽頁的時間 ·········.112 unload 的耗時 ··················.112 8.3 如何優(yōu)化 beforeFetch 耗時 ·······.114 重定向邏輯前置 ···············.115 合并重定向 ····················.115 避免使用短鏈 ·················.116 使用 beforeFetch 度量和 分析 ····························.116 8.4 小結 ·······························.117 第 9 章 HTTPS 協(xié)議比 HTTP 協(xié)議 更慢嗎 ····························.118 9.1 HTTPS 協(xié)議為什么安全 ··········.119 對稱加密和非對稱加密 ·······.119 SSL/TLS 的實現(xiàn) ···············.120 SSL/TLS 握手 ·················.122 TLS False Start ·················.124 TLS 1.3 ·························.124 9.2 HTTPS 協(xié)議如何吊銷證書 ········.125 CRL ·····························.125 OCSP ···························.126 OCSP Stapling ·················.126 瀏覽器支持的情況 ············.126 證書類型 ·······················.127 證書驗證機制對性能的影響 ···.129 9.3 HTTPS 協(xié)議更慢嗎 ···············.129 確保證書鏈完整 ···············.129 啟用 TLS 1.3 ···················.129 不濫用 EV 證書 ···············.130 開啟 OSCP Stapling ···········.130 9.4 小結 ································.130 第 10 章 HTTP/2、HTTP/3 和性能 ·····.131 10.1 HTTP/2 和性能 ···················.131 連接復用為什么不生效 ······.131 頭部壓縮對我們有什么影響 ··.137 為什么沒有廣泛使用 Server Push ···························.140 10.2 為什么還需要 HTTP/3 ···········.144 HTTP/2 存在什么問題 ·······.145 HTTP/3 如何解決問題 ·······.146 10.3 小結 ······························.148 第 11 章 壓縮和緩存 ·····················.150 11.1 傳輸速度和壓縮速度如何兼得 ···.151 Content-Encoding ·············.151 gzip 壓縮和 br 壓縮 ··········.152 實時壓縮 ······················.152 離線壓縮 ······················.153 如何優(yōu)化傳輸性能 ···········.154 11.2 HTTP 緩存什么時候會失效 ·····.154 緩存不僅僅是瀏覽器的 事情 ···························.154 緩存 Header ···················.154 11.3 小結 ······························.157 第 4 篇 瀏覽器與性能 第 12 章 瀏覽器和性能 ···················.160 12.1 第一次渲染時都發(fā)生了什么 ····.161 最小的渲染路徑 ··············.162 盡快返回 HTML ··············.167 減少資源的阻塞 ··············.167 12.2 為什么 DOM 操作很慢 ··········.168 幀 ··································.168 重排 ·······························.169 重繪 ·······························.170 訪問 DOM 屬性 ················.170 如何優(yōu)化 DOM 操作 ··········.171 12.3 小結 ······························.172 第 13 章 異步任務和性能 ················.173 13.1 事件循環(huán)機制 ····················.174 為什么要有事件循環(huán) ········.174 多線程阻塞模型 ··············.174 事件循環(huán) ······················.175 13.2 宏任務和微任務 ·················.176 13.3 Promise 的 polyfill 性能 ··········.178 如何正確實現(xiàn) Promise ·······.178 13.4 requestAnimationFrame ··········.180 13.5 小結 ······························.181 第 14 章 內(nèi)存為什么會影響性能 ········.182 14.1 內(nèi)存 ······························.182 內(nèi)存管理 ·························.183 14.2 內(nèi)存泄漏 ·························.188 內(nèi)存泄漏和性能 ··············.188 常見的導致內(nèi)存泄漏的原因 ··.188 內(nèi)存泄漏問題的診斷工具 ···.189 14.3 小結 ······························.191 第 15 章 使用 ServiceWorker 改善 性能 ······························.193 15.1 ServiceWorker 概述 ··············.194 AppCache······················.194 ServiceWorker·················.195 ServiceWorker 能做什么 ·····.195 15.2 使用 ServiceWorker 進行緩存 ···.196 Cache API ·····················.196 IndexDB ·······················.201 控制緩存的 Cache Key ······.201 更加靈活的緩存更新策略 ···.203 15.3 API 提前加載 ····················.204 15.4 ServiceWorker 冷啟動 ···········.205 開啟 Navigation Preload ·····.206 消費 Navigation Preload ·····.206 15.5 小結 ······························.207 第 16 章 字體對性能的影響 ·············.208 16.1 字體導致的布局偏移 ············.208 如何定位布局偏移 ···········.208 16.2 如何避免字體帶來的布局偏移 ···.210 如何盡快加載字體 ···········.211 字體文件的格式 ··············.211 字體的加載 ···················.212 預加載字體 ···················.213 裁剪字體的大小 ··············.214 16.3 小結 ······························.214 第 5 篇 前端工程與性能 第 17 章 構建工具和性能 ················.218 17.1 為什么需要打包 ·················.219 CommonJS ····················.220 AMD ···························.220 CMD ···························.221 異步模塊加載器 ··············.222 依賴加載優(yōu)化 ················.223 模塊打包器 ···················.224 ES Module ····················.225 17.2 構建工具可以做什么 ············.226 構建工具和構建優(yōu)化 ········.227 為什么要優(yōu)化打包體積 ·····.227 Bundle 分析 ···················.228 Tree Shaking ··················.229 Scope Hoisting ················.231 Code Splitting ·················.233 代碼壓縮 ······················.234 Vite 和 Bundleless ············.237 17.3 小結 ······························.237 第 18 章 服務器端渲染和性能 ··········.239 18.1 SSR 和同構 ······················.241 18.2 SSR 的性能優(yōu)化 ·················.241 緩存 ·······························.242 數(shù)據(jù)預取 ·························.245 按需渲染 ·························.245 流式渲染 ·························.246 18.3 小結 ······························.246 第 6 篇 跨端技術與 CDN 第 19 章 WebView 和性能 ···············.248 19.1 WebView 和 Native 的區(qū)別 ······.249 LayoutInflater ·················.249 加載 XML 的具體過程 ······.250 Measure ························.250 Layout ·························.251 Paint ···························.252 Surface ·························.253 SurfaceFlinger ·················.253 差異 ····························.253 19.2 WebView 的通信成本 ···········.254 JavaScript 調(diào)用 Native ········.254 Native 調(diào)用 JavaScript ········.258 雙向通信 ······················.258 通信對性能的影響 ···········.259 減少通信數(shù)據(jù)量 ··············.259 避免頻繁通信 ·················.259 19.3 React Native 的懶加載有何 不同 ······························.260 Web 實現(xiàn) ·····················.260 基于滾動容器的懶加載 ·····.260 基于位置獲取的懶加載 ·····.262 虛擬列表 ······················.263 19.4 React Native 如何減小打包 體積 ······························.265 Metro ··························.265 度量 ···························.266 分析 ···························.266 手動 Tree Shaking ············.267 利用 Babel 插件進行優(yōu)化 ···.269 體積和性能的關系 ···········.271 19.5 API 并行請求 ····················.271 發(fā)起請求 ·························.272 請求攔截 ·························.273 一致性檢驗 ······················.274 命中率分析 ······················.274 19.6 小結 ······························.274 第 20 章 CDN 和性能 ····················.275 20.1 什么是 CDN ······················.275 解析 ·······························.276 邊緣節(jié)點 ·························.276 回源 ·······························.277 緩存策略 ·························.277 20.2 如何提升緩存命中率 ············.278 如何在端側(cè)統(tǒng)計緩存命中的 情況 ····························.278 減少緩存分裂 ·················.279 緩存忽略動態(tài)參數(shù) ···········.279 歸一化 Vary Header ··········.280 長效緩存 ······················.280 20.3 動態(tài)加速 ·························.281 海外加速 ·························.282 連接復用 ·························.282 客戶端連接復用 ················.282 HTTPS 優(yōu)化 ·····················.283 動靜分離 ·························.283 壓縮 ·······························.284 什么場景適合使用動態(tài)加速 ··.284 20.4 自動 polyfill ······················.284 什么是 polyfill ················.284 Polyfill.io ······················.285 實現(xiàn)原理 ······················.287 20.5 邊緣計算和性能 ·················.288 CDN 的可編程功能 ··········.288 Hello World ···················.289 自定義 Cache Key ············.289 前置重定向 ···················.290 流式渲染 ······················.290 20.6 小結 ······························.291
你還可能感興趣
我要評論
|
