Chrome DevTools 推出全新的 Performance 面板！

文章预览

大家好，我是若川。 我持续组织了近3年的 源码共读活动 ，感兴趣的可以  点此扫码加我微信 ruochuan02  参与，每周大家一起学习200行左右的源码，共同进步。同时推荐 《学习源码整体架构系列》  、 历史面试系列 。 最近， 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 : 与之交互以触 ………………………………