成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

說(shuō)說(shuō)動(dòng)畫卡頓的解決方案

時(shí)飛 / 3555人閱讀

摘要：動(dòng)畫卡頓解決方案前端時(shí)間用實(shí)現(xiàn)頁(yè)面中首頁(yè)動(dòng)畫過(guò)渡，很簡(jiǎn)單的一個(gè)效果，首頁(yè)加載一個(gè)客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問(wèn)題解決動(dòng)畫卡頓的辦法

CSS3 動(dòng)畫卡頓解決方案

前端時(shí)間用animation實(shí)現(xiàn)H5頁(yè)面中首頁(yè)動(dòng)畫過(guò)渡，很簡(jiǎn)單的一個(gè)效果，首頁(yè)加載一個(gè)客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下




    
    
    
    首頁(yè)加載動(dòng)畫

在chrome上測(cè)試ok，但在提測(cè)給QA的時(shí)候發(fā)現(xiàn)部分機(jī)型，如華為，系統(tǒng)4.2，oppo系統(tǒng)5.1的出現(xiàn)卡頓情況。

百思不得其解，后來(lái)參考文章深入瀏覽器理解CSS animations 和 transitions的性能問(wèn)題一文，將圖片縮放中動(dòng)畫元素改成transform，如下

  @-webkit-keyframes imgSmall{
    0%{
        -webkit-transform:scale(1);
    }
    100%{
        -webkit-transform:scale(.465);
    }
  }

果然啊，卡頓問(wèn)題解決了。

文章深入瀏覽器理解CSS animations 和 transitions的性能問(wèn)題是這么解釋的，現(xiàn)代的瀏覽器通常會(huì)有兩個(gè)重要的執(zhí)行線程，這2個(gè)線程協(xié)同工作來(lái)渲染一個(gè)網(wǎng)頁(yè)：主線程和合成線程。

一般情況下，主線程負(fù)責(zé)：運(yùn)行JavaScript；計(jì)算HTML 元素的 CSS 樣式；頁(yè)面的布局；將元素繪制到一個(gè)或多個(gè)位圖中；將這些位圖交給合成線程。

相應(yīng)地，合成線程負(fù)責(zé)：通過(guò) GPU將位圖繪制到屏幕上；通知主線程更新頁(yè)面中可見(jiàn)或即將變成可見(jiàn)的部分的位圖；計(jì)算出頁(yè)面中哪部分是可見(jiàn)的；計(jì)算出當(dāng)你在滾動(dòng)頁(yè)面時(shí)哪部分是即將變成可見(jiàn)的；當(dāng)你滾動(dòng)頁(yè)面時(shí)將相應(yīng)位置的元素移動(dòng)到可視區(qū)域。

假設(shè)我們要一個(gè)元素的height從 100 px 變成 200 px，就像這樣：

div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}

主線程和合成線程將按照下面的流程圖執(zhí)行相應(yīng)的操作。注意在橘黃色方框的操作可能會(huì)比較耗時(shí)，在藍(lán)色框中的操作是比較快速的。

而使用transform:scale實(shí)現(xiàn)

div {
    transform: scale(0.5);
    transition: transform 1s linear;
}

div:hover {
    transform: scale(1.0);
}

此時(shí)流程如下：

也就是說(shuō)，使用transform,瀏覽器只需要一次生成這個(gè)元素的位圖，并在動(dòng)畫開始的時(shí)候?qū)⑺峤唤oGPU去處理 。之后，瀏覽器不需要再做任何布局、 繪制以及提交位圖的操作。從而，瀏覽器可以充分利用 GPU 的特長(zhǎng)去快速地將位圖繪制在不同的位置、執(zhí)行旋轉(zhuǎn)或縮放處理。

為了從數(shù)量級(jí)上去證實(shí)這個(gè)理論，我打開chrome的Timeline查看頁(yè)面FPS

