浏览器性能分析工具

浏览器性能分析工具

开始

以chrome浏览器为例，使用F12打开开发者工具

可以在隐身模式下打开浏览器，在隐身模式下打开Google Chrome。隐身模式可以确保Chrome在干净的状态下运行。例如，如果安装了很多扩展，这些扩展可能会影响到性能分析的结果。

打开后可以看到几个Tab，性能分析时主要关注Performance 和 Memory。

在进行性能分析时，经常会需要模拟低配置机器的性能，可以在Performance 内设置中限制CPU的使用，默认是降低4倍和6倍，也可以自定义。另外，我们能看到，在这里也可以对网速进行限制。

官方文档

官方案例

Performance

功能区

录制运行时性能记录

点击录制后，在当前页面进行操作，DevTools就会记录下所有页面活动，停止记录后就会生成对应分析报告

加载时性能记录录制

有的时候需要记录页面刷新时页面的性能分析，这时候可以点击重新加载按钮，DevTools会自动触发一次刷新，然后记录页面加载时各项性能指标。页面加载完成后会自动停止记录并生成对应分析报告

清除

清除所有已经生成的分析结果，后面的下拉框可以选择不同分析结果进行查看

生成快照

开启Screenshots选项后，DevTools将会每一帧记录屏幕快照。

开启前后对比：

• 开启后

• 开启前

开启内存记录

开启后会显示内存使用情况，记录过程中还可以点击 进行强制垃圾回收

禁用JavaScript调用栈记录

默认情况下，记录中Main部分会详细显示整个录制过程中JavaScript函数调用栈情况。选中Disabale JavaScript samples选项后将不会记录所有JavaScript栈调用，通常用于模拟手机时，

记录渲染事件细节

开启Enable advanced paint instrumentation(slow)后将会记录渲染事件的细节，如下图，可以看到开启后，选择frames中的一块，下方多了一个Layers

结果分析

如图，分析结果可以分为4个区域(如果没有开启memory只有三个区域，没有区域3)

区域1 概览面板(overview)

概览面板主要显示整个记录的整体信息，包括FPS，CPU, NET, HEAP等。在概览面板可以通过鼠标点击滑动来选中范围，选中后其他三个区域会跟着联动显示选中区域的数据。
概览面板并没有多少有用的数据，只是提供一个大致的轮廓，更多的是去选择下面区域数据的显示范围。

1. FPS
   每秒帧数，绿色代表好，红色代表差，出现红色意味着页面出现了卡顿现象，可以在区域三中Frame中看到具体的FPS值

2. CPU
   CPU处理各个任务花费的时间，不同颜色代表脚本、渲染等花费的时间，详见区域4的说明

3. NET
   NET标识各个请求花费的时间，demo中没有网络请求，所以看不到，可以参考这张图片:

区域2 线程面板

线程面板主要包括Frame、Experience、Main、Raster、GPU等

1. Frames

   Frames: 帧线程，在这里可以看到每一个块的具体FPS数值

2. Main

   Main：主线程，执行Javascript, 解析HTML/CSS, 完成绘制。
   可以看到主线程的全部调用栈(没用选中Disabale JavaScript samples时)和耗时情况，每个长条都是一个事件，悬浮可以看到耗时和事件名，这里我们可以通过查看调用栈和耗时情况，追溯出性能瓶颈点在哪里

   • x轴指时间
     最上面的第一条就是事件触发的地方，直到结束，这条线是最长的
   • y轴指调用栈
     上面的event调用了下面的子event，越到下面数量越少（瀑布）

不同颜色代表不同事件类型:

3. Raster

   Raster负责某个layer或者某个块的绘制

区域3 内存面板

内存面板在选中Memory后显示

内存面板会显示包括JS 堆内存在内的内存使用情况，这里我们主要关注JS Heap就可以了。

区域4 统计面板

统计面板会对时间进行分类统计，通常有四个tab:

1. Summary 汇总统计了各项任务花费的时间，和概览面板中CPU中对应

   • Scripting 脚本

   • Rendering 渲染

   • Painting 绘制

   • Loading 加载

   • ldle 闲置

2. Bottom-Up

   根据事件耗时长短，反向列出事件列表，有分类可选(通过类型、域、子域、URL分类列出)，面板右边也有详细介绍，不过基本和左边相似，就不多介绍了。

3. Call Tree

   可在树形图中查看各项事件的子项信息，及各子项的信息,同样也有分组筛选，规则同上，面板右边同上,

   和bottom-up基本相同，不同的是事件调用跟踪信息更详细的列在了树形图上

4. Event log

   明确列出各项事件的详细信息，可以进行关键字筛选，所耗时间筛选，事件类型筛选等，右边是详细信息，可看到函数调用栈的跟踪信息。

Memory

简单内存信息查看

可以直接使用浏览器自身任务管理器查看各个tab使用情况，通过设置—更多工具—任务管理器查看(快捷键Shift+ESC)。

右键还可以勾选需要显示的信息列

Memory面板

上面有三个按钮：

1. Heap snapshot

   用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配。可以通过切换Summary/Container/Statisitcs切换不同显示形式，如图

   • Summary

   

   • Container
     

   • Statisitcs
     

2. Allocation instrumentation on timeline

   在时间轴上记录内存信息，随着时间变化记录内存信息。

   Allocation instrumentation on timeline可以理解成动态记录的Heap snapshot

3. Allocation sampling

   内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

   Allocation sampling可以显示出哪些函数影响了内存的分配，并且该函数所耗内存在内存分配中占比多少。效果图如下：

性能分析感想

性能分析时，可以从大的角度入手，比如先通过浏览器任务管理器查看需要分析的页签的内存占用情况，然后再一步步细化，通过Performance和Memory分析，动态静态结合，一步步定位到具体的问题，然后解决

参考资料

1. Chrome DevTools
2. chrome devtools使用详解——Performance
3. https://zhuanlan.zhihu.com/p/80792297