Evaluate critical render path 评估关键渲染路径

Evaluate critical render path 评估关键渲染路径

LightHouse 的使用

• Lighthouse 会对页面运行一系列自动化测试，然后生成关于页面的 CRP 性能的报告

使用 Navigation Timing API 设置您的代码

• domLoading：这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节
• domInteractive：表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点【DOM准备就绪】
• domContentLoaded：表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点，这意味着现在我们可以构建渲染树了【DOM和CSSOM均准备就绪】
  • 许多 JavaScript 框架【await】都会等待此事件发生后，才开始执行它们自己的逻辑。因此，浏览器会捕获 EventStart 和 EventEnd 时间戳，让我们能够追踪执行所花费的时间
• domComplete：表示网页及其所有子资源都准备就绪的时间点
• loadEvent：作为每个网页加载的最后一步，浏览器会触发 onload 事件，以便触发额外的应用逻辑【Render Tree之前，也就是JavaScript可以操纵页面上的所有元素了】