将img-src设置为不变值的性能?

不要以为浏览器会为你做这件事。我正在进行一个类似规模的项目,它需要数百张(动态加载)图像,速度是首要任务。

强烈建议缓存每个元素的“src”属性。它是 读取和设置数百个DOM元素属性的成本很高 和 均匀设定 src 相同的值可能导致回流或喷漆事件 .

[编辑] 接口中的大多数迟缓是由于我所有的循环和进程造成的。一旦这些被优化了,用户界面就非常敏捷,即使是在连续加载数百个图像的时候。

[编辑2 ] 根据您的附加信息(这些图像都是小状态图标),也许您应该考虑只为CSS中的每个状态声明一个类。另外,您可能希望研究使用 cloneNode 和 replaceNode 以实现快速高效的交换。

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

当您一次更改一组元素时,通常无论如何都会阻塞UI线程,因此在JavaScript完成后只会进行一次重绘,这意味着每个图像的重绘实际上不是一个因素。

我不会再检查这里的任何东西,让浏览器来处理它,新的浏览器足够聪明,以一种有效的方式来做这件事(而且不管怎么说,它从来都不是那么大的问题)。

这里您将看到的情况是加载新图像并在加载时重新流动页面, 那是 这里的价格很贵,现有的图片是 非常 与此成本相比微不足道。

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

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