CSS3動畫（性能篇）

寫在前面

高性能移動Web相較PC的場景需要考慮的因素也相對更多更復雜，我們總結為以下幾點： 流量、功耗與流暢度。

在PC時代我們更多的是考慮體驗上的流暢度，而在Mobile端本身豐富的場景下，需要額外關注對用戶基站網絡流量使用的情況，設備耗電量的情況。

關於流暢度，主要體現在前端動畫中，在現有的前端動畫體系中，通常有兩種模式：JS動畫與CSS3動畫。 JS動畫是通過JS動態改寫樣式實現動畫能力的一種方案，在PC端兼容低端瀏覽器中不失為一種推薦方案。 而在移動端，我們選擇性能更優瀏覽器原生實現方案：CSS3動畫。

然而，CSS3動畫在移動多終端設備場景下，相比PC會面對更多的性能問題，主要體現在動畫的卡頓與閃爍。

目前對提升移動端CSS3動畫體驗的主要方法有幾點：

盡可能多的利用硬件能力（3D變形會消耗更多的內存與功耗，應確實有性能問題時才去使用它，兼在權衡）

1、使用3D變形來開啟GPU加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

2、動畫過程有閃爍（通常發生在動畫開始的時候），可以嘗試下面的Hack

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

3、一個元素通過translate3d右移500px的動畫流暢度會明顯優於使用left屬性

• CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite
• Paint通常是其中最花費性能的，盡可能避免使用觸發paint的CSS動畫屬性，這也是為什么我們推薦在CSS動畫中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因為left會額外觸發layout與paint，而webkit-transform只觸發整個頁面composite（這也是為什么推薦在CSS動畫中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）

#ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}


#ball-2 {
  transition: left .5s ease;
  left: 0;
}
#ball-2.slidein {
  left: 500px;
}

div {
  -webkit-animation-duration: 5s;
  -webkit-animation-name: move;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  width: 200px;
  height: 200px;
  margin: 100px;
  background-color: #808080;
  position: absolute;
}
/*第一種方案  用css屬性left*/
@-webkit-keyframes move{
    from {
        left: 100px;
    }
    to {
        left: 200px;
    }
}
/*第二種方案  用css3動畫屬性translateX*/
@-webkit-keyframes move{
    from {
        -webkit-transform: translateX(100px);
    }
    to {
        -webkit-transform: translateX(200px);
    }
}

 

盡可能少的使用box-shadows與gradients

box-shadows與gradients往往都是頁面的性能殺手，尤其是在一個元素同時都使用了它們，所以擁抱扁平化設計吧

盡可能的讓動畫元素不在文檔流中，以減少重排

position: fixed;
position: absolute;

 

優化 DOM layout 性能

// 觸發兩次 layout
var newWidth = aDiv.offsetWidth + 10;   // Read
aDiv.style.width = newWidth + 'px';     // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + 'px';   // Write

// 只觸發一次 layout
var newWidth = aDiv.offsetWidth + 10;   // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + 'px';     // Write
aDiv.style.height = newHeight + 'px';   // Write

連續的讀取offsetWidth/Height屬性與連續的設置width/height屬性，相比分別讀取設置單個屬性可少觸發一次layout。從結論看似乎與執行隊列有關，沒錯，這是瀏覽器的優化策略。所有可觸發layout的操作都會被暫時放入 layout-queue中，等到必須更新的時候，再計算整個隊列中所有操作影響的結果，如此就可只進行一次的layout，從而提升性能。

哪些操作下會layout的更新（也稱為reflow或者relayout）？

• Element: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

• Frame, HTMLImageElement: height, width

• Range: getBoundingClientRect(), getClientRects()

• SVGLocatable: computeCTM(), getBBox()

• SVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

• SVGUse: instanceRoot

• window: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

CSS屬性在CSS動畫中行為表