首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

前端性能测试(1):CPU

2012-08-29 
前端性能测试(一):CPUchrome开发者工具,F12快捷键打开。Profiles面板 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

前端性能测试(一):CPU

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


Profiles面板 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?这个主要是做性能优化的,包括查看CPU执行时间与内存占用。从这个面板可以看到网页的执行时间和内存使用状况。包括了2部分:查看CPU和内存。帮我们了解哪些资源被用掉了,并帮助我们优化代码:CPU面板展示了js方法的执行时间。内存面板展示了js对象和相关DOM节点的内存分配。按照以下步骤了解面板概况:打开chrome的开发者工具(F12)选择Profile标签页
CPU面板 ? ? ? ? ? ? ?_____ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?点击?Start profiling按钮。圆形按钮变成红色。按F5或者点击浏览器的刷新按钮重新加载页面。当页面加载完毕,一些基准线的测试分数就显示出来了,点击?Stop profiling,按钮变成灰黑色。前端性能测试(1):CPU

Bottom Up视图列出了影响性能的方法。还能查到方法的调用路径。点击?Bottom Up / Top Down 按钮选择Top Down。点击 Function 列左边的小三角箭头。Top Down视图展示了一个全面的调用结构,从调用栈的顶部开始。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ??? ? ? ??Note:?可以点击Percentage(%图标)按钮查看绝对时间(秒)和时间百分比。
选中Function列的一个方法,然后点击?Focus selected function?按钮(右边的眼睛图标)只显示选中的方法和其调用。点击底部右边的?Reload?按钮恢复面板的初始状态。前端性能测试(1):CPU


选中Function列的一个方法,然后点击?Exclude selected function 按钮(X图标)。?Exclude selected function 按钮移除了选中的方法和时间及其子方法。点击 Reload 按钮恢复面板的初始状态。
你可以录制多个profiles。点击 Start profiling按钮,重新加载页面,然后点击 Stop profiling 按钮。左边栏列出了你录制的profiles,右边树形视图显示的是选中的profile信息。前端性能测试(1):CPU



参考资料:开篇阅读?

作为Web开发人员,我为什么喜欢Google Chrome浏览器官方资料——Profiles标签页http://code.google.com/intl/zh-CN/chrome/devtools/docs/profiles.html

热点排行