css屬性的選擇對動畫性能的影響

原文出處: 攜程設計委員會 
css

如今手機的佔比愈來愈高,各類酷炫頁面層出不窮,這些特效都離不開css動畫。說到css動畫,主流的狀況也就無非這兩大類:位移和形變。而咱們在寫一個動畫特效的過程當中,如何去提高它的性能呢?固然首先咱們須要去了解一下基本的概念,好比瀏覽器渲染的工做原理等,這些我也在讀了幾位大牛寫的相關文章後纔有了必定的瞭解,這邊我也不細說了,有興趣的同窗能夠去了解一下。本次的目的簡單粗暴地講,其實就是咱們應該使用什麼css屬性去進行動畫的繪製時,可以有效的提升瀏覽器在渲染和繪製過程當中的性能。html

快速進入主題,你們先來看個demo。我分別使用了left和transform在2秒內向右平移了500px的位移。代碼以下:web

 

 

1chrome

2編程

3瀏覽器

4架構

5佈局

6性能

7動畫

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<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下獲得了以下的結果,第一張爲使用left的截圖,第二張爲使用transform的截圖:

ps

tf

顯而易見,咱們在幀模式這裏能夠看到left比transform幀數要低,並且在渲染和繪製這邊的耗時,left要遠遠的大於transform。看到這裏,相信你們內心已經有結論了。
咱們再利用chrome的show paint rectangles來觀察一下二者在動畫過程當中,渲染和繪製的區域有何差別,第一張爲使用left的截圖,第二張爲使用transform的截圖:

ps

tf

咱們能夠看到,使用left寫的整個動畫過程當中,瀏覽器一直在進行繪製處理。而相對而言,使用transform時,僅僅是在動畫開始和結束是進行了繪製。所以,對於動畫的性能上,transform要更爲出色。至於緣由,這裏就要引入一個觸發從新佈局的概念:

咱們在改變一些屬性時,若是是跟layout相關的屬性,則會觸發從新佈局,致使渲染和繪製所須要的時間將會更長。所以,咱們在寫動畫的時候因該規避這些屬性:width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不會出發從新佈局的屬性有:transform(其中的translate, rotate, scale), color, background等。

因此,咱們平時在寫css動畫時,應該優先使用不觸發從新佈局的屬性,這樣可使咱們所展現動畫效果的更加流暢。

問啊-定製化IT教育平臺,牛人一對一服務,有問必答,開發編程社交頭條 官方網站:www.wenaaa.com

QQ羣290551701 彙集不少互聯網精英,技術總監,架構師,項目經理!開源技術研究,歡迎業內人士,大牛及新手有志於從事IT行業人員進入!

相關文章
相關標籤/搜索