前端性能揭祕

整體讀感還不錯，涉及的比較全面了，算前端性能相關的一個overview吧

書中詳細講解了大部分的性能檢測方式以及前端、跨端優化的方式，有許多參考意義，以下是我閱讀之後的總結： 1、前端性能度量 首先確定優化目標：關鍵元素的渲染時間、滾動時的幀率； 首屏構建指標：均值、分位數、秒開率 （具體的統計指標如下：） 度量流暢度的指標： FPS：幀率，也就是每秒渲染的幀數（達到60fps會感到流暢，否則會感到卡頓）； FP：（白屏，首次繪製時間） FCP：（首屏，首屏繪製時間） LCP：（最大內容繪製時間） CLS：（累計位移偏移） 常用過程指標 DOMReady：也就是DOMContentLoad，在Network面板中底部就能看到 TTFB（Time To First Byte），是指客戶端從發起請求到接收到服務器相應的第一個字節的時間，是反映網站性能的重要指標，靜態頁面一般在50ms是非常理想的值； Load：頁面資源完全加載好的時間點； RTT（Round-Trip Time），即往返時延，從發送端發送數據開始，到發送端接收到來自接收端的確認時間，即一來一回的時間，一般來說這個時間由物理距離、網絡傳輸路徑等決定，確定RTT的時間，最簡單的方式就是Ping一下，在Ping的時候可以看到time=xxms大致就是1個RTT； PerformanceAPI使用：Navigation Timing API（performance.timing檢查頁面性能相關的時間點）、Performance Entry API(performance.getEntries()檢查頁面中所有與資源加載相關的性能信息，包括加載時間線)、performance.getEntriesByType()【navigation、resource、mark、measure、paint、frame】、performance.getEntriesByName(); 2、度量工具 CHrome的DevTools：Network面板（請求列表、傳輸體積、時間和Waterfall、數據區【總結性數據：請求數量、整體傳輸體積】、模擬網速、）、Performance面板（操作區、選項【Screenshots、Memory、截圖】）； WebPageTest： 3、優化相關檢測指標 優化TTFB： 減少請求的傳輸量（避免在請求中攜帶過多的無用信息）、 減少服務端的處理時間（一方面儘可能優化服務器端的處理邏輯，增加緩存、優化慢SQL、並行化網絡請求等；另一方面常用的手段是流式渲染，即讓服務器先返回可渲染的內容，再流式地返回更多耗時的內容完成後續渲染【在Response Header中，增加Transfor-Encoding:chunked,告知瀏覽器HTML將會被一塊一塊地流式返回，Facebook構建了bigpipe】）； chunk：當前客戶端chunk緩存區大小； 減少RTT：減小RTT，在離客戶更近的地方增加服務器節點，除此之外，CDN的冬天加速能力可以幫助我們在不建立更多機房的前提下減小RTT； 優化建立連接：減少物理距離，RTT本質上來說就是網絡傳輸耗時，物理距離縮短就能相應減少時間、preconnect、複用連接、域名收攏（解決加載阻塞問題）、TCP Fast Open、QUIC和HTTP/3 優化beforeFetch耗時：重定向邏輯前置、合併重定向、避免使用短鏈； Https協議優化：確保證書鏈完整、 啓用TLS 1.3、不濫用EV證書、開啓OSCP Stapling（開啓OSCP驗證）； 優化傳輸性能：可以根據不同的資源採用不同的壓縮方式。● JavaScript/CSS等靜態資源優先採用離線br壓縮的方式。● 確保靜態資源/接口/HTML等都至少開啓了gzip壓縮，啓用壓縮和完全不啓用壓縮的對比效果非常顯著。 優化DOM操作：批量操作DOM，類似React中的batchUpdate、純合成動畫； 打包構建優化：Bundle分析、Tree Shaking、Scope Hoisting、Code Splitting、代碼壓縮、Vite和Bundleless； 4、跨端技術與性能 Webview和Native性能：減少通信數據量、 React Native：基於滾動容器/位置獲取的懶加載、虛擬列表、react native通過metro、手動tree shaking、bable等減小打包體積。

介紹了最新視角下的前端性能優化方法論：度量（均值、分位數、秒開率、首屏、流暢度）、分析（TTFB、DOMReady、Load）、實驗（A/B test），工具：Devtool、TTFB（RTT）、ServiceWorker（監聽fetch、調用catch）、構建工具（tree shaking、splittting、壓縮）、SSR（同構、緩存、數據預取、按需渲染、流式渲染）、Hybrid

累了 廢話多，有的東西也基礎 很難看下去，一句話的東西偏要寫五六百字

比較提綱型：從方法論，網絡協議、瀏覽器、工程、跨端、CDN大概系統講了下性能相關的方方面面，對整體瞭解、初學入門有幫助 更加深度的內容需要進一步結合具體問題去深挖

當前看，對前端性能有着相對系統的介紹，值得讀一讀，對實踐有一定指導性。