< img /> vs background-image（css）的性能 [英] <img /> vs background-image (css) in performance
问题描述
我正在建立一个网站，使用一个滚动插件，基本上动画滚动。
我非常担心性能，如果我在网站中插入一些图像，它在滚动/动画时看起来很浪费。
I am building a site that is using a scrolling plugin that basically animates the scrolling. I am quite concern about performance as if I insert some images in the site, it looks quite choppy when scrolling/animating.
我可以检测的主要问题与图像是回流/重绘问题，当图像不具有正确的尺寸，因此缩放（我必须处理这个，我知道最佳做法）。
The main problem I can detect with images is the reflow/repaint issue, when the image doesn't have the correct dimensions and therefore is scaled (I have to deal with this, I know about the best practice).
谨记此声明（图片将被缩放）。
With this statement in mind (images will be scaled). What should be better, image element or divs with those images as backgrounds as for performance?
我在Chrome浏览器内存工具中制作了这个jsFiddles，显示背景图片的背景， ground image选项使用较少的内存。
I made this jsFiddles that in my chrome browser memory tool, show that the back-ground image option uses less memory.
< img /> ：< a href =http://jsfiddle.net/ek6Xn/> http://jsfiddle.net/ek6Xn/
<img src="..." />
background-image strong>： http://jsfiddle.net/ek6Xn/1/
background-image: http://jsfiddle.net/ek6Xn/1/
<div></div>
div {
background:url(...);
background-size:100% 100%;
}
参考文献：
- 何时使用IMG与CSS背景图片？
- http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
- http://updates.html5rocks.com/2013/ 02 / Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode
- Difference in performance between img tag elements vs divs with background images?
- When to use IMG vs. CSS background-image?
- http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
- http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode
推荐答案
我个人会忘记这个实例中的性能，并专注于图片是什么：
Personally I would forget about performance in this instance and focus on what the image is:
1）Image = content
1) Image = content
2）背景图片=设计
我的想法是，我想让图片显示在所有屏幕尺寸，在所有设备上，CSS打开或关闭？我希望图片被Google和Facebook索引。如果所有或任何这些问题的答案是肯定的，那么通常图像是内容，并且您应该使用IMG标签。
The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I want the image to be "indexed" by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is "content" and you should use an IMG tag.
如果您想要不同的图像以不同的屏幕尺寸显示（或在某些设备上根本没有图像），或者如果您对图像无法显示在打印输出上感到满意，或者您乐意在CSS被关闭时不显示图像，那么通常图像是设计，您应该使用背景图像。
If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you're happy for the image to not appear on a print out, or you're happy for the image to not appear if CSS is turned off, then usually the image is "design" and you should use a background image.
这篇关于< img /> vs background-image（css）的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
