亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入理解css屬性的選擇對動畫性能的影響

  發(fā)布時間：2016-04-20 16:19:48   作者：佚名   我要評論
下面小編就為大家?guī)硪黄钊肜斫鈉ss屬性的選擇對動畫性能的影響。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考

現(xiàn)在手機的占比越來越高，各種酷炫頁面層出不窮，這些特效都離不開css動畫。說到css動畫，主流的情況也就無非這兩大類：位移和形變。而我們在寫一個動畫特效的過程中，如何去提升它的性能呢？當(dāng)然首先我們需要去了解一下基本的概念，比如瀏覽器渲染的工作原理等，這些我也在讀了幾位大牛寫的相關(guān)文章后才有了一定的了解，這邊我也不細(xì)說了，有興趣的同學(xué)可以去了解一下。本次的目的簡單粗暴地講，其實就是我們應(yīng)該使用什么css屬性去進行動畫的繪制時，能夠有效的提高瀏覽器在渲染和繪制過程中的性能。

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

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. .box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}   
  3. .box-ps{-webkit-animation:box-ps 2s linear;}   
  4. .box-tf{-webkit-animation:box-tf 2s linear;}   
  5.   
  6. @-webkit-keyframes box-ps{   
  7. 0%{   
  8. left:0;   
  9. }100%{   
  10. left:500px;   
  11. }   
  12. }   
  13.   
  14. @-webkit-keyframes box-tf{   
  15. 0%{   
  16. -webkit-transform:translate(0,0);   
  17. }100%{   
  18. -webkit-transform:translate(500px,0);   
  19. }   
  20. }   
  21. </style>   
  22.   
  23. <body>   
  24. <div class="box-ps"></div>   
  25. <div class="box-tf"></div>   
  26. </body>  

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

transform的截圖

 

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

transform的截圖

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

我們在改變一些屬性時，如果是跟layout相關(guān)的屬性，則會觸發(fā)重新布局，導(dǎo)致渲染和繪制所需要的時間將會更長。因此，我們在寫動畫的時候因該規(guī)避這些屬性：width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不會出發(fā)重新布局的屬性有：transform(其中的translate, rotate, scale), color, background等。

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

以上這篇深入理解css屬性的選擇對動畫性能的影響就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/dehua-chen/archive/2016/04/20/5411728.html

相關(guān)文章

最新評論