瀏覽器工具篇

Performance 面板

一般點擊錄製,刷新頁面就好了,但是:

小技巧:

  1. 先清空 document
  2. 再點擊錄製
  3. 然後刷新頁面
  4. 結束錄製
  5. 這樣分析起來比較好看

怎麼看結果?

主要看圖裏面的小山,選中該區域
network 沒啥好看的,和外面的差不多
主要看 main,看腳本執行的性能

如圖,從上往下就是某一次的調用,
點擊即可看到每塊運行的那個 js,

怎麼看哪裏性能有問題?

如果一個很內部(底下)的函數調用的時間很長,說明這個函數需要被優化。

Rendering 面板

在控制面板上按下 esc 鍵呼出,如果還是沒有,點擊“三個點”找到打鉤就能顯示出來了

最常用的就是繪製閃爍(paint flashing),他會在頁面變化的內容更加明顯的顯示出來

最常用的還有幀率渲染統計(frame rendering stats),頁面的左上角就會出現一個小框,在滾動頁面的時候,看幀率如果低於30就很卡,30以上就還行。

Coverage 面板

查看代碼的使用率

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章