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的测试结果也欢迎分享，谢谢你们~