专注于
IT技术和业内交流

Chrome DevTools — 优化JS运行速度

运用 Chrome DevTools CPU Profiler识别可优化函数。

CPU profile

记录CPU profile

如果在你的JavaScript注意到有jank(卡顿)现象,那么就要收集JavaScript CPU profile来看看。
CPU profiles展示你的页面功能中哪个执行进程花费了时间。

  1. 进入DevTools的Profiles 面板。
  2. 选择Collect JavaScript CPU Profile 按钮。
  3. 点击Start
  4. 根据分析,你可以重新加载页面、与页面交互或仅仅让网页运行。
  5. 结束时点击Stop 按钮。

你也可以运用Command Line API从中记录、组合profiles 。

查看CPU profile

当你结束录制,记录的数据会自动填充展示到Profile面板。

默认视图是Heavy (Bottom Up)。这个视图让你看到哪些函数对性能有着最大影响,同时检测这些函数的调用路径。

改变排列顺序

想要改变排列顺序。可以点击dropdown菜单旁的
focus selected function 图标(focus selected function icon)

然后,选择下列选项:

Chart:按时间顺序展示的火焰图。

flame chart

Heavy (Bottom Up):按对性能的影响列出函数,也可以查看函数的调用路径,默认视图。

heavy chart

Tree (Top Down): 从调用栈的顶端开始,展示调用结构的树状图。

tree chart

排除函数

为了过滤CPU配置文件中的函数,可以点击并选中它,然后点击exclude selected function图标(exclude function icon)。排除函数的调用者管理排除函数的总时间。

单击restore all functions 图标 (restore all functions icon)在记录中恢复所有排除函数。

以Flame Chart查看CPU配置

Flame Chart视图提供随时间变化的CPU配置信息视觉显示。

录制CPU配置文件后,在图表上通过更改排列顺序查看记录。

Flamechart view

flame chart分为两个部分:

  1. Overview:整个记录的鸟瞰图。
    条形图的高度对应于调用堆栈的深度。所以,条形图越高,调用
    堆栈越深。

  2. Call Stacks:这是一个在记录时被调用函数的深入详尽的视图,横轴表示时间,纵轴表示调用栈。栈的调用结构树状图是自上而下的。所以是上面的函数调用它下面的,以此类推。

    函数是随机着色的。这与其他面板所用的颜色没有关系。但是,通常函数调用时颜色是统一的,以便能看到执行的模式。

annotated flame chart

调用栈图中垂直高度没有太大意义,它仅仅表示大量的函数被调用。但是条形图宽意味着调用完成花费较长时间。这些花费时间长的就是优化的候选对象。

放大记录的特定部分

在overview上向左或右通过单击、按住并拖动鼠标移动,可以放大调用栈的特定部分,放大后,调用栈自动显示你选择的记录的某部分。

flame chart zoomed

查看函数的 details

Sources 面板点击一个函数查看它的定义。

将鼠标悬停在一个函数来显示其名称和计时数据。下面是提供的详细信息:

  • Name: 函数的名称。
  • Self time:当前函数调用完成花费的时间,只包括函数本身语句,不包括子函数。
  • Total time:当前调用函数以及子函数花费的时间总和。
  • URL:函数定义在文件中的位置,比如file.js:100,表示函数在file.js文件的第100行定义。
  • Aggregated self time:聚合时间,所有记录中函数的调用所用时间,不包括子函数所用时间。
  • Aggregated total time:聚合总时间,对所有函数的调用所用时间,包括子函数所用时间。
  • Not optimized:优化器检查到该函数有可优化空间。

viewing functions details in flame chart

本文由朱怡霏翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 优化JS运行速度

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们