開發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的測試結果也歡迎分享，謝謝大家~