在制作移动端页面时，展示图片的方法是一般是通过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）：
平均值
backgruound 3356 3352 3350 3354 3353 3354 3353 3353 3354 3352 3353.1
img 3216 3238 3224 3224 3230 3222 3225 3229 3212 3215 3223.5
从上面的数据可以看出background页面和img页面加载速度差异不大，再结合前面所说的“img页面会比background页面大一些”，最终我们可以得到结论： 两者加载速度差异不大。在极端情况下，img页面实现方式会稍微快一些。
二、fps测试 两者实现方式的本质都是将图片渲染出来，在理论上来说，两者应该差别不大，但还是做了数据统计，见下表：
平均值
backgruound 16.0 17.7 18.6 17.7 17.3 16.2 17.7 20 19.1 16.9 17.72
img 19 16.9 20 18.5 19 16.2 15.7 17.8 19 21 18.31
从这里的数据显示得到结论：两者fps差异不大。
三、动画性能 在两个demo页面中，使用css3的transform:rotate实现从0度到360度循环旋转动画。演示地址：
（img页面）
（background页面）
测试得到gpu数据为：
平均值
backgruound 11 14 15 23 30 11.1 25 26.9 25 12 19.3
img 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2
上面数据中显示，background页面实现方式gpu使用会在0~30之间波动；img页面实现方式gpu则一直保持在6.2。在比较低端手机上体验的时候，也很明显的感受到background页面的动画会出现一些卡顿，而img页面的动画则非常流畅。从这里可以得出结论： 在动画方面，img实现方式比background实现方式性能会更好，可以提高动画性能。
总结 结合其他一些比较重要的方面，最后做个总结：
在对页面加载速度方面，两者差别不大； 做动画的时候，尽量选择使用img标签，性能会更好一些； 在seo语义化方面，background完全不沾边，img语义清晰明了； background结合css sprite可以优化页面加载速度； 重要图片建议使用img标签，在页面加载时可以优先显示； 感谢大家阅读，欢迎一起探讨。