本文會(huì)忽略一些過于基礎(chǔ)的知識(shí)和細(xì)節(jié)
持續(xù)更新，歡迎關(guān)注~2019-9-26 15:08:58
當(dāng)頁面卡頓、慢時(shí)可以使用Performance來分析問題
Performance 面板如下劃分成4個(gè)區(qū)域，可以使用在線測(cè)試DEMO進(jìn)行測(cè)試
區(qū)域1：控制面板
-
Screenshots
截圖：默認(rèn)勾選，每一幀都會(huì)截圖。
關(guān)閉后區(qū)域二下面部分會(huì)移除
通過在時(shí)間線上移動(dòng)觀察頁面的變化 -
Memory
內(nèi)存消耗記錄：勾選后可以看到各種內(nèi)存消耗曲線
以下配置都是用來模擬手機(jī)、慢網(wǎng)絡(luò)下使用的，無需可以跳過
Disable javaScript samples
關(guān)閉javaScript樣本：減少在手機(jī)運(yùn)行時(shí)的開銷，模擬手機(jī)運(yùn)行時(shí)勾選Network
網(wǎng)絡(luò)模擬：可以模擬在3G / 4G等網(wǎng)絡(luò)條件下運(yùn)行頁面-
Enable advanced paint instrumentation(slow)
記錄渲染事件的細(xì)節(jié)：選擇frames中的一塊，可以看到區(qū)域四多了個(gè)Layers
CPU
CPU限制：主要為了模擬低CPU下運(yùn)行性能
區(qū)域2：概覽面板（overview）
可以通過選擇一個(gè)起始點(diǎn)按住鼠標(biāo)右鍵滑動(dòng)來選擇面板選中范圍
1 . FPS
FPS：每秒幀數(shù)，對(duì)于動(dòng)畫而言標(biāo)準(zhǔn)是保持在60FPS
☆ 優(yōu)化
綠色越高越好，出現(xiàn)紅色則表示FPS低（這就是你為啥覺得頁面卡頓了），你可以在區(qū)域三Frames中看到具體的FPS值（見下面第二圖）。
☆demo測(cè)試
多點(diǎn)幾次DEMO的 ADD 10 按鈕，直到感覺畫面不流暢為止，開啟分析記錄，如下
點(diǎn)擊方塊可以看到57.1ms內(nèi)共有18fps
2 . CPU
CPU: 處理各個(gè)任務(wù)花費(fèi)的時(shí)間，選擇一段CPU統(tǒng)計(jì)可以在區(qū)域四的Summary看到統(tǒng)計(jì)表格
-
Scripting腳本 -
Rendering渲染 -
Painting繪制 -
Loading加載 -
ldle閑置
☆ 優(yōu)化
比重占的大的顏色可能有問題，如上圖中的紫色部分Rendering，表示渲染耗費(fèi)時(shí)間久
3 . NET
NET：各個(gè)請(qǐng)求花費(fèi)時(shí)間
在下面的network里查看
注：各顏色表示的意義可以在network中查看
區(qū)域3：線程面板
1 . Frames
Frames：幀線程，鼠標(biāo)懸浮綠色塊可以看到fps
2. Main
Main：主線程，負(fù)責(zé)執(zhí)行Javascript, 解析HTML/CSS, 完成繪制。
可以看到主線程調(diào)用棧和耗時(shí)情況，每個(gè)長(zhǎng)條都是一個(gè)事件，懸浮可以看到耗時(shí)和事件名
- x軸指時(shí)間
最上面的第一條就是事件觸發(fā)的地方，直到結(jié)束，這條線是最長(zhǎng)的 - y軸指調(diào)用棧
上面的event調(diào)用了下面的子event，越到下面數(shù)量越少（瀑布）
顏色代表各個(gè)事件類型，以下列出一些常見的事件
3. Raster
Raster：Raster線程，負(fù)責(zé)完成某個(gè)layer或者某些塊(tile)的繪制。
區(qū)域4：統(tǒng)計(jì)面板
統(tǒng)計(jì)面板選擇因點(diǎn)擊選擇不同的目標(biāo)統(tǒng)計(jì)的內(nèi)容不同
Summary
統(tǒng)計(jì)圖：展示各個(gè)事件階段耗費(fèi)的時(shí)間Bottom-Up
排序：可以看到各個(gè)事件消耗時(shí)間排序
(1)self-time指除去子事件這個(gè)事件本身消耗的時(shí)間
(2)total-time這個(gè)事件從開始到結(jié)束消耗的時(shí)間（包含子事件）Call Tree
調(diào)用棧：Main選擇一個(gè)事件，可以看到整個(gè)事件的調(diào)用棧（從最頂層到最底層，而不是只有當(dāng)前事件）Event Log
事件日志
(1) 多了個(gè)start time，指事件在多少毫秒開始觸發(fā)的
(2) 右邊有事件描述信息
其他功能
開啟實(shí)時(shí)監(jiān)控
- 在控制
ctrl+shift+p打開命令行 - 搜索
Show Rendering - 勾選
FPS Meter
layers 層
頁面是分層的，可以在
-
More tools -> Layers查看當(dāng)前頁面的層級(jí)分布 -
Performance -> frame選中一個(gè)塊，然后在最下面的Layers頁里查看
一些概念
FP 首次繪制，瀏覽器第一次顯示內(nèi)容
FCP 首次內(nèi)容繪制 ，瀏覽器第一次顯示來自DOM的內(nèi)容
FMP 首次重要繪制，在網(wǎng)頁上，幾乎總有一部分內(nèi)容比其他部分更重要。 如果頁面最重要的部分能迅速加載，用戶可能不會(huì)注意到其余部分是否加載?！具@部分內(nèi)容往往只有開發(fā)者清楚，瀏覽器無法給出指標(biāo)】
TTI 可交互時(shí)間
DOMContentLoaded 當(dāng)初始的 HTML 文檔被完全加載和解析完成之后（無需等待樣式表、圖像和子框架的完成加載）
load 需等待樣式表、圖像和子框架的完成加載
擴(kuò)展：瀏覽器渲染過程
參考文檔
https://segmentfault.com/a/1190000011516068#articleHeader0
http://www.bubuko.com/infodetail-2139139.html
http://www.xue63.com/toutiaojy/20180809A1URC200.html
http://www.css88.com/doc/chrome-devtools/rendering-tools/
https://www.cnblogs.com/hellotyc/p/7111518.html
https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
