performance - 如何优化 Chrome 开发工具性能选项卡中的光栅（光栅化线程）？

Question

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

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

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

谢谢！

标签： performancegoogle-chromeoptimizationraster

Answer 1

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

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

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