css3中動畫性能高的原因是什么

小編給大家分享一下css3中動畫性能高的原因是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

性能高的原因：1、css是關(guān)鍵幀動畫，補間動畫部分由瀏覽器完成，瀏覽器可以對動畫進行優(yōu)化；2、代碼簡單，性能調(diào)優(yōu)方向固定；3、CSS動畫運行在合成線程中，不會阻塞主線程，并且在合成線程中完成的動作不會觸發(fā)回流和重繪，因而其渲染成本小。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

1. 瀏覽器的渲染流程

渲染流程主要有4個步驟

• 解析 HTML 生成DOM 樹

• 解析 CSS 樣式生成 CSSOM 樹，CSSOM 樹與 DOM 樹結(jié)合生成 Render tree

• 布局 Render Tree 對每個節(jié)點進行布局處理，確定在屏幕上的位置

• 繪制 Render Tree，遍歷渲染樹將每個節(jié)點繪制出來

為了優(yōu)化用戶體驗，渲染引擎不會等到 HTML 解析完才創(chuàng)建布局渲染樹

生成 DOM 樹

DOM 樹的構(gòu)建是一個深度遍歷過程，也就是說只有在所有子節(jié)點都構(gòu)建好后才會去構(gòu)建當前節(jié)點的下一個兄弟節(jié)點

生成 Render 樹

生成 DOM 樹的同時會生成 CSSOM 樹，根據(jù) CSSOM 和 DOM 樹構(gòu)建 Render Tree，渲染樹包括顏色，尺寸等顯示屬性的矩形

DOM 樹和 Render 樹

2. 回流和重繪

CSS 中至關(guān)重要的概念

回流

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

每一次的回流都會將網(wǎng)頁內(nèi)容重新渲染，只是我們?nèi)搜鄹杏X不到有任何變化，但是它確實是會清空頁面的，再從頁面的左上角的第一個像素點從左到右從上到下這樣一點一點渲染，每次回流都會是這樣的過程，只是感覺不到而已

渲染樹的節(jié)點發(fā)生改變，影響了該節(jié)點的幾何屬性，導致該節(jié)點位置發(fā)生變化，此時就會觸發(fā)瀏覽器回流并重新生成渲染樹。

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

• display、float、grid

• width、padding

等

重繪

重繪指更改外觀屬性而不影響集合屬性的渲染，類似于顏色這些。相比于回流，重繪的作用不會那么強烈。

渲染樹的節(jié)點發(fā)生改變，但不影響該節(jié)點的集合屬性，回流對瀏覽器性能的消耗是遠大于重繪的。并且回流就必然帶來重繪，重繪不一定需要回流

外觀屬性

• clip，background

• text

等

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

3. CSS3 動畫

這里我們只談?wù)?CSS3 的動畫

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

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

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

• 瀏覽器可以對動畫進行優(yōu)化

• 幀速不好的瀏覽器，CSS3 可以自然降級兼容

• 代碼簡單，性能調(diào)優(yōu)方向固定

4. JS 動畫

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

但是它也有很多的優(yōu)勢

• 細膩的動畫

• 可控性高

• 炫酷高級的動畫

5. CSS 動畫與 JS 動畫對比

前面關(guān)于 CSS 動畫和 JS 動畫，都是一些概念性比較強的東西，不看也罷

說了這么多，到底為什么CSS動畫要更高效呢？

第一點

從實現(xiàn)動畫的復雜度來看，CSS 動畫大多數(shù)都是補間動畫，而 JS 動畫是逐幀動畫。當然這里我們不談?wù)搶崿F(xiàn)的效果

第二點

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

第三點

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

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

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

總的來說， CSS動畫的渲染成本小，并且它的執(zhí)行效率高于 JavaScript 動畫

以上是“css3中動畫性能高的原因是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！