从谷歌 performance 面板分析阻塞页面渲染的任务
在性能优化中,提升 Lighthouse 评分是常见的目标。其中,优化阻塞页面渲染的任务是关键步骤。那么,如何从 Performance 面板中识别这些任务呢?
分析错误区域
题主提到的 Network 区域面板无法用于分析阻塞页面渲染的任务。正确的方法是查看 Performance 面板中的 Main 主线程区域。
查找渲染相关任务
在 Main 区域,我们需要关注与渲染相关的任务,包括:
Recalculate StyleLayoutPaintCommit
确定阻塞任务
在这些渲染任务之前执行的 JS 任务就是阻塞页面渲染的任务。进度条的长短并不直接反映任务的阻塞时间。
示例
上图展示了 Performance 面板的 Main 区域。在 Paint 任务之前执行的 JS 任务,即为阻塞页面渲染的任务。
温馨提示:
可以使用 Chrome DevTools 的 “Record page load” 功能记录页面加载过程,方便分析。优化阻塞任务时,应侧重于减少脚本执行时间或将其拆分到多个较小的任务。
以上就是如何从 Performance 面板识别阻塞页面渲染的任务?的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2801411.html