哪个更快：用img替换div或更改img的src属性？答案

【问题标题】：Which is Faster: Replacing div with img or changing the src attribute of img?哪个更快：用img替换div或更改img的src属性？
【发布时间】：2011-12-13 22:40:51
【问题描述】：

我正在实现一个图像队列，它一次下载 x 个图像。假设我们有一个页面，其中有 30 个 img 标签，我将图像添加到我的队列中，一次下载 5 个图像（x 的值）。所以有一个要加载的图像队列，我们将前 5 个 img 的 src 替换为预期的图像链接。加载一个图像后，它将另一个图像从队列中取出，然后加载，这将一直持续到所有图像都加载完毕。这样可以确保一次下载的图像不超过 5 个。
但这显然会减慢页面上图像的渲染速度。

我想知道将 src 从默认 img 替换为预期链接是否是呈现图像的最快方式。 Ae 也可能出现这样的情况，即我们用 div 代替默认的空白图像，并且在加载图像时用图像替换 div。这种方法会更快，还是前一种方法最好？

【问题讨论】：

为什么不试试呢？去看看JS Perf。
@DavidThomas：哇，JS Perf 很酷！
试过了，两者的加载速度似乎几乎相同.. :(
每次更改 src 时，它都会再次加载 img，如果您自己托管 img，可能会占用更多服务器资源。

标签： javascript html javascript-events

【解决方案1】：

通常最好尽可能避免动态 DOM 操作（即动态添加/删除 DOM 节点）。更改已在 DOM 中的图像的 src 属性不涉及动态 DOM 节点添加或更改，因此应该是首选。另外，就像你说的那样，无论如何性能并没有太大差异。

【讨论】：

在谷歌上搜索“避免 dom 操作”以了解更多信息。

【解决方案2】：

一旦浏览器第一次加载了图像，它就会在内存中保存该图像，并且每次在样式表中引用它时都不需要再次加载它。所以改变背景位置是最好的方法。

像这样使用你的图片example.

这总是最快的方法。

【讨论】：

一旦加载它们就会在缓存中，这是我第一次询问。另外，我不能精灵这些图像。