自動devtool
//快捷鍵中配置
--auto-open-devtools-for-tabs顯示繼承樣式
compute 面板中勾線show all
定位未使用的css
- 在聚焦DevTools的情況下，按Command Shift P（Mac）或 Control Shift P（Windows，Linux，Chrome OS），以打開“命令菜單”。
- 開始輸入coverage並選擇顯示覆蓋率。覆蓋選項卡出現。
- 點擊錄製，即可。
- 頁面會重新加載，“覆蓋率”選項卡概述了瀏覽器加載的每個文件中使用了多少CSS（和JavaScript）。綠色表示使用過的CSS。紅色表示未使用的CSS。
樣式添加
- styles面板右上角的.cls .hover南
- styles面板中樣式右下角的...
動畫優化
- styles面板，→ ctrl p
- 輸入> animate
- 可進行動畫重播、修改、優化
cache-control
- network面板
- ctrl F
- 輸入cache-control
資源block
- network面板，→ ctrl p
- 輸入> block
- 添加資源，重新請求頁面
- 進而可以模擬網絡異常
界面渲染
- CSSOM 樹和 DOM 樹合併成渲染樹，然後用於計算每個可見元素的佈局layout，並輸出給繪製流程paint，將像素渲染render到屏幕上。
- 優化上述每一個步驟對實現最佳渲染性能至關重要。
![RenderTree]( "RenderTree")
- 從 DOM 樹的根節點開始遍歷每個可見節點,爲其找到適配的 CSSOM 規則並應用它們
- 最終輸出的渲染同時包含了屏幕上的所有可見內容及其樣式信息
- 從渲染樹的根節點開始進行遍歷,計算每個對象在網頁上的確切大小和位置,讓設置的樣式規則生效，即安排元素的幾何佈局
- 將幾何位置轉化爲屏幕對應的像素數值
- 最後進行繪製
界面渲染阻止
- CSS 被視爲阻塞渲染的資源。
- 基於css會轉化爲cssom, 一旦在頁面底部，存在css。那麼之前得到的渲染樹，就可能變動很大，此時暫停渲染，重新生成cssom，生成渲染樹，避免重複工作。
- 界面配置了css資源，一旦沒有生效，會體驗不好。
- js也會操作dom樹，cssdom樹，而不是渲染樹，故會影響渲染樹的生成。
- 除非將 JavaScript 顯式聲明爲異步，否則它會阻止構建 DOM
- 媒體類型和媒體查詢將一些 CSS 資源標記爲不阻塞渲染
界面首屏加載優化
- 最好利用 Lighthouse( Chrome 擴展程序or NPM 模塊) 發現明顯的 CRP 優化機會，然後使用 Navigation Timing API 設置您的代碼，以便監控應用在實際使用過程中的性能。
domLoading：這是整個過程的起始時間戳，瀏覽器即將開始解析第一批收到的 HTML 文檔字節。
domInteractive：表示瀏覽器完成對所有 HTML 的解析並且 DOM 構建完成的時間點。
domContentLoaded：表示 DOM 準備就緒並且沒有樣式表阻止 JavaScript 執行的時間點，這意味着現在我們可以構建渲染樹了。
許多 JavaScript 框架都會等待此事件發生後，纔開始執行它們自己的邏輯。因此，瀏覽器會捕獲 EventStart 和 EventEnd 時間戳，讓我們能夠追蹤執行所花費的時間。
domComplete：顧名思義，所有處理完成，並且網頁上的所有資源（圖像等）都已下載完畢，也就是說，加載轉環已停止旋轉。
loadEvent：作爲每個網頁加載的最後一步，瀏覽器會觸發 onload 事件，以便觸發額外的應用邏輯。- 優化從緩存或從網絡獲取資源所需的時間
參考文獻：
本文作者：前端首席體驗師(CheongHu)
聯繫郵箱：[email protected]