将img src设置为未更改的值的性能？

Question

如果我有像

这样的img标签

<img src="example.png" />

我通过

设置了它

myImg.src = "example.png";

再次使用相同的值，这将是无操作，还是浏览器会不必要地重绘图像？ （我主要对IE6-8，FF3.x，Safari 4-5和Chrome的行为感兴趣。）

我需要一次更改许多（数百个）图像，手动比较src属性可能有点多余 - 我认为，浏览器已经为我做了这个？

Answer 1

不要假设浏览器会为您执行此操作。我正在开发一个类似规模的项目，需要数百个（动态加载）图像，速度是首要任务。

强烈建议缓存每个元素的'src'属性。读取和设置数百个DOM元素属性非常昂贵，甚至将src设置为相同的值可能会导致重排或绘制事件。

[编辑] 界面中的大部分迟缓都是由于我的所有循环和进程造成的。一旦优化了这些，即使连续加载数百张图像，用户界面也非常活泼。

[编辑2] 根据您的其他信息（图片都是小状态图标），您可以考虑简单地为CSS中的每个状态声明一个类。此外，您可能希望使用cloneNode和replaceNode进行快速有效的交换。

[编辑3] 尝试绝对定位图像元素。它将限制需要发生的回流量，因为绝对定位的元素在流之外。

Answer 2

当您一次更改一堆元素时，您通常会阻止UI线程，因此在JavaScript完成后只会进行一次重绘，这意味着每个图像的重绘确实不是一个因素。

我不会在这里仔细检查任何东西，让浏览器处理它，新的智能足以以有效的方式做到这一点（无论如何它从来都不是真正的问题）。

你会在这里看到的情况是在加载时加载和重新流动页面的新图像， 这里有什么代价，现有图像非常次要这笔费用。

Answer 3

我建议使用CSS Sprite技术。更多信息：http://www.alistapart.com/articles/

您可以使用包含所有图标的图像。然后，不是更改src属性，而是更新背景属性。