1蔓涧、F12調(diào)出DevTools
2、點擊performance
3笋额、點擊灰色圓點元暴，開始錄制
4、操作完成后點擊【stop】按鈕兄猩，生成測試報告：
FPS：每秒幀數(shù)茉盏，綠色豎線越高鉴未，F(xiàn)PS越高。FPS圖表上的紅色塊表示長時間幀鸠姨，很可能會出現(xiàn)卡頓歼狼。
CPU：CPU資源，此面積圖指示消耗 CPU 資源的事件類型享怀。
NET：每條彩色橫杠表示一種資源。橫杠越長趟咆，檢索資源所需的時間越長添瓷。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節(jié)下載完成的時間）。
在視圖區(qū)可以看到三條垂直的虛線值纱。
綠線：FP鳞贷，首次繪制的時間。
藍(lán)線：DCL事件觸發(fā)時間虐唠。
紅線： load 時間搀愧。
PS：當(dāng)初始的 HTML文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)疆偿，而無需等待樣式表咱筛、圖像和子框架的完全加載。另一個不同的事件load應(yīng)該僅用于檢測一個完全加載的頁面杆故。
時間拆分區(qū)域
藍(lán)色(Loading)：網(wǎng)絡(luò)通信和HTML解析時間
黃色(Scripting)：JavaScript執(zhí)行時間
紫色(Rendering)：渲染時間
綠色(Painting)：重繪
灰色(system)：系統(tǒng)消耗的時間
白色(Idle)：空閑時間
*總時間迅箩，就是前端完全展示需要的時間，我們也稱之為首屏?xí)r間处铛，這是一個重要前端性能指標(biāo)饲趋。
前端性能關(guān)鍵指標(biāo)
白屏?xí)r間：用戶首次看到網(wǎng)頁有內(nèi)容的時間，即第一次渲染流程完成時間撤蟆。
首屏?xí)r間：用戶看到第一屏奕塑，即整個網(wǎng)頁頂部大小為當(dāng)前窗口的區(qū)域，顯示完整的時間家肯。盡量讓它滿足一秒鐘法則龄砰。
首資源下載時間：從開始下載到第一個資源均下載完成的時間，不包括頁面繪制時間息楔。
總資源下載時間：從開始下載到所有資源均下載完成的時間寝贡，不包括頁面繪制時間。
用戶可操作時間：從頁面開始加載到用戶操作可響應(yīng)的時間值依。
FPS(流暢度)：應(yīng)該重點關(guān)注幀率圃泡，防止出現(xiàn)頁面卡頓。
