css屬性的選擇對(duì)動(dòng)畫性能有什么影響

發(fā)布時(shí)間：2021-09-15 15:29:44 來(lái)源：億速云閱讀：162 作者：柒染欄目：web開發(fā)

本篇文章為大家展示了css屬性的選擇對(duì)動(dòng)畫性能有什么影響，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

現(xiàn)在手機(jī)的占比越來(lái)越高，各種酷炫頁(yè)面層出不窮，這些特效都離不開css動(dòng)畫。說(shuō)到css動(dòng)畫，主流的情況也就無(wú)非這兩大類：位移和形變。本次的目的簡(jiǎn)單粗暴地講，其實(shí)就是我們應(yīng)該使用什么css屬性去進(jìn)行動(dòng)畫的繪制時(shí)，能夠有效的提高瀏覽器在渲染和繪制過(guò)程中的性能。

分別使用了left和transform在2秒內(nèi)向右平移了500px的位移。代碼如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

<style>   
.box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}   
.box-ps{-webkit-animation:box-ps 2s linear;}   
.box-tf{-webkit-animation:box-tf 2s linear;}   
  
@-webkit-keyframes box-ps{   
0%{   
left:0;   
}100%{   
left:500px;   
}   
}   
  
@-webkit-keyframes box-tf{   
0%{   
-webkit-transform:translate(0,0);   
}100%{   
-webkit-transform:translate(500px,0);   
}   
}   
</style>   
  
<body>   
<div class="box-ps"></div>   
<div class="box-tf"></div>   
</body>

然后在chrome下得到了如下的結(jié)果，第一張為使用left的截圖，第二張為使用transform的截圖：

css屬性的選擇對(duì)動(dòng)畫性能有什么影響

transform的截圖

顯而易見，我們?cè)趲Ｊ竭@里可以看到left比transform幀數(shù)要低，而且在渲染和繪制這邊的耗時(shí)，left要遠(yuǎn)遠(yuǎn)的大于transform?？吹竭@里，相信大家心里已經(jīng)有結(jié)論了。
我們?cè)倮胏hrome的show paint rectangles來(lái)觀察一下兩者在動(dòng)畫過(guò)程中，渲染和繪制的區(qū)域有何差異,第一張為使用left的截圖，第二張為使用transform的截圖：

css屬性的選擇對(duì)動(dòng)畫性能有什么影響

transform的截圖

css屬性的選擇對(duì)動(dòng)畫性能有什么影響

我們可以看到，使用left寫的整個(gè)動(dòng)畫過(guò)程中，瀏覽器一直在進(jìn)行繪制處理。而相對(duì)而言，使用transform時(shí)，僅僅是在動(dòng)畫開始和結(jié)束是進(jìn)行了繪制。因此，對(duì)于動(dòng)畫的性能上，transform要更為出色。至于原因，這里就要引入一個(gè)觸發(fā)重新布局的概念：

我們?cè)诟淖円恍傩詴r(shí)，如果是跟layout相關(guān)的屬性，則會(huì)觸發(fā)重新布局，導(dǎo)致渲染和繪制所需要的時(shí)間將會(huì)更長(zhǎng)。因此，我們?cè)趯憚?dòng)畫的時(shí)候因該規(guī)避這些屬性：width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不會(huì)出發(fā)重新布局的屬性有：transform(其中的translate, rotate, scale), color, background等。

所以，我們平時(shí)在寫css動(dòng)畫時(shí)，應(yīng)該優(yōu)先使用不觸發(fā)重新布局的屬性，這樣可以使我們所展示動(dòng)畫效果的更加流暢。

上述內(nèi)容就是css屬性的選擇對(duì)動(dòng)畫性能有什么影響，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

css屬性的選擇對(duì)動(dòng)畫性能有什么影響

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