Chrome Dev Tools---[效能篇]

張偉傑發表於2018-03-31
Chromedev

本文主要記錄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中檢視

相關文章