chrome devtools使用詳解——Performance

摘要： 本文是學習&研究筆記，若有錯誤還請指正！ 相關文章 Elements篇 Sources篇 當頁面卡頓、慢時可以使用Performance來分析問題原因所在。 面板 Performance，即執行時效能表現，面板如下： ...

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

相關文章

• ofollow,noindex">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) 右邊有事件描述資訊