我们在前端设计特别是移动端的前端页面的时候，展示某一张图片的方法有两种：一是通过CSS的background样式，二是通过html标签中的img src加上。其实在余斗大学学习HTML的时候就一直在想这个问题，background与img究竟哪个才是最优的？我们应该在哪些情况下用？
在揭示着两个问题之前，我们先了解一个浏览器的渲染机制：html代码会被优先解析，而css代码则是在html解析完之后再执行，这也无形中告知我们，img方法会比background方法更快速的显示图片。
接下来，余斗就结合平时的需求对两者关于加载速度、FPS、动画性能这些方面进行对比。
测试前的准备
两个demo中分别使用background-image方式和img src方式对图片展示，页面中均有500个DOM，分别对速度、FPS、动画流畅性等方面进行测试比较。
一、加载速度
测试网络为wifi环境（百兆光纤），忧郁实现方式不同所以页面的代码体积大小也是不一样的。两个测试文件中，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度循环旋转动画。
测试得到GPU数据为：
上面数据中显示，background页面实现方式GPU使用会在0~30之间波动；img页面实现方式GPU则一直保持在6.2。在比较低端手机上体验的时候，也很明显的感受到background页面的动画会出现一些卡顿，而img页面的动画则非常流畅。从这里可以得出结论：在动画方面，img实现方式比background实现方式性能会更好，可以提高动画性能。
余斗总结
结合其他一些比较重要的方面，最后做个总结：* 在对页面加载速度方面，两者差别不大；
* 做动画的时候，尽量选择使用img标签，性能会更好一些；
* 在SEO语义化方面，background完全不沾边，img语义清晰明了；
* background结合css sprite可以优化页面加载速度；
* 重要图片建议使用img标签，在页面加载时可以优先显示；
文章参考自前端开发_觉唯《棋逢对手:background对比img》
资源均来自第三方，谨慎下载，前往第三方网站下载
