css3如何解決移動端卡頓的問題

這篇文章主要介紹css3如何解決移動端卡頓的問題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、使用css，jquery，canvas制作動畫

1.Canvas

優(yōu)點(diǎn)：性能好，強(qiáng)大，支持多數(shù)瀏覽器（除了IE6、IE7、IE8），畫出來的圖形可以直接保存為 .png 或者 .jpg的圖形；

缺點(diǎn)：依賴于HTML，只能通過腳本繪制圖形，沒有實(shí)現(xiàn)動畫的API（依靠事件和定時(shí)器更新）；由于在 canvas 上以編程方式顯示的文本其實(shí)就是位圖，因此搜索爬行器將完全忽略文本。文本內(nèi)容也無法被屏幕閱讀器識別。

2.css3

優(yōu)點(diǎn)：簡單且與內(nèi)容分離、css動畫不觸發(fā)layout和paint；（這些屬性的修改不會觸發(fā)layout和paint：backface-visibility、opacity、perspective、perspective-origin、transform）；

缺點(diǎn)：有瀏覽器兼容性問題、安卓手機(jī)會出現(xiàn)卡頓、受排版引擎的限制，與整個(gè)頁面的dom結(jié)構(gòu)息息相關(guān)。

3.JQuery

優(yōu)點(diǎn)：沒有兼容性問題

缺點(diǎn)：每一幀，都要進(jìn)行repaint、recomposite（非常耗時(shí)）；

總結(jié)：在移動端動畫效果上，使用css3動畫要比jquery動畫效率高的多。在安卓手機(jī)上表現(xiàn)尤其明顯！所以移動端動畫以css3動畫為優(yōu)先，jquery只能用來簡單處理應(yīng)用邏輯。css3動畫是用來給內(nèi)容布局加上特效的通用解決方案，但是在性能堪憂的移動瀏覽器上很可能會受排版性能所限，達(dá)不到理想的效果。而對性能有要求的特定場景，比如游戲，用canvas會有很大的提高。

二、css3在移動端出現(xiàn)卡頓問題

css3制作的動畫在ios上跑的66的，但是在安卓上有時(shí)會出現(xiàn)卡頓現(xiàn)象。不妨從下面幾點(diǎn)找找問題。

a、是否導(dǎo)致layout
如果是，盡可能將動畫元素absolute或者fixed化以避免影響文檔樹，以減少重排.

b、是否啟用硬件加速
“用到了CSS3動畫”和“開啟了硬件加速”是兩件事情，雖然前者有可能導(dǎo)致后者。
開啟硬件加速在webkit中有神奇的萬金油：opacity: 1;或者-webkit-backface-visibility: hidden;。

c、是否是有高消耗的屬性（css shadow、gradients、background-attachment: fixed等）
有的話，圖片也是一種選擇。這算得上是用空間換時(shí)間的優(yōu)化了。

d、repaint的面積
如果是，只好縮小動畫面積了。這一步的優(yōu)化有限;

e、盡量使用 transform 生成動畫，避免使用 height,width,margin,padding 等；如以下例子1和例子2。

PS：使用 transform，瀏覽器只需要一次生成這個(gè)元素的位圖，并在動畫開始的時(shí)候?qū)⑺峤唤o GPU 去處理 。之后，瀏覽器不需要再做任何布局、 繪制以及提交位圖的操作。從而，瀏覽器可以充分利用 GPU 的特長去快速地將位圖繪制在不同的位置、執(zhí)行旋轉(zhuǎn)或縮放處理。簡而言之，transform 動畫由GPU控制，支持硬件加速，并不需要軟件方面的渲染

三、動畫過程有閃爍（一般出現(xiàn)在動畫開始）

解決方法：

.cube {

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;

   -ms-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-perspective: 1000;

   perspective: 1000;

   /* Other transform properties here */

}

在webkit內(nèi)核的瀏覽器中，另一個(gè)行之有效的方法是

.cube {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

  /* Other transform properties here */

}

以上是“css3如何解決移動端卡頓的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！