有谁知道这两个选项之间的浏览器加载时间哪个更好：
background-image:url('1by1px.png');
或者
background-image:url('10by10px.png');
为 div 重复的 1px x 1px 半透明 png。或者更大的说 10px x 10px。
必须进行某种循环才能在浏览器中显示重复的图像，所以我想知道1px by 1px导致大量循环显示图像的图像是否实际上可能比更大的图像速度慢具有较少循环的尺寸图像？
当然，相反的论点是 1by1 的图像尺寸比 10by10 的图像尺寸更小，但这并不意味着它更小更好，因为循环多次可能不如循环大图像尺寸稍微少一些。
有没有人知道哪个更好以及浏览器如何处理这种情况？
当不重复背景图像时，渲染所需的时间仅取决于最终缩放的图像，而不是原始图像。
文件中的图像被压缩为PNG格式，但被浏览器加载后，它是RGBA位图格式（一个像素4字节）。当重复背景时（假设在 Intel x86 上），浏览器的本机代码将使用REP MOVSD将位图数据从 RAM 移动到视频内存（这是标准顺序，在图形驱动程序或特定 GPU 的各种实现上可能会有所不同）。
假设包含背景的 HTML DIV 的尺寸为 100x100。
对于只有 1 个像素的图像：浏览器程序必须执行1 万条“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。
我同意保罗的回答。我最近用 Google Chrome 开发者工具做了一些粗略的测试。我在背景图像上使用了不同大小的半透明 png 图像，并使用页面绘制时间来查看刷新屏幕需要多长时间。
结果如下：
没有 -webkit-transform hack 的刷新时间（四舍五入）：
2x2 图像：65-160 毫秒
10x10 图像：60-150 毫秒
100x100 图像：55-135 毫秒
1000x1000 图像：55-130 毫秒
是时候使用 -webkit-transform hack（四舍五入）刷新了：
2x2 图像：40-120 毫秒
10x10 图像：30-90 毫秒
100x100 图像：30-90 毫秒
1000x1000 图像：30-90 毫秒
就像保罗所说的那样，较大的图像比较小的图像需要更短的时间来加载（刷新）。但是，在图像大于 10px 后，它似乎变得不那么有效了。我认为 100x100 和 1000x1000 之间没有太大区别。
在我看来，一个巨大的图像不会给你一个明显的结果，它可能会增加加载时间。所以，我认为 10 - 100 左右的任何大小都足以满足性能和加载时间。
但是，不同的图像可能会有不同的结果，我认为您应该使用 Google Chrome 开发人员工具中的页面绘制时间工具测试您的网站以获得准确的结果。