Chrome Dev Tools---[性能篇]

時間 2019-11-16

標籤 chrome dev tools 性能欄目 Chrome 简体版

原文原文鏈接

本文主要記錄Chrome Dev Tools 關於性能調優的使用方法。基礎用法請參見基礎篇web

Performance

與loading相對,是running的性能,找出頁面性能瓶頸,建議:
- 在隱身模式下使用.
- Capture Settings->20x slowdown(for mobile)
右鍵 -> Save profile/ Load profile
Record結果分析:
- FPS出現紅色時,說明丟幀嚴重,綠色越高,性能越好.
- CPU與底部的Summary相呼應,當該欄被顏色填滿時，說明CPU滿負荷.
- 鼠標懸浮於FPS,CPU,NET上面時,能夠看到放大的screenshot
- 鼠標懸浮於Frames,查看FPS,不該高於60.
- Frames中,點擊某一幀,Summary中顯示Screenshot,點擊可放大;此時若開啓Enable advanced paint instrumentation,會顯示Layer
- Interactions:用戶交互事件
- Cmd + Shift + p->show rendering,顯示Rendering Tab
- Overview上點擊、按住並移動鼠標,來聚焦某一個時間段.(或者使用W A S D鍵)
找出瓶頸bottleneck
- Summary中,Rendering是否過多->減小Rendiering
- Memory勾選後顯示內存使用狀況
- Network,左側線:request sent以前的事件;淺色:request sent,waiting;深色:content download;右側線:等待主進程.
- 展開Main,x:時間,越寬說明運行時間越長;y:callstack.
- Main中,Shift+鼠標選擇區域,能夠看到具體時間
- Main中,顏色隨機分配,深黃色Scriping,紫色Rendering,
- Main中,事件右上角紅色三角,說明極可能有性能問題.
- 點擊Main中的事件,Summary中會顯示詳情,reveal跳轉至相應code
- console旁邊有rendering.Paint Flashing layer borders scrolling performance issues
- 在調用棧最底層的紫色事件(Layout),放大後極可能也有紅色三角,點擊,再從Summary跳轉至對應代碼,能夠發現右側又事件,指示出強制重繪的事件.
- 事件類型參考
查看調用棧,分析性能
- 三個Tab均展現選中事件
- 右側Show Heaviest Stack
- call tree查找哪個root activity消耗了最多的時間
- bottom up展現直接消耗時間的事件
- event log按調用順序展現,filter選擇事件類型

Memory

Menu -> More tools -> Task manager 打開任務管理器
- 右鍵點擊表格標題 -> 啓用JavaScript memory
- Memory列表示原生內存，JavaScript Memory表示JS堆。
內存術語
- 對象可經過兩種方式佔用內存：
  - 直接經過對象自身佔用，對象自身佔用內存大小在分析結果中表現爲Shadow Size。
  - 經過保持對其餘對象的引用隱式佔用。對象自己、連同其沒法從GC根到達的相關對象一塊兒刪除後釋放的內存大小，在分析結果中表現爲Retained Size。
- Distance是指該內存節點與GC 根之間的距離。若是相同類型的幾乎全部對象的距離都相同，只有少數對象的距離偏大，則有必要進行調查。
Devtools -> Performance面板 -> 啓用Memory複選框
- 在記錄時點擊Collect garbage，能夠強制垃圾回收。
- Overview窗格中HEAP圖表表示JS堆
- 最下方窗格爲JS HEAP、Documents、Nodes、Listeners、GPU Memory
使用堆快照，發現已從DOM Tree分離節點的內存泄漏。
- 選擇Take Heap Snapshot，而後點擊Take Heap Snapshot按鈕。
- 執行一段時間後，從左側面板選擇該快照，快照名字下方顯示JS對象總大小。
- Summary視圖顯示按構造函數名稱分組的對象，Containment 視圖提供了對象結構視圖，有助於分析全局命名空間 (window) 中引用的對象以找出是什麼讓它們始終如影隨形。使用此視圖能夠分析閉包以及在較低級別深刻了解您的對象。
- 在Summary視圖的 Class filter 文本框中鍵入 Detached，搜索已分離的 DOM 樹。
- 展開三角符號，以黃色突出顯示的節點具備 JavaScript 代碼對它們的直接引用。
- 點擊黃色節點，在 Object 窗格中，能夠看到與正在引用該節點的代碼相關的更多信息。
使用分配時間線肯定 JS 堆內存泄漏
- 選擇Record Allocation Timeline單選按鈕，按Start按鈕，執行您懷疑致使內存泄漏的操做。完成後，按stop recording按鈕。
- 點擊記錄的profile文件查看，選擇展示形式爲Chart。分配時間線上的藍色豎線表示新內存分配。
- 點擊下方內容，能夠查看具體代碼。
按函數調查內存分配
- 選擇Record Allocation Profiler 類型，能夠按照 JavaScript 函數查看內存分配。
- 點擊start按鈕，執行指望觀察的操做，完成後點擊stop。
- Profile默認視圖爲 Heavy (Bottom Up)，將分配了最多內存的函數顯示在最上方。
發現頻繁垃圾回收
- 若是感受頁面常常暫停，則可能存在垃圾回收問題。
- 在任務管理器中，Memory 或 JavaScript Memory 值頻繁上升和降低表示存在頻繁的垃圾回收。
- 在Timeline記錄中，JS 堆或節點計數圖表頻繁上升和降低指示存在頻繁的垃圾回收。