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的測試結果也歡迎分享，謝謝你們~