Performance 面板
一般點擊錄製,刷新頁面就好了,但是:
小技巧:
- 先清空 document
- 再點擊錄製
- 然後刷新頁面
- 結束錄製
- 這樣分析起來比較好看
怎麼看結果?
主要看圖裏面的小山,選中該區域
network 沒啥好看的,和外面的差不多
主要看 main,看腳本執行的性能
如圖,從上往下就是某一次的調用,
點擊即可看到每塊運行的那個 js,
怎麼看哪裏性能有問題?
如果一個很內部(底下)的函數調用的時間很長,說明這個函數需要被優化。
Rendering 面板
在控制面板上按下 esc 鍵呼出,如果還是沒有,點擊“三個點”找到打鉤就能顯示出來了
最常用的就是繪製閃爍(paint flashing),他會在頁面變化的內容更加明顯的顯示出來
最常用的還有幀率渲染統計(frame rendering stats),頁面的左上角就會出現一個小框,在滾動頁面的時候,看幀率如果低於30就很卡,30以上就還行。
Coverage 面板
查看代碼的使用率