背景重复 CSS 的浏览器中的图像性能

Question

有谁知道这两个选项之间的浏览器加载时间哪个更好：

background-image:url('1by1px.png');

或

background-image:url('10by10px.png');

为 div 重复的 1px x 1px 半透明 png。或者更大的说 10px x 10px。

必须进行某种循环才能在浏览器中显示重复的图像，所以我想知道1px by 1px 的图像是否会导致大量循环来显示图像，实际上它可能与循环较少的大尺寸图像相比，速度会慢吗？

当然，反驳的论点是 1by1 的图像尺寸比 10by10 的图像尺寸更小，但这并不意味着它越小越好，因为循环多次可能不如稍微少循环一次大图像尺寸那么好。

有没有人知道哪个更好以及浏览器如何处理这种情况？

Answer 1

我同意保罗的回答。 我最近用 Google Chrome 开发者工具做了一些粗略的测试。 我在背景图像上使用了不同大小的半透明 png 图像，并使用页面绘制时间来查看刷新屏幕需要多长时间。

结果如下：

没有 -webkit-transform hack 的刷新时间（四舍五入）：

2x2 图像：65-160ms

10x10 图像：60-150 毫秒

100x100 图像：55-135 毫秒

1000x1000 图像：55-130 毫秒

使用 -webkit-transform hack 刷新的时间（四舍五入）：

2x2 图像：40-120ms

10x10 图像：30-90 毫秒

100x100 图像：30-90 毫秒

1000x1000 图像：30-90 毫秒

就像 Paul 所说的，较大的图像比较小的图像需要更短的时间来加载（刷新）。 但是，在图像大于 10px 后，它似乎变得不那么有效了。我认为 100x100 和 1000x1000 之间没有太大区别。

在我看来，巨大的图像不会给您带来明显的效果，而且可能会增加加载时间。因此，我认为 10 到 100 左右的任何尺寸都足以满足性能和加载时间。

但是，不同的图像可能有不同的结果，我认为您应该使用 Google Chrome 开发人员工具中的页面绘制时间工具测试您的网站以获得准确的结果。

Answer 2

当不重复背景图像时，渲染所需的时间仅取决于最终缩放的图像，而不是原始图像。

文件中的图像被压缩为PNG格式，但被浏览器加载后，它是RGBA位图格式（一个像素4字节）。当重复背景时（假设在 Intel x86 上），浏览器的本地代码将使用 REP MOVSD 将位图数据从 RAM 移动到视频内存（这是标准顺序，可能在各种图形驱动程序或特定 GPU 的实现）。

假设包含背景的 HTML DIV 的尺寸为 100x100。

对于只有 1 个像素的图像：浏览器程序必须执行 10,000 条'REP MOVSD'指令。

对于 10x10 的图像：对于每个重复的图像，浏览器程序只需执行 10 次“REP MOVSD”（1 次调用“REP MOVSD”可以渲染图像的 1 像素行（像素行））。因此，在这种情况下，执行的“REP MOVSD”指令的数量将仅为 10x100 次（1 张图像中 10 次，100 次重复图像）。这总共需要 1000 'REP MOVSD'。

因此，基于较大图像的最终背景渲染速度会更快。

更多注释： 上述解释并不意味着 10x10 图像的性能正好好 10 倍。 'REP MOVSD'（例如 CX=9999）只有 1 条单 CPU 指令，但仍需要通过数据总线传输 9999x4 字节。如果使用 9999 个简单的 'MOV's，那么很多数据仍然需要通过数据总线，但是，CPU 必须执行更多的 9998 条指令。更聪明的浏览器会为背景创建一个带有复制图像的预渲染位图；因此每次需要传输到显存时，只需要 100 个“REP MOVSD”（100 是最终背景中的像素行数，如上所示）而不是 10000 或 1000。 p>