CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite

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

如下圖使用left將持續觸發頁面重繪，表現為紅色邊框：

附：《[韓順平]輕松搞定網頁設計(html+css+js)》

如下圖使用-webkit-transform頁面只發生重組，表現為橙色邊框：

CSS屬性在CSS動畫中行為表

高性能移動Web相較PC的場景需要考慮的因素也相對更多更復雜，我們總結為以下幾點： 流量、功耗與流暢度。 在PC時代我們更多的是考慮體驗上的流暢度，而在Mobile端本身豐富的場景下，需要額外關注對用戶基站網絡流量使用的情況，設備耗電量的情況。

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

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

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

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

如下面一個元素通過translate3d右移500px的動畫流暢度會明顯優于使用left屬性：

注：3D變形會消耗更多的內存與功耗，應確實有性能問題時才去使用它，兼在權衡

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

我們從實例開始描述這個主題：

這是兩段能力上完全等同的代碼，顯式的差異正如我們所見，只有執行順序的區別。但真是如此嗎？下面是加了說明注釋的代碼版本，很好的闡述了其中的進一步差異：

從注釋中可找到規律，連續的讀取offsetWidth/Height屬性與連續的設置width/height屬性，相比分別讀取設置單個屬性可少觸發一次layout。

從結論看似乎與執行隊列有關，沒錯，這是瀏覽器的優化策略。所有可觸發layout的操作都會被暫時放入 layout-queue 中，等到必須更新的時候，再計算整個隊列中所有操作影響的結果，如此就可只進行一次的layout，從而提升性能。

關鍵一，可觸發layout的操作，哪些操作下會layout的更新（也稱為reflow或者relayout）？

我們從瀏覽器的源碼實現入手，以開源Webkit/Blink為例， 對layout的更新，Webkit 主要通過 Document::updateLayout 與Document::updateLayoutIgnorePendingStylesheets 兩個方法：

從 updateLayoutIgnorePendingStylesheets 方法的內部實現可知，其也是對 updateLayout 方法的擴展，并且在現有的 layout 更新模式中，大部分場景都是調用 updateLayoutIgnorePendingStylesheets 來進行layout的更新。

以上就是關于CSS動畫屬性的詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。