前端性能测试（一）：CPU

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

Profiles面板                                                              

这个主要是做性能优化的，包括查看CPU执行时间与内存占用。

从这个面板可以看到网页的执行时间和内存使用状况。包括了2部分：查看CPU和内存。帮我们了解哪些资源被用掉了，并帮助我们优化代码：

• CPU面板展示了js方法的执行时间。
• 内存面板展示了js对象和相关DOM节点的内存分配。

按照以下步骤了解面板概况：

• 打开chrome的开发者工具（F12）
• 选择Profile标签页

CPU 面板              _____                                                

点击 Start profiling按钮。圆形按钮变成红色。按F5或者点击浏览器的刷新按钮重新加载页面。

当页面加载完毕，一些基准线的测试分数就显示出来了，点击 Stop profiling，按钮变成灰黑色。

Bottom Up视图列出了影响性能的方法。还能查到方法的调用路径。

点击  Bottom Up / Top Down 按钮 选择Top Down。点击 Function 列左边的小三角箭头。Top Down视图展示了一个全面的调用结构，从调用栈的顶部开始。

                                                          

Note:  可以点击Percentage（%图标）按钮查看绝对时间（秒）和时间百分比。

选中Function列的一个 方法，然后点击 Focus selected function 按钮（右边的眼睛图标）

只显示选中的方法和其调用。点击底部右边的 Reload 按钮恢复面板的初始状态。

选中Function列的一个 方法，然后点击 Exclude selected function 按钮（X图标）。

 Exclude selected function 按钮移除了选中的方法和时间及其子方法。点击 Reload 按钮恢复面板的初始状态。

你可以录制多个profiles。点击 Start profiling按钮，重新加载页面，然后点击 Stop profiling 按钮。

左边栏列出了你录制的profiles，右边树形视图显示的是选中的profile信息。

参考资料：

开篇阅读 

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

官方资料—— Profiles标签页

http://code.google.com/intl/zh-CN/chrome/devtools/docs/profiles.html