高性能 CSS3 動畫

高性能 CSS3 動畫

• quanyaji 發佈於 2013-8-6 22:27
• 查看數: 2871
• 評論數: 2
• 帖子模式

本帖最後由 quanyaji 於 2013-8-14 16:29 編輯

https://github.com/AlloyTeam/Mar ... e-css3-animation.md

1. 高性能 CSS3 動畫
   
2. 
   
3. 高性能移動Web相較PC的場景須要考慮的因素也相對更多更復雜，咱們總結爲如下幾點： 流量、功耗與流暢度。 在PC時代咱們更多的是考慮體驗上的流暢度，而在Mobile端自己豐富的場景下，須要額外關注對用戶基站網絡流量使用的狀況，設備耗電量的狀況。
   
4. 
   
5. 關於流暢度，主要體如今前端動畫中，在現有的前端動畫體系中，一般有兩種模式：JS動畫與CSS3動畫。 JS動畫是經過JS動態改寫樣式實現動畫能力的一種方案，在PC端兼容低端瀏覽器中不失爲一種推薦方案。 而在移動端，咱們選擇性能更優瀏覽器原生實現方案：CSS3動畫。
   
6. 
   
7. 然而，CSS3動畫在移動多終端設備場景下，相比PC會面對更多的性能問題，主要體如今動畫的卡頓與閃爍。
   
8. 
   
9. 目前對提高移動端CSS3動畫體驗的主要方法有幾點：
   
10. 
    
11. 儘量多的利用硬件能力，如使用3D變形來開啓GPU加速
    
12. 
    
13. -webkit-transform: translate3d(0, 0, 0);
    
14. -moz-transform: translate3d(0, 0, 0);
    
15. -ms-transform: translate3d(0, 0, 0);
    
16. transform: translate3d(0, 0, 0);
    
17. 如動畫過程有閃爍（一般發生在動畫開始的時候），能夠嘗試下面的Hack：
    
18. 
    
19. -webkit-backface-visibility: hidden;
    
20. -moz-backface-visibility: hidden;
    
21. -ms-backface-visibility: hidden;
    
22. backface-visibility: hidden;
    
23. 
    
24. -webkit-perspective: 1000;
    
25. -moz-perspective: 1000;
    
26. -ms-perspective: 1000;
    
27. perspective: 1000;
    
28. 以下面一個元素經過translate3d右移500px的動畫流暢度會明顯優於使用left屬性：
    
29. 
    
30. #ball-1 {
    
31.   transition: -webkit-transform .5s ease;
    
32.   -webkit-transform: translate3d(0, 0, 0);
    
33. }
    
34. #ball-1.slidein {
    
35.   -webkit-transform: translate3d(500px, 0, 0);
    
36. }
    
37. 
    
38. 
    
39. #ball-2 {
    
40.   transition: left .5s ease;
    
41.   left: 0;
    
42. }
    
43. #ball-2.slidein {
    
44.   left: 500px;
    
45. }
    
46. 注：3D變形會消耗更多的內存與功耗，應確實有性能問題時纔去使用它，兼在權衡
    
47. 
    
48. 儘量少的使用box-shadows與gradients
    
49. 
    
50. box-shadows與gradients每每都是頁面的性能殺手，尤爲是在一個元素同時都使用了它們，因此擁抱扁平化設計吧。
    
51. 
    
52. 儘量的讓動畫元素不在文檔流中，以減小重排
    
53. 
    
54. position: fixed;
    
55. position: absolute;
    
56. 優化 DOM layout 性能
    
57. 
    
58. 咱們從實例開始描述這個主題：
    
59. 
    
60. var newWidth = aDiv.offsetWidth + 10;
    
61. aDiv.style.width = newWidth + 'px';
    
62. var newHeight = aDiv.offsetHeight + 10;
    
63. aDiv.style.height = newHeight + 'px';
    
64. 
    
65. var newWidth = aDiv.offsetWidth + 10;
    
66. var newHeight = aDiv.offsetHeight + 10;
    
67. aDiv.style.width = newWidth + 'px';
    
68. aDiv.style.height = newHeight + 'px';
    
69. 這是兩段能力上徹底等同的代碼，顯式的差別正如咱們所見，只有執行順序的區別。但真是如此嗎？下面是加了說明註釋的代碼版本，很好的闡述了其中的進一步差別：
    
70. 
    
71. // 觸發兩次 layout
    
72. var newWidth = aDiv.offsetWidth + 10;   // Read
    
