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

走你啊啊啊啊啊

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/41fbb5ff5e33561cefeadd17c18a5edb.png) 最近在做性能优化想要提升`lighthouse`评分,想先从阻塞页面渲染的任务进行优化,`performance`面板中的`L`表示(所有资源加载完成),是不是可以以这个点为分界线,`L`之前的就是阻塞页面渲染的任务? ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/c6252d5e7358c6e7f36571ba43fd4077.png)进度条越长表示阻塞的越长?

阅读量:173

点赞量:0

问AI
如果是分析阻塞页面渲染的任务,应该看 Performance 面板的 Main 主线程区域,而不是 Netwrok 网络区域(你提供的截图区域错了)。 在 Main 区域找到渲染相关的任务,包括 Recalculate Style、Layout、Paint、Commit 等。那么在他们之前的 JS 任务就是你要找的阻塞页面渲染的任务了。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/11e3e84cae681be88da6580a7c989439.png) 希望我的回答对你有所帮助!