background-image 与 img 动画性能对比

开发H5常常会用到滑屏，目前大部分滑屏插件都是通过控制页面的transform属性来实现。尽管如此，我总是发现自己的H5滑动起来就是不如网上一些优秀案例流畅，表现为滑动动画会出现卡顿、跳帧。

后来我发现自己的一个习惯，就是在页面需要插入图片的时候，我总是用background-image来实现，即使是一个独立的图片而非sprite图片的场景下，因为css的background-image实在是太方便了，不仅能够拉伸、偏移，还能上下居中和左右居中，而img标签的话还得自己计算偏移量，所以养成插图片就用background-image的习惯。

然而，渲染出来的页面虽然是一样的，性能表现却相差很多...

测试方法：3页的滑屏页面，每个页面有相等数量的div或者img元素，每个元素做360度匀速旋转，元素数量可调节，测试background-image和img场景下的页面性能表现。

请戳demo：background-image与img动画性能对比.html

扫二维码：

测试结果：

PC端：以chrome为例，每个页面100个元素情况下Timeline截图如下

background-image场景：

img场景：

从fps的Timeline可看出：PC端在使用background-image场景下性能优于img场景，表现为fps更稳定且均值更高。

移动端： 以Android微信浏览器为例，在每个页面10个元素的情况下已能看出明显的差别，不同于PC端，移动端不管是在页面滑动时还是单纯页面旋转时，img场景都优于background-image场景。

结语：

相信大家做H5开发时都是在PC端上开发调试，等到调试得差不多了才转到手机上测试（大神请忽略），但这就会有两个问题，

一是PC毕竟性能比手机高出很多，只在PC上调试会掩盖很多页面性能的短板，到手机上跑的时候这些短板就会表现出来，而这时候页面已经开发的差不多了，不熟悉不同页面之间的性能差异的话很难定位得到问题；

二是本文的测试结果所表示的，同样的页面在手机和PC上表现完全相反，PC端调试的结果不能代表最终在手机上的结果，开发者要根据不同的情况有所取舍。

PS:本文只是对background-image和img两种插入图片的方式进行简单的性能研究，因测试环境有限，如有不严谨或不对的地方欢迎吐槽，或者有不同的观点或IOS的测试结果也欢迎分享，谢谢大家~