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

Question

最近在做性能优化想要提升lighthouse评分，想先从阻塞页面渲染的任务进行优化，performance面板中的L表示（所有资源加载完成），是不是可以以这个点为分界线，L之前的就是阻塞页面渲染的任务？
进度条越长表示阻塞的越长？

Answer 1

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

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

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