【翻译】分析JavaScript性能

###JavaScript分析数据图表介绍

使用谷歌Chrome浏览器，打开V8测试套件页面，点击开始分析按钮或者按Cmd＋E快捷键开始记录JavascriptCPU分析。现在，刷新V8测试套件页面。

当页面重新加载完毕，一个基准测试结果的评分将会出现。回到DevTools，点击停止按钮或者再次按Cmd＋E快捷键来停止记录。

上图的Bottom Up视图列出了影响性能的函数，它也能够用来检查这些函数的调用路径。

现在，通过点击Bottom Up / Top Down选择按钮来选择Top Down视图，然后点击函数列左边的小箭头，Top Down视图展示了一个调用结构的总体情况，从调用栈的顶部开始。

在函数列中选择一个函数，然后点击Focus selected function按钮(眼睛图标)。

这将过滤分析结果，只展示选中的函数和它的调用程序。点击Reload按钮（刷新图标）来恢复分析及过的原始状态。

选择函数列中的一个函数，然后点击Exclude selected function按钮（X图标）。根据你选择的函数，你会看到类似如下图片的东西：

Exclude selected function按钮的作用是从分析结果中移除选中的函数，然后计算排除之前函数后，调用函数的总时间。点击Reload按钮（刷新图标）来恢复分析及过的原始状态。

你可以记录多份分析数据图表。点击开始分析按钮，重新载入V8基准测试页面，然后点击停止分析按钮。

左侧的侧边栏列出了你记录的分析数据图表，右边的树形视图展示了选中的分析数据图表的信息集。

###使用烈焰图

烈焰图视图提供了一个JavaScript执行过程的可视化表示，和Timeline与Network展示的相似。执行完一个JavaScriptCPU数据分析后，通过详细视图中的烈焰图的功能，你可以以另一种方式来查看分析数据图表的数据。

#####可视化执行路径

通过分析和理解函数调用进程，你能够对你的应用的执行路径在视觉上得到一个更好的理解。

#####通过颜色码识别异常值
当缩小烈焰图，你可以识别出能够优化的重复图样，或者更重要的，你能够更加轻易地识别出异常值或者意想不到的执行过程。

#####时间量度(类似时间轴)上的可视化JavaScript分析数据
其它的JavaScript分析结果的数据是随着时间推移的累积，而烈焰图的报告数据是按时间显示的。这表明当你看到时间发生的时候，你就能跳进他们的时间量度里面，获取一些JavaScript执行过程的概览。举个例子，当你看到时间轴上黄色大条纹，这是一个能够查看问题的完美方法。

也许你甚至想要在记录JavaScript分析数据的同时，也做一个时间轴记录，这里有一个样例你可以这么做：

(function() {
  console.timeline();
  console.profile();
  setTimeout(function() {
      console.timelineEnd();
      console.profileEnd();
  }, 3000);
})();