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

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《如何从 Performance 面板识别阻塞页面渲染的任务？ 》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

从谷歌 Performance 面板分析阻塞页面渲染的任务

在性能优化中，提升 Lighthouse 评分是常见的目标。其中，优化阻塞页面渲染的任务是关键步骤。那么，如何从 Performance 面板中识别这些任务呢？

分析错误区域

题主提到的 Network 区域面板无法用于分析阻塞页面渲染的任务。正确的方法是查看 Performance 面板中的 Main 主线程区域。

查找渲染相关任务

在 Main 区域，我们需要关注与渲染相关的任务，包括：

• Recalculate Style
• Layout
• Paint
• Commit

确定阻塞任务

在这些渲染任务之前执行的 JS 任务就是阻塞页面渲染的任务。进度条的长短并不直接反映任务的阻塞时间。

示例

上图展示了 Performance 面板的 Main 区域。在 Paint 任务之前执行的 JS 任务，即为阻塞页面渲染的任务。

温馨提示：

• 可以使用 Chrome DevTools 的 "Record page load" 功能记录页面加载过程，方便分析。
• 优化阻塞任务时，应侧重于减少脚本执行时间或将其拆分到多个较小的任务。

终于介绍完啦！小伙伴们，这篇关于《如何从 Performance 面板识别阻塞页面渲染的任务？ 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！