其中，當(dāng)用height做動(dòng)畫元素時(shí)，在切換過(guò)程的FPS只有44，我們知道每秒60幀是最適合人眼的交互，小于60，人眼能明顯感覺(jué)到，這就是為什么卡頓的原因。

rendering和painting所花的時(shí)間如下：

再來(lái)看看用transform:scale

FPS達(dá)到66，且rendering和painting時(shí)間減少了3倍。

到此為止問(wèn)題是解決了，隔了幾天，看到一篇解決Chrome動(dòng)畫”卡頓”的辦法，發(fā)現(xiàn)還能通過(guò)開啟硬件加速的方式優(yōu)化動(dòng)畫，于是又試了一遍。

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

驚人的事情發(fā)生了，F(xiàn)PS達(dá)到72：

總結(jié)解決CSS3動(dòng)畫卡頓方案

盡量使用transform當(dāng)成動(dòng)畫熟悉，避免使用height,width,margin,padding等；

要求較高時(shí)，可以開啟瀏覽器開啟GPU硬件加速。

參考文章

深入瀏覽器理解CSS animations 和 transitions的性能問(wèn)題

解決Chrome動(dòng)畫”卡頓”的辦法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80180.html

相關(guān)文章

  • 說(shuō)說(shuō)動(dòng)畫卡頓的解決方案

    摘要：動(dòng)畫卡頓解決方案前端時(shí)間用實(shí)現(xiàn)頁(yè)面中首頁(yè)動(dòng)畫過(guò)渡，很簡(jiǎn)單的一個(gè)效果，首頁(yè)加載一個(gè)客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問(wèn)題解決動(dòng)畫卡頓的辦法 CSS3 動(dòng)畫卡頓解決方案 前端時(shí)間用animation實(shí)現(xiàn)H5頁(yè)面中首頁(yè)動(dòng)畫過(guò)渡，很簡(jiǎn)單的一個(gè)效果，首頁(yè)加載一個(gè)客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

    AlphaWatch 評(píng)論0 收藏0

  • 白鷺引擎王澤：重度H5游戲性能優(yōu)化技巧標(biāo)題的文章

    摘要：據(jù)不完全統(tǒng)計(jì)，這五年中，白鷺引擎累計(jì)運(yùn)轉(zhuǎn)的游戲和微信小游戲的流水?dāng)?shù)據(jù)約為億。 我們的引擎架構(gòu)師做某一沙龍活動(dòng)的演講速記，純純的干貨，分享給大家。 王澤：各位開發(fā)者下午好！我叫王澤，是白鷺引擎的首席架構(gòu)師。 今天給大家分享的題目是《重度H5游戲性能優(yōu)化技巧》。之所以決定用這個(gè)題目，是因?yàn)槲易罱鼛字茉趶V深一帶拜訪了很多使用白鷺引擎的開發(fā)者，發(fā)現(xiàn)特別是在廣州一帶，大部分開發(fā)者都在做重度H5游...

    xbynet 評(píng)論0 收藏0

  • flip你的動(dòng)畫

    摘要：如果你看到我的前一篇文章一篇文章說(shuō)清瀏覽器解析和動(dòng)畫優(yōu)化，理解本篇文章還是很簡(jiǎn)單的。，元素的終止?fàn)顟B(tài)。這會(huì)打斷正在運(yùn)行的動(dòng)畫，這是糟糕的。關(guān)鍵是確保你的預(yù)計(jì)算在用戶響應(yīng)的空閑時(shí)間執(zhí)行，這樣兩個(gè)動(dòng)畫就不會(huì)沖突了。 在vue官方文檔上看到vue使用flip做動(dòng)畫，就去研究了一下。這是一個(gè)準(zhǔn)則，協(xié)調(diào)js和css對(duì)動(dòng)畫的操作。如果你看到我的前一篇文章一篇文章說(shuō)清瀏覽器解析和CSS（GPU）動(dòng)畫...

    vibiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<