原文出處: 攜程設計委員會
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的截圖:
顯而易見,咱們在幀模式這裏能夠看到left比transform幀數要低,並且在渲染和繪製這邊的耗時,left要遠遠的大於transform。看到這裏,相信你們內心已經有結論了。
咱們再利用chrome的show paint rectangles來觀察一下二者在動畫過程當中,渲染和繪製的區域有何差別,第一張爲使用left的截圖,第二張爲使用transform的截圖:
咱們能夠看到,使用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行業人員進入!