3

这个问题更多地与浏览器处理由 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 像素的图像滞后更多？特别是当用户向上或向下滚动时。正确的？

4

1 回答 1

1

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

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

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

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

于 2013-10-21T01:45:57.607 回答