Performance 面板中如何识别阻塞页面渲染的任务？

如何判断 Performance 面板中阻塞页面的渲染任务

在性能优化中，提升 Lighthouse 评分是一个常见目标。其中，优化阻塞页面的渲染任务尤为重要。Performance 面板中的「L」表示所有资源加载完成，并不能作为阻塞渲染任务的分界线。

寻找主线程区域

要分析阻塞渲染的任务，需要关注 Performance 面板中的 Main 区域（主线程区域），而不是 Network 网络区域。

查看渲染相关任务

在 Main 区域中，找到以下渲染相关的任务：

• Recalculate Style
• Layout
• Paint
• Commit

判断阻塞任务

在这些渲染任务之前的 JS 任务就是阻塞页面渲染的任务。进度条越长，表示阻塞的时间越长。

示例

下图展示了 Main 区域的一个示例，其中「Blocking the page」的绿色条表示阻塞页面渲染的任务：

[图片]

通过识别这些阻塞任务，可以进行有针对性的优化，从而提升页面渲染速度和 Lighthouse 评分。

以上就是Performance 面板中如何识别阻塞页面渲染的任务？的详细内容，更多请关注硕下网其它相关文章！