审查Javascript性能 - acelan86/chromeDevTools GitHub Wiki

[原文地址]https://developers.google.com/chrome-developer-tools/docs/cpu-profiling?hl=zh-CN

这篇教程解释了如何收集和浏览CPU摘要。

注意：如果你是一个web开发者，并且想要得到DeveloperTools的最新版本，你应该使用从开发者通道中放出的Chrome

使用Google Chrome，打开V8 Benchmark Suite页面。点击Start profiling按钮。圆圈变成红色。现在回到V8 Benchmark Suite页面，并且按下F5或者点击浏览器重载按钮来重载页面。

当页面重载完成，会显示一个benchmark测试成绩。返回Developer Tools窗口并且点击Stop Profiling按钮，圆圈变成灰色。

Bottom Up视图列出了对形成产生影响的方法。你也可以通过它来检查到这些方法的调用路径。 现在点击Bottom Up/Top Down选择按钮选择Top Down视图。然后点击Function列中（program）左边的小箭头。Top Down视图显示了一个调用结构的综合图，从调用栈的顶部开始。

注意：你可以点击百分号按钮来显示绝对时间。

选择Function列中的一个函数。点击Focus selected function按钮（右边的眼睛图标）。

它过滤摘要只显示选中的函数和它的调用者。点击窗口底部右边的Reload按钮来恢复摘要的原始状态。

选择Function列中的一个函数，然后点击Exclude selected function按钮（X图标）。 Select one of the functions in the Function column, then click the Exclude selected function button (the X icon). 取决于你选中的函数，你可以看到下面这样：

Exclude selected function按钮从摘要中移除函数并且通过排除函数的总时间来管理它的调用者。点击Reload按钮恢复摘要的原始状态。 你可以记录多份摘要，点击Start profiling按钮，重载V8 Benchmark页面，然后点击Stop profiling按钮。

左边的边栏列出了你记录的摘要，右边的树形视图显示了选中的摘要的相关信息。