前端性能测试(一):CPU

chrome开发者工具,F12快捷键打开。


Profiles面板                                                              
这个主要是做性能优化的,包括查看CPU执行时间与内存占用。
从这个面板可以看到网页的执行时间和内存使用状况。包括了2部分:查看CPU和内存。帮我们了解哪些资源被用掉了,并帮助我们优化代码:
  • CPU面板展示了js方法的执行时间。
  • 内存面板展示了js对象和相关DOM节点的内存分配。
按照以下步骤了解面板概况:
  • 打开chrome的开发者工具(F12)
  • 选择Profile标签页

CPU 面板              _____                                                
点击 Start profiling按钮。圆形按钮变成色。按F5或者点击浏览器的刷新按钮重新加载页面。
当页面加载完毕,一些基准线的测试分数就显示出来了,点击 Stop profiling,按钮变成灰黑色。
前端性能测试(一):CPU_第1张图片

Bottom Up视图列出了影响性能的方法。还能查到方法的调用路径。
点击  Bottom Up / Top Down 按钮 选择Top Down。点击 Function 列左边的小三角箭头。Top Down视图展示了一个全面的调用结构,从调用栈的顶部开始。
                                                          
Note:  可以点击Percentage(%图标)按钮查看绝对时间(秒)和时间百分比。

选中Function列的一个 方法,然后点击 Focus selected function 按钮(右边的眼睛图标)
只显示选中的方法和其调用。点击底部右边的 Reload 按钮恢复面板的初始状态。
前端性能测试(一):CPU_第2张图片


选中Function列的一个 方法,然后点击 Exclude selected function 按钮(X图标)
 Exclude selected function 按钮移除了选中的方法和时间及其子方法。点击 Reload 按钮恢复面板的初始状态。

你可以录制多个profiles。点击 Start profiling按钮,重新加载页面,然后点击 Stop profiling 按钮。
左边栏列出了你录制的profiles,右边树形视图显示的是选中的profile信息。
前端性能测试(一):CPU_第3张图片



参考资料:
开篇阅读 

作为Web开发人员,我为什么喜欢Google Chrome浏览器

官方资料—— Profiles标签页
http://code.google.com/intl/zh-CN/chrome/devtools/docs/profiles.html

你可能感兴趣的:(前端性能测试)