棋逢对手：background对比img

在制作移动端页面时，展示图片的方法是一般是通过css background样式或者加在img src标签上。然而，久而久之习惯了使用，却忘记思考哪个才是最优的？我们是否真正理解两者之前的区别？两者对比各有什么优劣势呢？ 让我们先看一下这两种方式的基本概念。background属于css方法，img属于html标签。按照浏览器的渲染机制，html标签会被优先解析，而css则是在html解析完成后再执行。从这里也能够得到一个信息：
img方法比background方法能更加快速的显示图片。

接下来个人结合日常项目需求对两者关于加载速度、FPS、动画性能等方面进行对比：

测试准备

两个demo中分别使用background-image方式和img src方式对图片展示，页面中均有500个DOM，分别对速度、FPS、动画流畅性等方面进行测试比较。

一、速度测试

测试网络情况为Regular 3g(750kb/s 100ms RTT)。 由于实现方式不同所以页面的代码体积大小是不一样的。两个测试文件中，background页面完全加载成功后是337kb，img页面完全加载成功后是347kb。 两个demo加载后的大小主要是受css和html代码影响，background页面实现方式css代码量会相对较多，html代码量较少；而img页面实现方式css代码量会相对较少，html代码量较多。所以在页面各放置了500个DOM，html的代码量剧增，最终导致img页面会比background页面大一些。 最后使用Navigation Timing API测试页面加载时间。测试代码如下：

window.onload = function() {
        setTimeout(function() {
            var t = performance.timing;
            console.log("页面速度: " + (t.loadEventEnd - t.responseEnd) + " ms");
        }, 0);
};

测试数据为（单位ms）：

从上面的数据可以看出background页面和img页面加载速度差异不大，再结合前面所说的“img页面会比background页面大一些”，最终我们可以得到结论：两者加载速度差异不大。在极端情况下，img页面实现方式会稍微快一些。

二、FPS测试

两者实现方式的本质都是将图片渲染出来，在理论上来说，两者应该差别不大，但还是做了数据统计，见下表：

从这里的数据显示得到结论：两者FPS差异不大。

三、动画性能

在两个demo页面中，使用css3的transform:rotate实现从0度到360度循环旋转动画。演示地址：

（img页面）

（background页面）

测试得到GPU数据为：

上面数据中显示，background页面实现方式GPU使用会在0~30之间波动；img页面实现方式GPU则一直保持在6.2。在比较低端手机上体验的时候，也很明显的感受到background页面的动画会出现一些卡顿，而img页面的动画则非常流畅。从这里可以得出结论：在动画方面，img实现方式比background实现方式性能会更好，可以提高动画性能。

总结

结合其他一些比较重要的方面，最后做个总结：

• 在对页面加载速度方面，两者差别不大；
• 做动画的时候，尽量选择使用img标签，性能会更好一些；
• 在SEO语义化方面，background完全不沾边，img语义清晰明了；
• background结合css sprite可以优化页面加载速度；
• 重要图片建议使用img标签，在页面加载时可以优先显示；

感谢大家阅读，欢迎一起探讨。