CSS3動畫卡頓性能優(yōu)化的示例分析
這篇文章給大家分享的是有關(guān)CSS3動畫卡頓性能優(yōu)化的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站主營周至網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),周至h5小程序定制開發(fā)搭建,周至網(wǎng)站營銷推廣歡迎周至等地區(qū)企業(yè)咨詢
為什么會卡頓？
有一個前提必須要提，前端開發(fā)者們都知道，瀏覽器是單線程運(yùn)行的。但是我們要明確以下幾個概念：單線程，主線程和合成線程。
雖然說瀏覽器執(zhí)行js是單線程執(zhí)行（注意，是執(zhí)行，并不是說瀏覽器只有1個線程，而是運(yùn)行時，runing），但實(shí)際上瀏覽器的2個重要的執(zhí)行線程，這 2 個線程協(xié)同工作來渲染一個網(wǎng)頁：主線程和合成線程。
一般情況下，主線程負(fù)責(zé)：運(yùn)行 JavaScript；計算 HTML 元素的 CSS 樣式；頁面的布局；將元素繪制到一個或多個位圖中；將這些位圖交給合成線程。
相應(yīng)地，合成線程負(fù)責(zé)：通過 GPU 將位圖繪制到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計算出頁面中哪部分是可見的；計算出當(dāng)你在滾動頁面時哪部分是即將變成可見的；當(dāng)你滾動頁面時將相應(yīng)位置的元素移動到可視區(qū)域。
那么為什么會造成動畫卡頓呢？
原因就是主線程和合成線程的調(diào)度不合理。
下面來詳細(xì)說一下調(diào)度不合理的原因：
在使用height，width，margin，padding作為transition的值時，會造成瀏覽器主線程的工作量較重，例如從margin-left：-20px渲染到margin-left:0，主線程需要計算樣式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主線程計算樣式后，合成進(jìn)程都需要繪制到GPU然后再渲染到屏幕上，前后總共進(jìn)行20次主線程渲染，20次合成線程渲染，20+20次，總計40次計算。
主線程的渲染流程，可以參考瀏覽器渲染網(wǎng)頁的流程：
使用 HTML 創(chuàng)建文檔對象模型（DOM）
使用 CSS 創(chuàng)建 CSS 對象模型（CSSOM）
基于 DOM 和 CSSOM 執(zhí)行腳本（Scripts）
合并 DOM 和 CSSOM 形成渲染樹（Render Tree）
使用渲染樹布局（Layout）所有元素
渲染（Paint）所有元素
也就是說，主線程每次都需要執(zhí)行Scripts，Render Tree ,Layout和Paint這四個階段的計算。
而如果使用transform的話，例如tranform:translate(-20px,0)到transform:translate(0,0)，主線程只需要進(jìn)行一次tranform:translate(-20px,0)到transform:translate(0,0)，然后合成線程去一次將-20px轉(zhuǎn)換到0px，這樣的話，總計1+20計算。
可能會有人說，這才提升了19次，有什么好性能提升的？
假設(shè)一次10ms。
那么就減少了約190ms的耗時。
會有人說，辣雞，才190ms，無所謂。
那么如果margin-left是從-200px到0呢，一次10ms，10ms*199≈2s。
還會有人說，辣雞，也就2s，無所謂。
你忘了單線程這回事了嗎？
如果網(wǎng)頁有3個動畫，3*2s=6s，就是6s的性能提升。
由于數(shù)據(jù)是猜測的，所以暫時不考慮其真實(shí)性
為了增強(qiáng)本文的說服力，下面我就用一個實(shí)例來證實(shí)下我的觀點(diǎn)，大家一起看一下
前端時間用 animation 實(shí)現(xiàn) H5 頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留 700ms 后再縮小至頂部。代碼如下：
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" >
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<title>首頁加載動畫</title>
<head>
<style>
.welcome-main{
display: none;
padding-bottom: 40px;
}
.top-info{
width: 100%;
position: absolute;
left: 0;
top: 93px;
}
.wec-img{
width: 175px;
height: 175px;
position: relative;
padding: 23px;
box-sizing: border-box;
margin: 0 auto;
}
.wec-img:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("./images/kf-welcome-loading.png");
background-size: 100%;
}
.wec-img .img-con{
width: 100%;
height: 100%;
border-radius: 50%;
/*box-sizing: border-box;*/
background: url("./images/kf_1.jpg");
background-size: 100%;
padding: 1px;
}
.wec-img .img-con img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.loaded .wec-img{
-webkit-transform-origin: center top;
}
.loading.welcome-main{
display: block;
}
.loading .wec-img{
-webkit-animation:fadeIn .3s ease both;
}
.loading .wec-img:before{
-webkit-animation:rotate .6s .2s linear both;
}
.loaded .top-info{
-webkit-animation:mainpadding 1s 0s ease both;
}
.loaded .wec-img{
-webkit-animation:imgSmall 1s 0s ease both; }
@-webkit-keyframes mainpadding{
0%{-webkit-transform:translateY(0)
}
100%{-webkit-transform:translateY(-87px)
}
}
@-webkit-keyframes imgSmall{
0%{
width: 175px;
height: 175px;
padding: 23px;
}
100%{
width: 60px;
height: 60px;
padding: 0;
}
}
@-webkit-keyframes fadeIn{
0%{opacity:0;-webkit-transform:scale(.3)}
100%{opacity:1;-webkit-transform:scale(1)}
}
@-webkit-keyframes rotate{
0%{opacity:0;-webkit-transform:rotate(0deg);}
50%{opacity:1;-webkit-transform:rotate(180deg);}
100%{opacity:0;-webkit-transform:rotate(360deg);}
}
</style>
<body>
<div class="welcome-main">
<div class="top-info">
<div class="wec-img"><p class="img-con"><img src="" alt=""></p></div>
</div>
</div>
<script>
$('.welcome-main').addClass('loading');
setTimeout(function(){
$('.hi.fst').removeClass('loading');
$('.welcome-main').addClass('loaded');
},700);
</script>
</body>
</html>在 chrome 上測試 ok，但在提測給 QA 的時候發(fā)現(xiàn)部分機(jī)型，如華為(系統(tǒng)4.2)，oppo(系統(tǒng)5.1)的出現(xiàn)卡頓情況。
百思不得其解，后來參考文章深入瀏覽器理解 CSS animations 和 transitions 的性能問題一文，將圖片縮放中動畫元素改成 transform，如下
@-webkit-keyframes imgSmall{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.465);
}
}果然啊，卡頓問題解決了。
文章深入瀏覽器理解 CSS animations 和 transitions 的性能問題是這么解釋的，現(xiàn)代的瀏覽器通常會有兩個重要的執(zhí)行線程，這 2 個線程協(xié)同工作來渲染一個網(wǎng)頁：主線程和合成線程。
一般情況下，主線程負(fù)責(zé)：運(yùn)行 JavaScript；計算 HTML 元素的 CSS 樣式；頁面的布局；將元素繪制到一個或多個位圖中；將這些位圖交給合成線程。
相應(yīng)地，合成線程負(fù)責(zé)：通過 GPU 將位圖繪制到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計算出頁面中哪部分是可見的；計算出當(dāng)你在滾動頁面時哪部分是即將變成可見的；當(dāng)你滾動頁面時將相應(yīng)位置的元素移動到可視區(qū)域。
假設(shè)我們要一個元素的 height 從 100 px 變成 200 px，就像這樣：
div {
height: 100px;
transition: height 1s linear;
}
div:hover {
height: 200px;
}主線程和合成線程將按照下面的流程圖執(zhí)行相應(yīng)的操作。注意在橘黃色方框的操作可能會比較耗時，在藍(lán)色框中的操作是比較快速的。
而使用 transform:scale 實(shí)現(xiàn)
div {
transform: scale(0.5);
transition: transform 1s linear;
}
div:hover {
transform: scale(1.0);
}此時流程如下：
也就是說，使用 transform，瀏覽器只需要一次生成這個元素的位圖，并在動畫開始的時候?qū)⑺峤唤o GPU 去處理 。之后，瀏覽器不需要再做任何布局、 繪制以及提交位圖的操作。從而，瀏覽器可以充分利用 GPU 的特長去快速地將位圖繪制在不同的位置、執(zhí)行旋轉(zhuǎn)或縮放處理。
為了從數(shù)量級上去證實(shí)這個理論，我打開 chrome 的 Timeline 查看頁面 FPS
其中，當(dāng)用 height 做動畫元素時，在切換過程的 FPS 只有 44，我們知道每秒 60 幀是最適合人眼的交互，小于 60，人眼能明顯感覺到，這就是為什么卡頓的原因。
rendering 和 painting 所花的時間如下：
再來看看用 transform:scale
FPS 達(dá)到 66，且 rendering 和 painting 時間減少了 3 倍。
到此為止問題是解決了，隔了幾天，看到一篇解決 Chrome 動畫”卡頓”的辦法，發(fā)現(xiàn)還能通過開啟硬件加速的方式優(yōu)化動畫，于是又試了一遍。
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：
感謝各位的閱讀！關(guān)于“CSS3動畫卡頓性能優(yōu)化的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
分享名稱：CSS3動畫卡頓性能優(yōu)化的示例分析
文章地址：http://aaarwkj.com/article4/jeipoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、商城網(wǎng)站、電子商務(wù)、App設(shè)計、企業(yè)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 商城網(wǎng)站建設(shè)一些功能版塊介紹 2016-10-02
- 購物網(wǎng)站建設(shè)-商城網(wǎng)站如何針對用戶心理著手？ 2016-11-13
- 如何提升商城網(wǎng)站的用戶體驗(yàn)度 2023-03-26
- 在線商城網(wǎng)站制作的幾個策劃注意事項(xiàng) 2014-01-22
- 商城網(wǎng)站建設(shè)中的細(xì)節(jié)問題 2022-04-29
- 企業(yè)建立獨(dú)立商城網(wǎng)站需要哪些費(fèi)用 2022-11-11
- 微商城網(wǎng)站建設(shè)哪家好？ 2015-06-07
- 建設(shè)商城網(wǎng)站的好處有幾方面？ 2014-05-03
- 網(wǎng)站制作淺談商城網(wǎng)站制作的要點(diǎn) 2021-12-17
- 電子商城網(wǎng)站設(shè)計費(fèi)用多少 2022-11-24
- 商城網(wǎng)站特點(diǎn)功能 2022-06-16
- 網(wǎng)站建設(shè)完成之后新手朋友如何推廣自己的商城網(wǎng)站 2021-07-17