chrome devtools使用詳解——Performance

本文是學習&研究筆記，如有錯誤還請指正！

相關文章

• Elements篇
• Sources篇

當頁面卡頓、慢時可使用Performance來分析問題緣由所在。

面板

---

Performance，即運行時性能表現，面板以下：

使用

---

• 使用隱身窗口，打開項目（好比在線測試DEMO）
• 點擊錄製按鈕（黑點），開始記錄此段時間內頁面運行性能
• 點擊stop中止

面板功能分析

---

以下劃分紅4個區域

區域1：控制面板

• Screenshots 截圖：默認勾選，每一幀都會截圖。關閉後區域二下面部分會去除（下圖紅框標記那裏）
  經過在時間線上移動觀察頁面的變化
• Memory 內存消耗記錄：勾選後能夠看到各類內存消耗曲線

【如下配置都是用來模擬手機、慢網絡下使用的，無需能夠跳過】

• Disable javaScript samples 關閉javaScript樣本：減小在手機運行時的開銷，模擬手機運行時勾選
• Network 網絡模擬：能夠模擬在3G,4G等網絡條件下運行頁面
• Enable advanced paint instrumentation(slow) 記錄渲染事件的細節：選擇frames中的一塊，能夠看到區域四多了個Layers

• CPU CPU限制：主要爲了模擬底CPU下運行性能

區域2：概覽面板（overview）

1 . FPS

FPS：每秒幀數，對於動畫而言標準是保持在60FPS

☆ 優化

綠色越高越好，出現紅色則表示FPS低（這就是你爲啥以爲頁面卡頓了），你能夠在區域三Frames中看到具體的FPS值（見下面第二圖）。

☆ 測試

多點幾回DEMO的 ADD 10 按鈕，直到感受畫面不流暢爲止，開啓分析記錄，以下

點擊方塊能夠看到57.1ms內共有18fps

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) 右邊有事件描述信息

開啓實時監控

1. 在控制ctrl+shift+p打開命令行
2. 搜索Show Rendering
3. 勾選FPS Meter

擴展：瀏覽器渲染過程

---

參考文檔

segmentfault.com/a/119000001…

www.bubuko.com/infodetail-…

www.xue63.com/toutiaojy/2…

www.css88.com/doc/chrome-…

www.cnblogs.com/hellotyc/p/…

更多內容點這裏： 官方文檔