vs background-image(css)的性能

我正在构建一个使用滚动插件的网站，基本上动画化滚动。
我非常关心性能，就像我在网站中插入一些图像一样，在滚动/动画时看起来相当不稳定。

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

考虑到这个说法(图像将被缩放)。什么应该更好，图像元素或divs与那些图像作为背景与性能？

我做了这个jsFiddles，在我的chrome浏览器内存工具，显示背景图像选项使用较少的内存。

<img src="..." />@H_404_12@ 
 background-image：http://jsfiddle.net/ek6Xn/1/ 
  
 <div></div>@H_404_12@ 
 div {
    background:url(...);
    background-size:100% 100%;
}@H_404_12@ 
 参考文献： 
 > 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

解决方法

就个人而言，我会忘记在这种情况下的表现，并专注于形象：

1)图像=内容

2)背景图像=设计

我倾向于考虑这一点的方式是，我想让所有的屏幕尺寸，所有的设备，CSS打开或关闭吗？我想让图像被Google和Facebook“索引”。如果所有或任何这些问题的答案是肯定的，那么通常图像是“内容”，您应该使用img标签。

如果您想要不同的图像显示在不同的屏幕尺寸(或在某些设备上根本没有图像)，或者如果您对图像不会出现在打印输出上，或者您对图像不感兴趣，如果CSS被关闭，则通常出现图像为“设计”，您应该使用背景图像。

原文链接：https://www.f2er.com/css/219176.html

vs background-image(css)的性能

解决方法

猜你在找的CSS相关文章