CSS 内容可见性是否可以改善图像解码时间?

问题描述

CSS content-visibility 属性是否可以缩短 Chrome 等浏览器中的图像解码时间?

解决方法

至少从 Chrome 浏览器的角度来看,我们认为使用 content-visibility:auto 不会在图像解码方面提供有意义的节省。

content-visibility 现在允许我们在屏幕外设置布局样式,从而提供渲染优势。然而,当谈到图像解码时,有两个主要的事情要记住:图像是画的吗?我们是否正在光栅化使用此图像的内容?

对于第一点,我们确实没有为 content-visibility 受影响的图像绘制图像内容,因此这里可能会节省一些小成本。然而,在光栅时间,我们只解码光栅化所需的图像。我们只在视口周围保留一小块区域。这意味着,无论是否设置了内容可见性,我们都不太可能解码甚至有点远的屏幕外图像。

注意:对于绘画,可能存在浏览器解码图像的情况(例如确定我们是否应该为深色主题反转它)。但是,这些情况非常罕见,因为我们旨在避免在绘制时进行解码。