關於 chrome 效能檢測工具的一點心得


Posted by m6fish on 2021-06-06

Photo by Louis Hansel on Unsplash

這篇文章記錄記錄操作各面板的心得,目標是可以輕鬆快速地閱讀,約20分鐘內的內容。

最近工作上遇到一個任務,是要優化專案內的手機版本某項動畫功能。
先前看到 你所不知道的各種前端 Debug 技巧 這篇教學文章,覺得寫的超棒! 也很易於學習,但看完就忘XD。
接到工作後,猛然想起來好像能派上用場,解決問題同時順道熟練這項工具,讚!

資源

你所不知道的各種前端 Debug 技巧

页面渲染:性能分析

主題

簡單列一下這次使用到的功能

  • elements
  • console
  • Source
  • network
  • performance
  • drawer / performance monitor
  • drawer / Rendering

黑色主題

F12開啟工具後,點擊齒輪 > preferences > Theme: 下拉選單找 Dark


打開抽屜 (drawer)

在工具內按下 esc 就可以打開drawer,預設會開啟 console 面板,而點擊旁點的...按鈕可以增加顯示其他功能面板

Elements 面板

做為一個前端工程師,用 Elements 面板偷改html or css 也是很正常的事,比方說什麼黑底白字方便閱讀網頁、取消鎖右鍵、或者把某些遮在網頁上的討厭廣告div直接刪除之類的XD

  • 點其中一個html element 之後案 ctrl + f 可以開啟搜尋列

旁邊的 Style, Computed, Event Listeners 也有很多東西可以玩,但這次使用到的比較少

console

  • 印出有顏色的 console.log
const css = 'color:blue'
console.log('%c文字', css)

色碼也可以用,很適合在有一堆混亂訊息的專案中使用

Sources

  • 中斷點相關功能超實用,建議務必玩玩看鐵人賽文章中的範例

對條件下斷點,就可在中斷的時候直接檢查,不用console.log

Network

可以檢查是否有資源檔案過大,包含音效與圖檔能壓縮就盡量壓縮。或是檢測有沒有不該載入的資源、lazzy loading 有沒有正常

performance

這次使用最頻繁的面板,錄製一段時間分析,每個 frame 運作是否正常、哪邊的task過肥導致卡頓,有相當多的資訊可以看。


有勾選這個項目的話可以看到layer的資訊

錄製時間越長就會跑越久,且轉換期間沒辦法切換到其他的面板。

錄製完成長這樣

之後會在FPS那條找看看有沒有紅色的地方、明顯降低的部分、或是 Frame 內特別長的task,再點進去Task看看是誰在搞怪

詳細檢測與優化推薦閱讀: 页面渲染:性能分析

drawer / performance monitor

  • 叫出 drawer額外面板的方式是點擊console旁邊的點點點按鈕


提供即時的效能資訊,包含CPU、heap size、Dom Nodes等相關資訊。
可以粗略地先拿這個面板看過,尋找效能比較不OK的地方之後,再用 performance 面板去錄製該段程式。

drawer / Rendering

這個面板內有很多選項,包含顯示當前FPS、layer邊界等資訊

總結

performance 面板錄影下去之後,哪邊效能不好就一目了然,很方便對症下藥找到問題點。

不過還是有遇到一些問題,像是PIXI ticker內的動畫,顯示funtion名稱就是 ticker 而不曉得裡面做了什麼事,只能從畫面上去猜。同樣的問題也發生在一些背景定時任務上,觀測到某些時間點會特別卡,但不曉得是網路的問題還是背景任務在搞怪。

此外,也有使用 memory面板觀測記憶體的消耗量,但碰到的問題是:優化的程式跟耗用記憶體不明顯,難以驗證。搞不好優化猜測的方向就是錯的(暈

不曉得在手機上放乖乖有沒有效


#performance







Related Posts

為什麼我們需要 React?可以不用嗎?

為什麼我們需要 React?可以不用嗎?

forEach 和 for迴圈

forEach 和 for迴圈

CSS保健室|background-image

CSS保健室|background-image


Comments