html - CSS3 动画和过渡——浏览器是否更擅长动画图形背景或 DOM 元素？

Question

我正在开发一个网络应用程序；它的设计要求之一是几个大型 CSS3 动画。

具体来说 - 它有一个很大的 <div>将在屏幕上转换以响应用户输入。

由于应用程序的设计方式，<div> 的“内容”可以实现为设置为 <div> 的大型静态图形(例如 .jpg 或 .png)的背景。

或者，内容也可以用标准 HTML 实现。 (内容布局本身是一个“小”技巧 - 它需要几个 float 或定位的嵌套 div 元素和跨度，但没有什么疯狂的。)

我的问题是 - 哪个选项可能会产生最佳(最流畅)的动画效果？

(我当然可以自己测试，但通常很难判断动画的流畅度，尤其是在各种设备上的十几个不同的浏览器上。我也意识到还有其他考虑因素 - 例如，维护。但是在这种情况下，我完全专注于动画性能。)

我想知道浏览器是否通常更擅长动画/呈现简单的 DOM 元素 WITH 图形背景，或更复杂的 DOM 元素(有很多 child )没有图形元素？

此外 - 还有其他指南吗？例如，

• 浏览器对某些类型的图形元素的动画效果是否优于其他浏览器？ (例如，.png 与 .jpg)
• 当元素的子元素具有 position:absolute 时，浏览器是否会更好地为元素设置动画？ ，当子元素 float 时，或者当子元素的位置由常规文档流确定时？
• 嵌套元素的不透明度、投影或 3D 变换等是否会对父元素的动画产生不利影响？
• 动画性能是否会随着元素的复杂性而降低？例如，具有十几层嵌套 DOM 元素动画的元素是否不如仅具有文本节点的简单元素流畅？

我对这些事情有直觉(深度嵌套的 DOM 元素的动画不如简单元素流畅)，但我的直觉常常是错误的。所以，我想知道是否存在关于浏览器或多或少工作的“规则”。

当包含大量子元素的大型元素被动画化时，我还应该考虑什么？

Answer 1

您的答案将取决于每个实现所使用的特定呈现策略，但如果您同意使用 WebKit 的策略作为“通用”策略，那么您的所有答案都在本文档中:

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

首先创建 DOM 树的“RenderObject”克隆

在此之后，遍历树并将每个 RenderObject 合并到其最近祖先的 RenderLayer 中 或者，如果其中一个关于 RenderObject 为真，则进入一个新的 RenderLayer:

• 它是页面的根对象
• 它具有明确的 CSS 位置属性(相对、绝对或转换)
• 透明
• 有溢出、alpha mask 或反射
• 有一个 CSS 过滤器
• 对应于<canvas>具有 3D (WebGL) 上下文或加速 2D 上下文的元素
• 对应一个<video>元素

在此之后，遍历树并将每个 RenderLayer 合并到其最近祖先的 GraphicsLayer 中 或者如果其中一个关于 RenderLayer 为真，则进入一个新的 GraphicsLayer:

• 图层具有 3D 或透视变换 CSS 属性
• 层被 <video> 使用使用加速视频解码的元素
• 层被 <canvas> 使用具有 3D 上下文或加速 2D 上下文的元素
• 层用于复合插件
• 图层使用 CSS 动画实现不透明度，或使用动画 webkit 转换
• 图层使用加速的 CSS 过滤器
• Layer 有一个合成层的后代
• Layer 有一个 z-index 较低的兄弟层，它有一个合成层(换句话说，该层在合成层之上呈现)

因此，了解这通常是如何工作的并在这里进行预感，我不得不说首先最小化导致创建新 GraphicsLayer 的事物，然后最小化导致创建新 RenderLayer 的事物。只要额外的节点不会导致创建新的 RenderLayers 或 GraphicsLayers，您就可以摆脱大量的 DOM 节点嵌套或任何您正在谈论的内容。

还有关于发送 DOM 元素向量的位图图像而不是向量本身的想法。我真的怀疑它会更快。对我来说，PNG 或 JPEG 在某种程度上是表示 DOM 节点比矢量更有效的方式，这对我来说没有任何意义。但是嘿，我没有编写 Webkit 代码，所以我想真正了解它的唯一方法是分析它。