浏览器工具篇

Performance 面板

一般点击录制,刷新页面就好了,但是:

小技巧:

  1. 先清空 document
  2. 再点击录制
  3. 然后刷新页面
  4. 结束录制
  5. 这样分析起来比较好看

怎么看结果?

主要看图里面的小山,选中该区域
network 没啥好看的,和外面的差不多
主要看 main,看脚本执行的性能

如图,从上往下就是某一次的调用,
点击即可看到每块运行的那个 js,

怎么看哪里性能有问题?

如果一个很内部(底下)的函数调用的时间很长,说明这个函数需要被优化。

Rendering 面板

在控制面板上按下 esc 键呼出,如果还是没有,点击“三个点”找到打钩就能显示出来了

最常用的就是绘制闪烁(paint flashing),他会在页面变化的内容更加明显的显示出来

最常用的还有帧率渲染统计(frame rendering stats),页面的左上角就会出现一个小框,在滚动页面的时候,看帧率如果低于30就很卡,30以上就还行。

Coverage 面板

查看代码的使用率

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