<img rel="nofollow noreferrer" /> vs background-image(css)的性能

Question

我正在构建一个使用滚动插件的网站,该插件基本上可以动画滚动.我非常担心性能,好像我在网站中插入一些图像,滚动/动画时看起来很不稳定.

我可以用图像检测到的主要问题是回流/重绘问题,当图像没有正确的尺寸因此被缩放(我必须处理这个,我知道最佳实践).

记住这个说法(图像将被缩放).什么应该更好,图像元素或div与那些图像作为性能的背景？

我在我的Chrome浏览器内存工具中制作了这个jsFiddles,显示背景图像选项使用更少的内存.

<img />:http://jsfiddle.net/ek6Xn/

<img src="..." />

background-image:http://jsfiddle.net/ek6Xn/1/

<div></div>

div {
    background:url(...);
    background-size:100% 100%;
}

参考文献:

1. img标签元素与具有背景图像的div之间的性能差异？
2. 何时使用IMG与CSS背景图像？
3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

Answer 1

就个人而言,我会忘记这个实例中的性能,并专注于图像的内容:

1)图像=内容

2)背景图像=设计

我倾向于考虑这个问题的方式是,我是否希望图像在所有设备上显示在所有屏幕尺寸上,而CSS打开或关闭？我是否希望Google和Facebook对图像进行"索引".如果对所有或任何这些问题的回答都是肯定的,那么通常图像是"内容",您应该使用IMG标记.

如果您希望以不同的屏幕尺寸显示不同的图像(或者某些设备上根本没有图像),或者您对图像没有出现在打印输出中感到满意,或者您对图像不满意感到高兴如果关闭CSS会出现,那么通常图像是"设计",你应该使用背景图像.