vs background-image(css)的性能

前端之家收集整理的这篇文章主要介绍了vs background-image(css)的性能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在构建一个使用滚动插件的网站,基本上动画化滚动。
我非常关心性能,就像我在网站中插入一些图像一样,在滚动/动画时看起来相当不稳定。

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

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

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

< img /&gt ;:http://jsfiddle.net/ek6Xn/

<img src="..." />

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

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

参考文献:

> 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被关闭,则通常出现图像为“设计”,您应该使用背景图像。

猜你在找的CSS相关文章