css - <img/> 与 background-image (css) 在性能上的对比

Question

我正在构建一个网站，该网站使用基本上为滚动设置动画的滚动插件。 我非常关心性能，就好像我在网站中插入了一些图像，滚动/动画时看起来很不稳定。

我可以检测到图像的主要问题是回流/重绘问题，当图像没有正确的尺寸并因此被缩放时(我必须处理这个问题，我知道 best practice)。

牢记这一点(图像将被缩放)。就性能而言，图像元素或以这些图像作为背景的 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. Difference in performance between img tag elements vs divs with background images?
2. When to use IMG vs. CSS background-image?
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，图像不会出现，那么图像通常是“设计”的，您应该使用背景图像。