平铺一百个 1px 的正方形 VS 平铺四个 25px 的正方形

Question

这个问题更多地与浏览器处理由 HTML 和 CSS 创建/呈现的对象的方式有关，而不仅仅是一个脚本问题。

如果我有一个 100 像素 x 100 像素的 div 并且我希望它有一个漂亮的半透明蓝色背景，但由于浏览器兼容性问题，我不想使用 CSS 将背景颜色设置为 RGBA（然后只调整 alpha），所以我制作了一个 .png 文件实心半透明蓝色并将 div 的背景图像设置为该 png 文件，然后平铺它....

我可以平铺一百个 1 像素的图像方块。

或

我可以平铺四个 25 像素的图像方块。

两者都将创建相同的效果，除了 1px 图像方块会比 25px 图像方块加载更快....但我想知道屏幕上有 100 个图像方块是否会比只有 4 个图像滞后浏览器在屏幕上是更大的图像？浏览器本身，它是否为每个图像块创建一个新的引用，然后必须跟踪它们并更新它们的位置？

在网络屏幕上放置 100,000 个 1 x 1 像素的图像似乎比在屏幕上放置一个 100,000 x 100,000 像素的图像要滞后？特别是当用户向上或向下滚动时。对吧？

Answer 1

重复图像 n 次的任务取决于用户的机器来执行。这取决于普通用户机器的处理能力。

如果您考虑到平均而言，您将从普通用户的计算机中获得 2-3GHz 的处理能力，并将其与 10 兆比特/秒的平均下载速率进行比较，我会说瓶颈是下载速度。如今，网络速度的延迟几乎可以忽略不计，因此差异很小，以至于不值得担心，但是尽管如此，下载较大图像的网络延迟可能会比处理器的延迟更糟糕。浏览器的图像。

无论您将较大的图像平铺 20 次还是将较小的图像平铺 200 次，浏览器仍然会使用相同的执行循环来执行图像的平铺，只是后者的迭代次数更多，所以我认为处理器会很多比网络更高效。

另外，我想说的是，如果您可以使用较小的图像达到相同的效果，那么在这些疯狂的 ISP 价格和带宽上限的情况下，您的用户使用可能的绝对最小带宽会更加周到和礼貌。