本文是學習&研究筆記，若有錯誤還請指正！
相關文章
當頁面卡頓、慢時可以使用Performance來分析問題原因所在。
皮膚
Performance，即執行時效能表現，皮膚如下：
使用
- 使用隱身視窗，開啟專案（比如線上測試DEMO）
- 點選錄製按鈕（黑點），開始記錄此段時間內頁面執行效能
- 點選
stop停止
皮膚功能分析
如下劃分成4個區域
區域1：控制皮膚
Screenshots截圖：預設勾選，每一幀都會截圖。關閉後區域二下面部分會去除（下圖紅框標記那裡）
Memory記憶體消耗記錄：勾選後可以看到各種記憶體消耗曲線
【以下配置都是用來模擬手機、慢網路下使用的，無需可以跳過】
Disable javaScript samples關閉javaScript樣本：減少在手機執行時的開銷，模擬手機執行時勾選Network網路模擬：可以模擬在3G,4G等網路條件下執行頁面Enable advanced paint instrumentation(slow)記錄渲染事件的細節：選擇frames中的一塊，可以看到區域四多了個Layers
CPUCPU限制：主要為了模擬底CPU下執行效能
區域2：概覽皮膚（overview）
1 . FPS
FPS：每秒幀數，對於動畫而言標準是保持在60FPS
☆ 優化
綠色越高越好，出現紅色則表示FPS低（這就是你為啥覺得頁面卡頓了），你可以在區域三Frames中看到具體的FPS值（見下面第二圖）。
☆ 測試
多點幾次DEMO的 ADD 10 按鈕，直到感覺畫面不流暢為止，開啟分析記錄，如下
2 . CPU
CPU: 處理各個任務花費的時間，選擇一段CPU統計可以在區域四的Summary看到統計表格
Scripting指令碼Rendering渲染Painting繪製Loading載入ldle閒置
☆ 優化
比重佔的大的顏色可能有問題，如上圖中的紫色部分Rendering，表示渲染耗費時間久
3 . NET
NET：各個請求花費時間
這塊可以再network裡看，更清晰些
區域3：執行緒皮膚
1 . Frames
Frames：幀執行緒，滑鼠懸浮綠色塊可以看到fps
2. Main
Main：主執行緒，負責執行Javascript, 解析HTML/CSS, 完成繪製。
可以看到主執行緒呼叫棧和耗時情況，每個長條都是一個事件，懸浮可以看到耗時和事件名
- x軸指時間 最上面的第一條就是事件觸發的地方，直到結束，這條線是最長的
- y軸指呼叫棧 上面的event呼叫了下面的子event，越到下面數量越少（瀑布）
顏色代表各個事件型別，以下列出一些常見的事件
3. Raster
Raster：Raster執行緒，負責完成某個layer或者某些塊(tile)的繪製。
區域4：統計皮膚
統計皮膚選擇因點選選擇不同的目標統計的內容不同
-
Summary統計圖：展示各個事件階段耗費的時間 -
Bottom-Up排序：可以看到各個事件消耗時間排序 (1)self-time指除去子事件這個事件本身消耗的時間 (2)total-time這個事件從開始到結束消耗的時間（包含子事件） -
Call Tree呼叫棧：Main選擇一個事件，可以看到整個事件的呼叫棧（從最頂層到最底層，而不是隻有當前事件） -
Event Log事件日誌 (1) 多了個start time，指事件在多少毫秒開始觸發的 (2) 右邊有事件描述資訊
開啟實時監控
- 在控制
ctrl+shift+p開啟命令列 - 搜尋
Show Rendering - 勾選
FPS Meter
擴充套件：瀏覽器渲染過程
參考文件
更多內容點這裡： 官方文件