链接:Performance Analysis Reference
工具栏介绍
: 点击开始录制
: 刷新页面,重新录制,会自动停止
: 删除
: 查看内存使用情况
: 强制进行垃圾回收
: 设置,点击该按钮,可以设置Disabled JavaScript samples
等相关功能
: 设置网络
: 调节CPU性能(主要可以用来仿手机环境等)
其余在下面章节中会介绍到
Screenshot
开启的情况下,Frame
标签下会有屏幕当前屏幕的截图
关闭的情况下,则无
Disabale Javascript samples
不勾选的情况下,main
下面会显示调用的每个 JavaScript 函数
该图显示了DomContentLoaded
事件触发后,调用了Function Call
;
Function Call
往下又调用了e()
...,依次类推(Timeline事件参考)
勾选的情况下,没有详细的函数调用情况
Enable advanced paint instrmentation(slow)
查看渲染情况;
概览栏
: 每秒帧数;绿色竖线越高,FPS越高。FPS图表上的红色表示长时间帧,很可能会出现卡顿。
例如下图,我们可以移动概况栏,将时间轴集中到红色块附件,发现Layout
等右上角有红色小块,点击这些事件,Summary
下会显示对应的事件以及对应的代码位置。
: CPU资源,此面积表示消耗CPU资源的事件类型。
: 每条彩色横杠表示一种资源;横杠越长,检索资源所需的时间越长。
每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)
深色部分表示传输时间(下载第一个和最后一个字节之间的时间)
查看Main
块下的事件
选中对应的块,可以通过下面Summary
、Call Tree
、Bottom-up
、Event Log
查看详情
-
Call Tree
查看函数调用
-
slef time
:当前函数调用花费的时间 -
total time
:表示其与其子函数总花费的时间 -
filter
:筛选 -
grouping
:根据条件对活动表进行排序。 -
Show Heaviest Stack
: 显示所选活动哪些子函数执行时间最长
-
-
Bottom-up
查看哪些函数调用时间最长
slef time
当前函数调用花费的时间total time
表示其与其子函数总花费的时间
-
Event Log
按录制时的顺序查看事件
Duration
: 按花费时间进行筛选
查看其它
GPU
Raster
(光栅)interactions
: 查看用户交互network
- 色块介绍
HTML
文件为蓝色。JS
为黄色。CSS
为紫色。Images
为绿色。- 其他资源为灰色。
- 优先级
左上角蓝色越深,优先级越高
- 与
network
栏的对应关系- 左边的线:request send前
- 浅色块: request send 和tftb
- 深色块: content download
- 右边线: 等待主线程时间,不在Timing中显示
- 查看特定块消耗的时间
按住
shift
,单击鼠标进行选择块,查看该段消耗的时间
其他 —— 分析绘制
- 按
esc
,click,选择rendering
tab
- 打开
FPS meter
,实时显示当前页面的FPS,帧数越高,动画显示的越流畅。
Paint flashing
, 实时显示浏览器绘制,重绘时,会显示绿色的边框
-
Layer Borders
显示层的组合边界- 黄色边框:用于显示页面上的layer
- 蓝色栅格线:表示的是分块,这些分块可以看作是比层更低一级的单位
- 其他颜色的边框线,比如图片如果单独有个layer的话,边框线是蓝色的
-
Scrolling Performance Issues
分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。
具体可以查看链接Chrome渲染分析之Rendering工具使用
移动时间轴
- 鼠标移动
- 使用
A
、D
、W
、S
,进行时间轴的调节
保存/导出
右键点击Save profile
即可下载当前的性能分析视图
点击Load profile
即可载入上次的视图,进行分析
注意
- 尽可能保持记录简短。简短的记录通常会让分析更容易。
- 避免不必要的操作。避免与您想要记录和分析的活动无关联的操作(鼠标点击、网络加载,等等)。例如,如果您想要记录点击 Login 按钮后发生的事件,请不要滚动页面、加载图像,等等。
- 停用浏览器缓存。记录网络操作时,最好从 DevTools 的 Settings 面板或 Network conditions 抽屉式导航栏停用浏览器的缓存。
- 停用扩展程序。Chrome 扩展程序会给应用的 Timeline 记录增加不相关的噪声。 以隐身模式打开 Chrome 窗口或者创建新的 Chrome 用户个人资料,确保您的环境中没有扩展程序。