这个问题与浏览器处理由HTML和CSS创建/呈现的对象的方式有关，如果我有一个100像素×100像素的div，我希望它有一个漂亮的半透明蓝色背景，但由于浏览器兼容性问题，我不想使用css将背景颜色设置为rgba（然后调整alpha），所以我制作了一个.png文件，它是一个纯半透明蓝色，并设置DIV的背景图像到那个PNG文件，然后平铺它…
我可以平铺100个1像素的图像方块。
或
我可以平铺四个25像素的图像方块。
除了1px图像方块比25px图像方块加载快得多外，两者都会产生相同的效果。但我想知道，如果屏幕上有100个图像方块，会不会比屏幕上只有4个图像较大的图像更滞后于浏览器？浏览器本身，它是否为每个图像块创建一个新的引用，然后必须跟踪它们并更新它们的位置？
把100000张1px x x 1px的图片放到一个网络屏幕上，会比把一张100000px x x 100000px的图片放到屏幕上滞后得多吗？尤其是当用户上下滚动时。对吗？
最佳答案
重复图像n次的任务由用户的机器执行。这取决于普通用户机器的处理能力。
如果你考虑到这一点，你将平均从普通用户的计算机中获得2-3GHz的处理能力，并将其与平均10兆位/秒的下载速率进行比较，我会说瓶颈是下载速度。如今，网络速度的滞后几乎可以忽略不计，因此差异很小，不值得担心，但尽管如此，下载更大图像的网络滞后可能比处理器为浏览器平铺图像的滞后更糟。
无论您将较大的图像平铺20次，还是将较小的图像平铺200次，浏览器仍将使用相同的执行循环来执行图像平铺，只是后者中的迭代次数更多，因此我认为处理器的效率将远远高于网络。
另外，我想说，如果你能用更小的图像达到同样的效果，那么在这些疯狂的ISP价格和带宽上限的情况下，你的用户使用尽可能最小的带宽会更加体贴和礼貌。