Chrome Dev Tools---[性能篇]

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

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 堆或節點計數圖表頻繁上升和下降指示存在頻繁的垃圾回收。

Application

• storage: 查看local storage,session storage,IndexedDB,Web SQL,
• Application Cache: 查看通過Application Cache API創建的資源和規則
• Cache Storage: 查看Service Worker相關緩存
• Clear Storage: 刪除緩存
• Cookies: 查看、刪除cookie,不可修改
• Frame: 安框架組織Resources
  • 右鍵->複製鏈接、在新頁面中打開、保存、在Network中查看