加速JavaScript执行

使用Chrome DevTools CPU Profiler（分析器）识别高开销的函数。

TL;DR

• 通过CPU Profiler（分析器）准确记录被调用的函数以及花费的时间长度。
• 将您的分析形象好为火焰图。

录制一个CPU分析

如果你注意到你的JavaScript中有卡顿现象，那么请收集一个JavaScript CPU 分析。CPU分析显示页面功能中执行时间花费比较多的位置。

• 转到DevTools的Profiles(分析)面板。
• 选择Collect JavaScript CPU Profile(收集JavaScript CPU 分析)单选按钮。
• 点击Start(开始)。
• 根据您要分析的内容，您可以重新加载页面，与页面交互，或者只是让页面运行。
• 完成后按Stop(停止)按钮。

您还可以使用命令行API在命令行中录制和分组分析。

查看CPU分析

当您完成录制时， DevTools使用录制中的数据自动填充Profile(分析)面板。

默认视图为Heavy (Bottom Up)。这个视图使您可以查看哪些函数对性能影响最大，并检查这些功能的调用路径。

更改排序顺序

要更改排序顺序，可以点击下拉菜单菜单旁的focus selected function图标() 单击焦点所选功能图标旁边的下拉菜单,然后选择以下选项之一：

Chart(图表) - 显示按照录制时间顺序的火焰图。

Heavy (Bottom Up) - 根据对性能影响，从大到小的顺序列出函数，并使您能够检查函数的调用路径。这是默认视图。

Tree (Top Down) - 从调用栈的顶端开始，显示调用结构的树状图。

排除函数

要从CPU分析中排除某个函数，单击选择它，然后点击exclude selected function(排除所选函数)图标（）。排除函数的调用者管理排除函数的总时间。

单击restore all functions恢复所有函数图标（）将所有排除的功能恢复回录制。

以Flame Chart(火焰图表)查看CPU配置

Flame Chart(火焰图表)视图提供了CPU分析随着时间推移的可视化表示。

在录制CPU分析后，在图表上通过更改排列顺序查看录制。

Flame Chart(火焰图表)分为两个部分：

1. Overview(概览) - 整个录制的概览图。条的高度对应于调用栈的深度。所以，条越高，调用栈越深。
2. Call Stacks(调用栈) - 这是在录制期间调用的函数的深入详细的视图。水平轴是时间，垂直轴是调用栈。栈的调用结构树状图是自上而下的。所以，顶部的函数调用它下面的函数，以此类推。

函数着色是随机的。与其他面板中使用的颜色没有相关性。但是，函数调用时颜色始终是相同的，这样你可以看到执行的模式。

调用栈图中垂直高度没有太大意义，它只是意味着很多函数被调用。但是一个宽的条形意味着调用花费较长时间才能完成。这些是需要优化的候选对象。

放大录制的指定部分

在Overview(概览)上单击、按住并向左或右拖动鼠标移动，可以放大调用栈的指定部分，缩放后，调用栈自动显示你选择的录制部分。

查看函数的详细信息

单击函数可以在Sources(源文件)面板中查看其定义。

将鼠标悬停在某个函数上可以显示函数名称和计时数据。下面是提供的详细信息：

• Name(名称) ： 函数的名称。
• Self time(自身时间) ：当前函数完成调用所需的时间，仅包括函数本身中的语句，不包括它调用的任何函数。
• Total time（总时间 ： 当前函数完成调和该函数调用的任何函数所花费的时间。
• URL(地址) ：函数定义在文件中的位置为file.js：100，其中file.js是定义函数的文件的名称，100是定义的行号。
• Aggregated self time(合计自身时间) ：在录制中函数的所有调用的合计时间，不包括由此函数调用的函数。
• Aggregated self time(合计总时间) ：函数的所有调用的总时间，包括此函数调用的函数。

• Not optimized(未优化) ：如果优化器检查到该函数有可优化空间，那么在这个地方会被列出来。