Chrome 的性能分析面板更新了

主要观点总结

Chrome的DevTools Performance面板进行了全新改版，提升了易用性，并分为landing页和侧边栏两部分。新面板突出了Core Web Vitals Data的实验数据和现场数据，提供了友好的解释，并能链接到对理解性能指标很重要的元素。通过收集页面加载记录，会显示LCP Requests Discovery部分和LCP by Phase部分，有助于发现有关LCP资源的建议和分解LCP的不同阶段。更新后的面板还包括开始新录制、调节CPU和网络条件的控件。

关键观点总结

关键观点1: Chrome DevTools Performance面板全新改版

新版面板提高了功能的易用性，分为landing页和侧边栏，侧边栏可在录制后打开。

关键观点2: Core Web Vitals Data的实验数据和现场数据

新面板能够显示Core Web Vitals Data的实验数据和来自Chrome用户体验报告的现场数据，包括Lab Data和Field Data。

关键观点3: 友好的指标解释和元素链接

性能面板提供友好的指标解释，并能链接到对理解性能指标很重要的元素，如LCP元素和INP元素。

关键观点4: LCP Requests Discovery和LCP by Phase

通过收集页面加载记录，性能面板会显示LCP Requests Discovery部分和LCP by Phase部分，有助于发现有关LCP资源的建议和分解LCP的不同阶段。

关键观点5: 新的控制和调节功能

更新后的Performance面板包括开始新录制的控件，以及调节CPU和网络条件的功能，以模拟真实的用户体验。

文章预览

最近， Chrome 的 DevTools Performance 面板迎来了全新改版，功能的易用性得到了全面提升。 新的 Performance 面板分为两个主要组成部分： landing 页：显示 Core Web Vitals 的实验和现场指标： 还不了解 Core Web Vitals 的同学可以看我之前这篇文章： 解读新一代 Web 性能体验和质量指标 侧边栏（可以在录制后打开）：提供其他补充信息，例如 LCP 加载阶段： 下面是 5 个具体模块： Core Web Vitals Data : LCP、CLS 和 INP 的实验数据(Lab Data)和现场数据(Field Data) CrUX Data Settings : 自定义 Chrome 用户体验报告中的现场数据 INP Interaction Element : 与之交互以触发 INP 的元素 Recording Settings : 控制 CPU 和网络条件 Recording Controls : 开始录制 新的 Performance 面板的一个突出特点是它能够显示 Core Web Vitals Data 的实验数据和现场数据： 实验数据（Lab Data）: 从你的本地浏览会话收集的 ………………………………