CSS3動畫和轉換 - 瀏覽器能更好地動畫圖形背景或DOM元素嗎？

Question

我正在開發一個web應用程序;其中一個設計要求是幾個大型的CSS3動畫。

具體來說 - 它有一個大的<div>將響應用戶輸入在屏幕上轉換。

由於應用程序的設計方式，該<div>的「內容」可以實現爲設置爲<div>的背景的大型靜態圖形（例如.jpg或.png）。

或者，內容也可以用標準HTML實現。 （內容佈局本身是一個「小」棘手 - 它需要幾個浮動或定位嵌套的div元素和跨度，但沒有什麼瘋狂的。）

我的問題是 - 哪個選項可能導致最好（最平滑）動畫？我很明顯可以自己測試這個，但是很難判斷動畫的平滑度，特別是在各種設備上的十幾種不同的瀏覽器上，我也意識到還有其他的考慮因素 - 例如維護。但是，在這種情況下，我完全專注於動畫性能。）

/我想知道如果瀏覽器一般都是在動畫渲染好簡單的DOM元素與圖形背景，或更復雜的DOM元素（有很多孩子）沒有圖形元素？

另外 - 是否有其他的指導方針？例如，

• 瀏覽器對某些類型的圖形元素進行動畫效果是否比其他類型更好？ （例如，.png和.jpg）
• 瀏覽器在子元素具有position:absolute，子元素是否浮動時，或者子元素的位置是由常規文檔流確定時，是否更好地爲元素設置動畫效果？
• 像嵌套元素上的不透明，陰影或3D轉換之類的東西對父元素的動畫產生不利影響嗎？
• 相對於元素的複雜性，動畫性能會降低嗎？例如，一個有十幾層嵌套DOM元素動畫的元素比一個只有文本節點的簡單元素不夠流暢？

我對這些事情有一個直覺（深度嵌套的DOM元素會比簡單的元素動畫不夠流暢），但我的直覺往往是錯誤的。所以，我想知道是否有關於瀏覽器的更多或更少工作的「規則」。

當有大量子元素的大元素動畫時，還應該考慮什麼？

Answer 1

您的答案將取決於每個實現使用的特定渲染策略，但如果你是使用WebKit的策略爲「一般」的戰略確定，然後你所有的答案就在本文中：

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

第一「的渲染對象」 DOM樹的克隆創建

在此之後，樹進行遍歷每個渲染對象要麼是INC orporated到其最近的祖先 的RenderLayer或進入一個新的RenderLayer如果其中一個是關於渲染對象真：

• 這是頁面的根對象
• 它有明確的CSS position屬性（相對的，絕對的或變換）
• 它是透明
• 有溢出，α掩模或反射
• 擁有CSS濾波器
• 對應於具有3D（WebGL的）上下文或加速的2D上下文
• 對應於一個<video>元件

在此之後0元件，樹被遍歷，並且每個RenderLayer要麼併入其最近的祖先 的GraphicsLayer或進入一個新的GraphicsLayer如果其中一個是關於RenderLayer真：

• 層具有3D或透視變換CSS屬性
• 層使用<video> eleme NT使用加速視頻解碼
• 層用於由<canvas>元件與3D上下文或加速
• 層被用於合成後插件
• 層使用CSS動畫其不透明性或使用動畫的webkit變換2D的上下文
• 層使用加速的CSS濾波器
• 層具有後代是一個合成層
• 層具有與具有合成層（換言之該層上呈現的一個頂部的較低的z-index同級合成圖層）

因此，知道這個通常如何工作，並在這裏進行預感，我不得不說，首先儘量減少導致創建新GraphicsLayer的事情，然後儘量減少導致創建新RenderLayer的事情。只要額外的節點不會導致創建新的RenderLayers或GraphicsLayers，您可能會逃脫大量的DOM節點嵌套或任何您在談論的內容。

另外，關於通過DOM元素向量而不是向量本身的位圖圖像發送的想法。我真的懷疑它會更快。對我來說，PNG或JPEG不會是一種比矢量更有效的表示DOM節點的方式。但是，嘿，我沒有編寫Webkit的代碼，所以我猜想唯一真正知道的方法是分析它。