css3的動畫性能為什麼高

效能高的原因：1、css是關鍵影格動畫，補間動畫部分由瀏覽器完成，瀏覽器可以對動畫進行最佳化；2、程式碼簡單，效能調優方向固定；3、CSS動畫運行在合成線程中，不會阻塞主線程，並且在合成線程中完成的動作不會觸發回流和重繪，從而其渲染成本小。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1. 瀏覽器的渲染流程

渲染流程主要有4個步驟

• 解析HTML 產生DOM 樹

• 解析CSS 樣式產生CSSOM 樹，CSSOM 樹與DOM 樹結合產生Render tree

• 佈局Render Tree 對每個節點進行佈局處理，確定在螢幕上的位置

• 繪製Render Tree，遍歷渲染樹將每個節點繪製出來

為了優化使用者體驗，渲染引擎不會等到HTML 解析完才建立佈局渲染樹

產生DOM 樹

#DOM 樹的建構是一個深度遍歷過程，也就是說只有在所有子節點都建構好後才會去建構目前節點的下一個兄弟節點

產生Render 樹

產生DOM 樹的同時會產生CSSOM樹，根據CSSOM 和DOM 樹建立Render Tree，渲染樹包括顏色，尺寸等顯示屬性的矩形

DOM 樹和Render 樹

#2. 回流與重繪

CSS 中至關重要的概念

##回流

#回流也叫

重排，指幾何屬性需要改變的渲染。

每一次的回流都會將網頁內容

重新渲染，只是我們人眼感覺不到有任何變化，但是它確實是會清空頁面的，再從頁面的左上角的第一個像素點從左到右從上到下這樣一點一點渲染，每次回流都會是這樣的過程，只是感覺不到而已

渲染樹的節點改變，影響了該節點的幾何屬性，導致該節點位置發生變化，此時就會觸發瀏覽器回流並重新產生渲染樹。

常見的幾何屬性：佈局，尺寸這些可以用尺子量出來的屬性

display、float、grid
• width、padding

等

重繪

#重繪指更改

外觀屬性而不影響#集合屬性的渲染，類似顏色這些。相較於回流，重繪的作用不會那麼強烈。

渲染樹的節點改變，但不影響該節點的集合屬性，回流對瀏覽器效能的消耗是遠大於重繪的。且回流就必然帶來重繪，而重繪不一定需要回流

外觀屬性

#clip，background
• ##text
• 等

在介紹完這些知識後我們來聊聊CSS 動畫

3. CSS3 動畫

這裡我們只談論CSS3 的動畫

CSS3 動畫也被稱為補間動畫​​，原因是只需要添加關鍵幀的位置，其他的未定義的幀會被自動生成

因為我們只設置了幾個關鍵幀的位置，所以在進行動畫控制的時候比較困難，不能再半路暫停動畫，或者在動畫過程中添加一些其他操作，都不大容易

但是CSS 動畫也有很多的好處

瀏覽器可以對動畫進行最佳化

• 幀速不好的瀏覽器，CSS3 可以自然降級相容
• 程式碼簡單，效能調優方向固定
• 4. JS 動畫

首先，JS 動畫是逐幀動畫，在時間幀上繪製內容，一幀一幀的，所以他的可再造性很高，幾乎可以完成任何你想要的動畫形式。但由於逐幀動畫的內容不一樣，會增加製作的負擔，佔用較大的資源空間。

但是它也有很多的優勢

細膩的動畫

• 可控性高
• 酷高級的動畫
#5. CSS 動畫與JS 動畫對比

前面關於CSS 動畫和JS 動畫，都是一些概念性比較強的東西，不看也罷

說了這麼多，到底為什麼CSS動畫要

更有效率

呢？

第一點從實作動畫的複雜度來看，CSS 動畫大多都是補間動畫，而JS 動畫是逐幀動畫。當然這裡我們不談實現的效果

第二點#

編碼的高效，採用JS 去實現的動畫，無論多簡單的動畫，都需要去控制整個過程，當然你可能會說可以採用一些庫來解決這些問題，但是這些庫的實際運行可能要比原生實現的效率要低的多

第三點

性能的高效，在我們前面講到了回流和重繪，如果我們要操作一個元素向右移動，我們可能需要控制dom.style.left 屬性，每次來改變元素的位置，而結合我們所說的，幾何屬性的改變必然會造成回流，回流必然會造成重繪，可想而知如果我們採用JS 來實現動畫，這個代價有多大，這會造成瀏覽器在不斷的計算頁面，從而導致瀏覽器記憶體堆積。同時由於JavaScript 運行在瀏覽器的主執行緒中，主執行緒中還有其他的重要任務在執行，因而可能會受到干擾導致執行緒阻塞，從而丟幀

而CSS 的動畫是運行在合成線程中的，不會阻塞主線程，並且在合成線程中完成的動作不會觸發回流和重繪

當然還有一個重要的點：JS 動畫運行在CPU，而CSS 動畫運行在GPU

總的來說， CSS動畫的渲染成本小，而且它的執行效率高於JavaScript 動畫

（學習影片分享：css影片教學）

以上是css3的動畫性能為什麼高的詳細內容。更多資訊請關注PHP中文網其他相關文章！