chrome performance性能检测面板

chrome performance性能检测

参考

https://developer.chrome.com/docs/devtools/evaluate-performance/（主要参考，很多直接翻译的官方文档）有些图是官方的，有些自己截得

https://zhuanlan.zhihu.com/p/163474573

https://blog.youkuaiyun.com/weixin_33674976/article/details/91390874

操作面板

开始、清空

三个按钮功能：
1、点击开始分析

2、开始分析并重新加载页面

3、清空报告

当点击1、2按钮都会开始记录分析，只是第二个按钮会先重载页面后才开始记录。开始记录后会弹出下方弹框，

Status: 状态，记录中

Time: 记录时间

Buffer usage： 缓冲区使用。当缓冲区已满时，Chrome 会尝试有选择地记录日志，但会丢失很多事件。 缓冲区填充的速率取决于页面上发生的情况，页面简单和复杂会产生不同的缓冲区填充率。

上传、下载

除了这两个按钮，在performance界面鼠标右键也会出现加载和保存菜单。

1、加载记录文件，需要上传一个json文件

2、保存记录文件，格式如下

选择分析报告

可选择展示当前和近期的分析报告

几个多选框

1、Screenshots

屏幕截图，勾选后报告会显示当前时间页面截图

2、Memory

记录当前时间下的堆、文档、节点、监听器、GPU内存。可以看到上方的HEAP表和下方的JS Heap曲线是对应的。如果曲线一直增长，说明存在内存泄漏。也可以通过浏览器的任务管理器查看各页面内存情况，如果内存一直增加就说嘛可能存在内存泄漏，超过一定程度就会导致页面崩溃。

3、Web Vitals

可衡量用户体验的标准，颜色绿->橙->红，绿色性能好，橙色需要提高，红色性能差。

Core Web Vitals

1、Cumulative Layout Shift (CLS)累计布局偏移，衡量页面整个生命周期内发生的每个意外布局偏移的最大布局偏移分数的度量，应该<0.1

2、First Input Delay (FID)首次输入延迟，应该在100ms内

3、Largest Contentful Paint (LCP)最大内容绘制时间，应该在2.5s内

Other Web Vitals

1、First Contentful Paint (FCP)首次内容绘制时间

2、Time to First Byte (TTFB)服务器响应时间

垃圾回收

垃圾回收，垃圾是指程序不再使用的，但还占用的内存。它工作在引擎内部，所以点击后其实前端并没有什么直接感受。

捕获设置

点击会展开以下选项

1、Disable javascript samples: 禁用 javascript 示例 ，默认main部分会显示调用的 JavaScript 函数的详细调用堆栈，勾选后会禁用这些调用堆栈。打开后生成的main部分会短很多，因为省略了调用堆栈

2、Enable advanced paint instrumentation: 启用高级绘画工具，点击frames部分，会在详情layers部分显示布局信息。

3、Network: 设置当前网络加载速度，默认不节流。可选离线和快慢3G

4、CPU：设置当前CPU运算速度，默认不节流。可选四倍和六倍减速

可视报告

所有表中都是深黄色代表脚本活动，紫色事件代表渲染活动。

最上方是时间轴，可以通过区域选择某个时间范围内的数据。鼠标前滚缩小，后滚放大，也可手动空值具体分析哪个时间段的数据

FPS

Frames Per Second，每秒传帧数（帧率，刷新率）， FPS 上方出现红色条时，就意味着帧率下降得太低，可能会损害用户体验。 一般来说，绿色条越高，FPS 越高，画面越流畅，用户体验就越好。当然过高也不好，分辨率不变的情况下，FPS越高，则对显卡的处理能力。

小Tips

点击进入并勾选 Frame Rendering Stats

会在页面左上方出现这样一个实时统计，方便我们查看fps,GPU内存，对于对动画有性能要求的页面是非常有用的。

当然这里还有很多其他选项可以尝试，方便我们查看网页性能等。

CPU

CPU 图表中的颜色对应于“性能”面板底部“摘要”选项卡中的颜色，如果图表充满颜色，说明CPU长时间处于最大值状态，需要减轻负担

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GlgRWDH-1632646625321)(https://developer-chrome-com.imgix.net/image/admin/XFtPfdKzTPBXeQC9g9OC.svg)]

NET

Network

记录资源加载和网络请求等

请求的颜色编码如下：

• HTML：蓝色
• CSS：紫色
• JS：黄色
• 图片：绿色

请求左上角的深蓝色方块表示它是一个更高优先级的请求。浅蓝色方块表示优先级较低。

一个请求可分为四个部分

1、最左端的线|-表示Connection Start，是在请求发送前的所有内容

2、请求方块浅色的部分表示Request Sent请求发送和Waiting (TTFB)服务器响应时间。

3、请求方块最右端的深色部分是Content Download表示内容下载花费

4、最右侧的一条线是等待主线程花的时间

一般在Network选项卡选择某一个请求，可在右侧看到该请求的具体信息，其中Timing tab除了上文第四条都有展现。开根据其判断是否需要优化。

Frames

记录每个时间段的fps，红色部分表示掉帧（baidu: 硬件不足以负荷显示器画面动态显示刷新的频率，从而帧率过低所造成的画面出现停滞（或短时间或长时间）现象）。

开启了操作栏的Screenshots,这里也会展示每个时间的界面截图，方便查看页面变化

Interactions

记录用户交互

Main

x轴表示时间轴，每个条形代表一个事件，越宽代表花费时间越长。y轴表示调用堆栈，高的事件调用低的事件。

按住shift单机并拖动，可查看这部分的耗费时间

颜色

• 来自一个脚本的函数调用为浅绿色。来自另一个脚本的调用是米色的.

• 与Summary图表一致，深黄色代表脚本活动，紫色事件代表渲染活动

• 当条形右上角上出现红色三角形时表示可能存在与此事件相关的问题的警告。 （每当执行 requestAnimationFrame() 回调时，就会发生 Animation Frame Fired 事件。 ）

选中某一个事件块，可通过键盘箭头切换

例如：

1. Schedule Style Recalculation：重新计算样式

Raster

光栅，记录光栅化线程

GPU

方块表示何时有使用GPU加速，宽度表示使用时间

详情

一般点击上方分析图的小方块，此处数据就会显示当前点击部分的具体情况。

summay摘要

主要统计当前各模块使用时间。(大部分可意会)这里列举部分

• scripting：js执行，（可能还分自身执行，孩子执行（如引入的文件））
• system：系统运行
• other: 其他
• idle: 浏览器闲置

Bottom-Up

执行的事件，可以看到各活动占用的时间。Self Time 表示直接花费的时间，Total Time表示在该活动和其所有子活动花费的时间。

可以看到该事件是执行的微任务，包含了重新计算样式+布局+调用方法+请求状态改变+解析html。后面是相关代码的文件，点击即可进入对应位置查看具体操作

Call Tree

调用树，查看根活动（根活动是那些导致浏览器做一些工作的活动。例如，当单击一个页面时，浏览器会触发一个Event作为根 Activity 的 Activity。这Event可能会导致处理程序执行，等等。其在Main,call Tree 、Event Log都是最高级）

我这个就是一个点击事件没有后续的调用。

展开后成为一个树形结构

最右侧存在按钮Show Heaviest Stack点击后可查看最重堆栈

Event Log

事件日志

Layers

勾选高级绘画工具，选择frames中一块，就能看到layer，选择中心布局某块会与左侧联动。选择左侧dom会与页面联动。

其他

ctrl+F打开搜索框，可以使用正则表达式进行查找，上下箭头切换，也可选择是否区分大小写（Aa按钮）