浏览器性能分析工具
开始
以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
等。在概览面板可以通过鼠标点击滑动来选中范围,选中后其他三个区域会跟着联动显示选中区域的数据。
概览面板并没有多少有用的数据,只是提供一个大致的轮廓,更多的是去选择下面区域数据的显示范围。
-
FPS
每秒帧数,绿色代表好,红色代表差,出现红色意味着页面出现了卡顿现象,可以在区域三中Frame
中看到具体的FPS值 -
CPU
CPU
处理各个任务花费的时间,不同颜色代表脚本、渲染等花费的时间,详见区域4的说明 -
NET
NET
标识各个请求花费的时间,demo中没有网络请求,所以看不到,可以参考这张图片:
区域2 线程面板
线程面板主要包括Frame
、Experience
、Main
、Raster
、GPU
等
-
Frames
Frames
: 帧线程,在这里可以看到每一个块的具体FPS数值
-
Main
Main
:主线程,执行Javascript, 解析HTML/CSS, 完成绘制。
可以看到主线程的全部调用栈(没用选中Disabale JavaScript samples
时)和耗时情况,每个长条都是一个事件,悬浮可以看到耗时和事件名,这里我们可以通过查看调用栈和耗时情况,追溯出性能瓶颈点在哪里- x轴指时间
最上面的第一条就是事件触发的地方,直到结束,这条线是最长的 - y轴指调用栈
上面的event调用了下面的子event,越到下面数量越少(瀑布)
- x轴指时间
不同颜色代表不同事件类型:
-
Raster
Raster
负责某个layer或者某个块的绘制
区域3 内存面板
内存面板在选中Memory
后显示
内存面板会显示包括JS 堆内存在内的内存使用情况,这里我们主要关注JS Heap就可以了。
区域4 统计面板
统计面板会对时间进行分类统计,通常有四个tab:
-
Summary 汇总统计了各项任务花费的时间,和概览面板中CPU中对应
-
Scripting
脚本 -
Rendering
渲染 -
Painting
绘制 -
Loading
加载 -
ldle
闲置
-
-
Bottom-Up
根据事件耗时长短,反向列出事件列表,有分类可选(通过类型、域、子域、URL分类列出),面板右边也有详细介绍,不过基本和左边相似,就不多介绍了。
-
Call Tree
可在树形图中查看各项事件的子项信息,及各子项的信息,同样也有分组筛选,规则同上,面板右边同上,
和bottom-up基本相同,不同的是事件调用跟踪信息更详细的列在了树形图上
-
Event log
明确列出各项事件的详细信息,可以进行关键字筛选,所耗时间筛选,事件类型筛选等,右边是详细信息,可看到函数调用栈的跟踪信息。
Memory
简单内存信息查看
可以直接使用浏览器自身任务管理器查看各个tab使用情况,通过设置—更多工具—任务管理器查看(快捷键Shift+ESC)。
右键还可以勾选需要显示的信息列
Memory面板
上面有三个按钮:
-
Heap snapshot
用以打印堆快照,堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配。可以通过切换Summary/Container/Statisitcs切换不同显示形式,如图
- Summary
-
Container
-
Statisitcs
-
Allocation instrumentation on timeline
在时间轴上记录内存信息,随着时间变化记录内存信息。
Allocation instrumentation on timeline可以理解成动态记录的Heap snapshot
-
Allocation sampling
内存信息采样,使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销,可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。
Allocation sampling可以显示出哪些函数影响了内存的分配,并且该函数所耗内存在内存分配中占比多少。效果图如下:
性能分析感想
性能分析时,可以从大的角度入手,比如先通过浏览器任务管理器查看需要分析的页签的内存占用情况,然后再一步步细化,通过Performance和Memory分析,动态静态结合,一步步定位到具体的问题,然后解决