背景
最近，Chrome DevTools在 102 版本发布了新的Performance insights，让我们来了解一下这个新的面板。
为什么需要一个新的面板
大家都知道Chrome Devtools已经有了一个Performance面板（如下图）
对比上面这个Performance而言，新的Performance insights是一个实验性的模块，用来解决三个开发者的痛点：
-
痛点1：过多信息
通过重新设计UI，
Performance insights采用流式并简洁的只展示页面渲染的相关信息。 -
痛点2：难以分析
Performance insights以用例驱动帮助开发者进行分析，不过目前只支持页面加载的用例。 -
痛点3：对浏览器如何高效渲染页面需要较高的专业门槛
Performance insights在Insights模块里将关键指标高亮，并给出相关如何修复的建议。
介绍
打开 Performance insights面板
- 打开DevTools
- 点击右边三个竖点 -> More tools -> Performance insights
或者，也可以用Command Menu来打开Performance insights面板
性能记录
Performance insights支持两种性能记录的方式：正常记录和用例驱动记录（例如加载页面）
- 在新tab里打开这个demo
- 你可以在记录的时候调节CPU和网络。比如示例，我们可以禁用缓存，并把CPU设置为1/4倍。
调节是根据你电脑的性能来决定。例如，1/4倍的选项可以让你的CPU执行比平时慢4倍的时间，但是Devtools不能真实模拟手机设备的CPU，因为手机设备的架构设计跟台式机或者笔记本电脑完全不同
- 点击Measure page load。在页面重新加载的时候，DevTools开始性能指标的记录，然后会在页面加载完成后几秒钟内自动关闭性能记录。
如果你想记录一些页面操作性能，也可以点击Start recording来记录页面性能，对页面做一些交互，然后手动点击Stop recording来停止记录
回放记录
可以使用下方操作来控制记录的回放
- 点击Play (▶️) 播放记录
- 点击Pause (||) 暂停记录
- 点击x1，会弹出一个下拉选项，可以调整播放倍速（0.1 / 0.25 / 0.5 / 1）
- 点击最左侧的图标，可以用切换预览视窗的显示隐藏
记录跳转
DevTools默认会展示整个记录的时间轴。你可以通过缩放或者移动时间轴，跳转到你想看的记录帧。
- 点击时间轴可以移动播放点，并看到对应的记录帧
- 使用右下角的放大和缩小来控制时间轴的范围
- 时间轴放大后，可以用鼠标拖拽横向滚动条来移动时间轴（触摸板也可使用手势进行横向滚动）
- 当然，也可以用快捷键来进行上面这些操作，点击❓图标可以看到快捷键提示
Insights面板
Insights面板以时间轴的形式展示了一系列性能指标，对潜在性能问题给出了提示和修复建议。
鼠标悬浮在指标上，可以在主记录轴上看到对应的行为被高亮
点击进去，可以在Details面板看到更多详情：源文件、问题类型、如何修复、以及更多信息
关键性能指标
Web Vitals是一个由谷歌发起的网页性能指标，对于想要提高网页的用户体验提供专业的建议。
你可以在时间轴和Insights面板看到这些指标
布局偏移
布局偏移都组合在会话窗口。在上面这个例子，有两个会话窗口，会话窗口中一些间隙。
把布局偏移想象成火焰，一会很多偏移同时发生，暂停一会儿，又很多偏移发生。每个多偏移的集合就是会话窗口。想了解更多，可以看看会话窗口
累计布局偏移(CLS)是核心Web指标之一。在布局偏移轨道上可以发现潜在的布局偏移问题和原因
当改善CLS指标时，一般从最大会话窗口开始。在下面这个例子中，根据背景颜色和层级来看，会话窗口1是最大的会话窗口。
点击一个快照看看布局偏移的详情，查看潜在根源和受影响的元素
在这个例子中，潜在的根本原因就是unsized media，可以在优化累计布局偏移上了解如何修复它。
了解布局偏移分数
在Details中，Window是用来理解分数是如何计算的。Window展示了当前布局偏移数据哪个会话窗口。
假如整个页面都偏移了，每个布局偏移的最大分数为1。在下面这个例子中，第一次布局偏移分数为0.15，第二次布局偏移分数为0.041。
这个会话窗口的总分为0.19。对比CLS指标，这是需要优化的。会话窗口的背景颜色跟下面分数区间的颜色相对应。
会话窗口的背景图是随着时间而增加的。它反映了当时布局偏移的累积分数。
网络请求
可以在Network轨道查看网络请求。你可以展开网络轨道查看所有的网络请求，点击它们可以查看详情。
页面渲染
可以在Renderer轨道查看页面渲染。你可以展开每个渲染轨道查看所有的渲染步骤，点击它们可以查看详情。
GPU
可以在GPU轨道查看GPU的情况，不过GPU轨道默认是隐藏的，可以在右上角的设置(在下图可以看到)里打开它。
自定义面板
点击右上角⚙️图片进行设置，可以自定义时间轴和轨道的展示
导入/导出/删除
当然，性能记录也可以进行导入、导出、删除
总结
本文是基于Performance insights: Get actionable insights on your website's performance翻译而来，可以了解到新的Performance insight相比之前Performance而言：
- 给开发者提供更简洁友好的页面性能记录，在主界面从两个维度来展示整个页面渲染流程，横轴为时间轴，纵轴为渲染进程的各个阶段
- 给开发者提供了关键页面性能指标的分析，在Insight面板展示页面的性能指标和缺陷，并给出修复建议
- 对于常规开发者了解网页性能更加轻松，不过这还是一个实验性的模块，有很多优化的空间。
还有一篇是讲新的性能面板开发过程中碰到哪些难点以及如何解决的。
