如何优化在 Chrome Dev Tools Performance 选项卡中看到的 Raster (Rasterizer Thread)？

Question

我试图理解为什么这些 Raster 过程的持续时间如此之长，但我发现文档很少。

从其他人的问题来看，我认为这可能与正在绘制的图像、javascript 侦听器或由于次优 CSS 转换而重新绘制的元素有关，但删除图像、javascript 和 CSS 转换并没有解决问题。

有人能指出我正确的方向吗？我如何缩小导致这个漫长过程的元素或脚本的范围？已经两天了，我没有任何进展。

谢谢！

Answer 1

“光栅”部分代表与绘画相关的所有活动。毕竟，任何 HTML 页面都是一个“图像”。浏览器将您的 DOM 和 CSS 转换为图像以将其显示在屏幕上。你可以在这里阅读它。因此，即使页面上没有任何图像，您仍然会在“光栅”中看到至少一个光栅化线程，它表示将您的 HTML 页面转换为“图像”。

顺便说一下，Chrome(79.0.3945.79) 提供了一些信息，如果图像是在这个线程中启动的。

此外，您可以在“性能”设置中启用“高级绘画工具”，以更详细地查看浏览器呈现图像时发生的情况