自動(dòng)devtool
//快捷鍵中配置
--auto-open-devtools-for-tabs
顯示繼承樣式
compute 面板中勾線show all
定位未使用的css
- 在聚焦DevTools的情況下慨亲，按Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows副女，Linux臂港，Chrome OS）捕传，以打開(kāi)“命令菜單”泉沾。
- 開(kāi)始輸入coverage并選擇顯示覆蓋率上岗。覆蓋選項(xiàng)卡出現(xiàn)凄鼻。
- 點(diǎn)擊錄制随橘，即可喂分。
- 頁(yè)面會(huì)重新加載，“覆蓋率”選項(xiàng)卡概述了瀏覽器加載的每個(gè)文件中使用了多少CSS（和JavaScript）机蔗。綠色表示使用過(guò)的CSS蒲祈。紅色表示未使用的CSS甘萧。
樣式添加
- styles面板右上角的.cls .hover南
- styles面板中樣式右下角的...
動(dòng)畫(huà)優(yōu)化
- styles面板，→ ctrl+p
- 輸入> animate
- 可進(jìn)行動(dòng)畫(huà)重播梆掸、修改扬卷、優(yōu)化
cache-control
- network面板
- ctrl+F
- 輸入cache-control
資源block
- network面板，→ ctrl+p
- 輸入> block
- 添加資源酸钦，重新請(qǐng)求頁(yè)面
- 進(jìn)而可以模擬網(wǎng)絡(luò)異常
界面渲染
- CSSOM 樹(shù)和 DOM 樹(shù)合并成渲染樹(shù)怪得，然后用于計(jì)算每個(gè)可見(jiàn)元素的布局layout，并輸出給繪制流程paint卑硫，將像素渲染render到屏幕上徒恋。
-
優(yōu)化上述每一個(gè)步驟對(duì)實(shí)現(xiàn)最佳渲染性能至關(guān)重要。
- 從 DOM 樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn),為其找到適配的 CSSOM 規(guī)則并應(yīng)用它們
- 最終輸出的渲染同時(shí)包含了屏幕上的所有可見(jiàn)內(nèi)容及其樣式信息
- 從渲染樹(shù)的根節(jié)點(diǎn)開(kāi)始進(jìn)行遍歷,計(jì)算每個(gè)對(duì)象在網(wǎng)頁(yè)上的確切大小和位置,讓設(shè)置的樣式規(guī)則生效欢伏，即安排元素的幾何布局
- 將幾何位置轉(zhuǎn)化為屏幕對(duì)應(yīng)的像素?cái)?shù)值
- 最后進(jìn)行繪制
界面渲染阻止
- CSS 被視為阻塞渲染的資源入挣。
- 基于css會(huì)轉(zhuǎn)化為cssom, 一旦在頁(yè)面底部，存在css硝拧。那么之前得到的渲染樹(shù)径筏，就可能變動(dòng)很大，此時(shí)暫停渲染障陶，重新生成cssom滋恬，生成渲染樹(shù)，避免重復(fù)工作抱究。
- 界面配置了css資源恢氯，一旦沒(méi)有生效，會(huì)體驗(yàn)不好媳维。
- js也會(huì)操作dom樹(shù)，cssdom樹(shù)遏暴，而不是渲染樹(shù)侄刽，故會(huì)影響渲染樹(shù)的生成。
- 除非將 JavaScript 顯式聲明為異步朋凉，否則它會(huì)阻止構(gòu)建 DOM
- 媒體類(lèi)型和媒體查詢將一些 CSS 資源標(biāo)記為不阻塞渲染
界面首屏加載優(yōu)化
- 最好利用 Lighthouse( Chrome 擴(kuò)展程序or NPM 模塊) 發(fā)現(xiàn)明顯的 CRP 優(yōu)化機(jī)會(huì)州丹，然后使用 Navigation Timing API 設(shè)置您的代碼，以便監(jiān)控應(yīng)用在實(shí)際使用過(guò)程中的性能杂彭。
domLoading：這是整個(gè)過(guò)程的起始時(shí)間戳墓毒，瀏覽器即將開(kāi)始解析第一批收到的 HTML 文檔字節(jié)。
domInteractive：表示瀏覽器完成對(duì)所有 HTML 的解析并且 DOM 構(gòu)建完成的時(shí)間點(diǎn)亲怠。
domContentLoaded：表示 DOM 準(zhǔn)備就緒并且沒(méi)有樣式表阻止 JavaScript 執(zhí)行的時(shí)間點(diǎn)所计，這意味著現(xiàn)在我們可以構(gòu)建渲染樹(shù)了。
許多 JavaScript 框架都會(huì)等待此事件發(fā)生后团秽，才開(kāi)始執(zhí)行它們自己的邏輯主胧。因此叭首，瀏覽器會(huì)捕獲 EventStart 和 EventEnd 時(shí)間戳，讓我們能夠追蹤執(zhí)行所花費(fèi)的時(shí)間踪栋。
domComplete：顧名思義焙格，所有處理完成，并且網(wǎng)頁(yè)上的所有資源（圖像等）都已下載完畢夷都，也就是說(shuō)眷唉，加載轉(zhuǎn)環(huán)已停止旋轉(zhuǎn)。
loadEvent：作為每個(gè)網(wǎng)頁(yè)加載的最后一步囤官，瀏覽器會(huì)觸發(fā) onload 事件冬阳，以便觸發(fā)額外的應(yīng)用邏輯。 - 優(yōu)化從緩存或從網(wǎng)絡(luò)獲取資源所需的時(shí)間
參考文獻(xiàn)：
渲染樹(shù)
本文作者：前端首席體驗(yàn)師(CheongHu)
聯(lián)系郵箱：simple2012hcz@126.com
版權(quán)聲明： 本文章除特別聲明外治拿，均采用 CC BY-NC-SA 4.0 許可協(xié)議摩泪。轉(zhuǎn)載請(qǐng)注明出處！
