如何从谷歌performance面板分析哪些是阻塞页面渲染的任务?

作者站长头像
站长
· 阅读数 10

如何从谷歌performance面板分析哪些是阻塞页面渲染的任务?

最近在做性能优化想要提升lighthouse评分,想先从阻塞页面渲染的任务进行优化,performance面板中的L表示(所有资源加载完成),是不是可以以这个点为分界线,L之前的就是阻塞页面渲染的任务?如何从谷歌performance面板分析哪些是阻塞页面渲染的任务?进度条越长表示阻塞的越长?

回复
1个回答
avatar
test
2024-06-20

如果是分析阻塞页面渲染的任务,应该看 Performance 面板的 Main 主线程区域,而不是 Netwrok 网络区域(你提供的截图区域错了)。

在 Main 区域找到渲染相关的任务,包括 Recalculate Style、Layout、Paint、Commit 等。那么在他们之前的 JS 任务就是你要找的阻塞页面渲染的任务了。

answer image

希望我的回答对你有所帮助!

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容