这个问题更多地与浏览器处理由 HTML 和 CSS 创建/呈现的对象的方式有关，而不仅仅是一个脚本问题。
如果我有一个 100 x 100 像素的 div像素，我希望它有一个漂亮的半透明蓝色背景，但由于浏览器兼容性问题，我不想使用 CSS 将背景颜色设置为 RGBA(然后只调整 alpha)，所以我制作了一个 .png 文件是纯半透明蓝色，将 div 的背景图像设置为该 png 文件，然后平铺它....
我可以平铺一百个 1px 的图像方 block 。
或
我可以平铺四个 25 像素的图像方 block 。
两者都会产生相同的效果，除了 1px 图像方 block 加载速度比 25px 图像方 block 快得多....但我想知道屏幕上有 100 个图像方 block 是否会比只有 4 个图像更滞后于浏览器在屏幕上显示较大的图像？浏览器本身，它是否为每个图像 block 创建一个新的引用，然后必须跟踪它们并更新它们的位置？
似乎在网络屏幕上放置 100,000 个 1px x 1px 的图像会比在屏幕上放置一个 100,000px x 100,000px 的图像延迟更多？特别是当用户向上或向下滚动时。对吧？
最佳答案
将图像重复 n 次的任务由用户的机器执行。这取决于普通用户机器的处理能力。
如果您认为普通用户的计算机平均可获得 2-3GHz 的处理能力，并将其与 10 兆位/秒的平均下载速率进行比较，我会说瓶颈是下载速度。如今，网络速度的延迟几乎可以忽略不计，所以差异很小，不值得担心，但尽管如此，下载更大图像的网络延迟可能比处理器平铺图像的延迟更糟糕。浏览器的图像。
无论你将一张大图平铺 20 次还是将一张小图平铺 200 次，浏览器仍会使用相同的执行循环来执行图像平铺，只是后者的迭代次数更多，所以我认为处理器会大很多比网络更有效。
此外，我想说的是，如果您可以使用较小的图像实现相同的效果，那么在这些疯狂的 ISP 价格和带宽上限下使用可能的绝对最小带宽对您的用户来说更加周到和礼貌。
关于html - 平铺一百个 1px 的方 block VS 平铺四个 25px 的方 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19472730/