73. aDiv.style.width = newWidth + 'px';     // Write
    
74. var newHeight = aDiv.offsetHeight + 10; // Read
    
75. aDiv.style.height = newHeight + 'px';   // Write
    
76. 
    
77. // 只觸發一次 layout
    
78. var newWidth = aDiv.offsetWidth + 10;   // Read
    
79. var newHeight = aDiv.offsetHeight + 10; // Read
    
80. aDiv.style.width = newWidth + 'px';     // Write
    
81. aDiv.style.height = newHeight + 'px';   // Write
    
82. 從註釋中可找到規律，連續的讀取offsetWidth/Height屬性與連續的設置width/height屬性，相比分別讀取設置單個屬性可少觸發一次layout。
    
83. 
    
84. 從結論看彷佛與執行隊列有關，沒錯，這是瀏覽器的優化策略。全部可觸發layout的操做都會被暫時放入 layout-queue 中，等到必須更新的時候，再計算整個隊列中全部操做影響的結果，如此就可只進行一次的layout，從而提高性能。
    
85. 
    
86. 關鍵一，可觸發layout的操做，哪些操做下會layout的更新（也稱爲reflow或者relayout）？
    
87. 
    
88. 咱們從瀏覽器的源碼實現入手，以開源Webkit/Blink爲例， 對layout的更新，Webkit 主要經過 Document::updateLayout 與 Document::updateLayoutIgnorePendingStylesheets 兩個方法：
    
89. 
    
90. void Document::updateLayout()
    
91. {
    
92.     ASSERT(isMainThread());
    
93. 
    
94.     FrameView* frameView = view();
    
95.     if (frameView && frameView->isInLayout()) {
    
96.         ASSERT_NOT_REACHED();
    
97.         return;
    
98.     }
    
99. 
    
100.     if (Element* oe = ownerElement())
     
101.         oe->document()->updateLayout();
     
102. 
     
103.     updateStyleIfNeeded();
     
104. 
     
105.     StackStats::LayoutCheckPoint layoutCheckPoint;
     
106. 
     
107.     if (frameView && renderer() && (frameView->layoutPending() || renderer()->needsLayout()))
     
108.         frameView->layout();
     
109. 
     
110.     if (m_focusedNode && !m_didPostCheckFocusedNodeTask) {
     
111.         postTask(CheckFocusedNodeTask::create());
     
112.         m_didPostCheckFocusedNodeTask = true;
     
113.     }
     
114. }
     
115. 
     
116. 
     
117. void Document::updateLayoutIgnorePendingStylesheets()
     
118. {
     
119.     bool oldIgnore = m_ignorePendingStylesheets;
     
120. 
     
121.     if (!haveStylesheetsLoaded()) {
     
122.         m_ignorePendingStylesheets = true;
     
123. 
     
124.         HTMLElement* bodyElement = body();
     
125.         if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) {
     
126.             m_pendingSheetLayout = DidLayoutWithPendingSheets;
     
127.             styleResolverChanged(RecalcStyleImmediately);
     
128.         } else if (m_hasNodesWithPlaceholderStyle)
     
129.             recalcStyle(Force);
     
130.     }
     
131. 
     
132.     updateLayout();
     
133. 
     
134.     m_ignorePendingStylesheets = oldIgnore;
     
135. }
     
136. 從 updateLayoutIgnorePendingStylesheets 方法的內部實現可知，其也是對 updateLayout 方法的擴展，而且在現有的 layout 更新模式中，大部分場景都是調用 updateLayoutIgnorePendingStylesheets 來進行layout的更新。
     
137. 
     
138. 搜索 Webkit 實現中調用 updateLayoutIgnorePendingStylesheets 方法的代碼, 獲得如下可致使觸發 layout 的操做：
     
139. 
     
140. Element: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
     
141. 
     
142. Frame, HTMLImageElement: height, width
     
143. 
     
144. Range: getBoundingClientRect(), getClientRects()
     
145. 
     
146. SVGLocatable: computeCTM(), getBBox()
     
147. 
     
148. SVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()
     
149. 
     
150. SVGUse: instanceRoot
     
151. 
     
152. window: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()
     
153. 
     
154. 進一步深刻Layout，那上文中必須更新的必要條件是什麼？ 在 Stoyan Stefanov 的 Rendering: repaint, reflow/relayout, restyle 一文中已作比較詳細的解答，可移步瞭解~

複製代碼