5

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

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

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

或者，内容也可以使用标准 HTML 来实现。（内容布局本身“有点”棘手——它需要几个浮动或定位的嵌套 div 元素和跨度，但没有什么疯狂的。）

我的问题是 - 哪个选项可能会产生最好（最流畅）的动画？

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

我想知道浏览器是否通常更擅长动画/渲染具有图形背景的简单 DOM 元素，或者更复杂的 DOM 元素（有很多子元素）而没有图形元素？

另外 - 还有其他指导方针吗？例如，

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

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

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

4

1 回答 1

2

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

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

Webkit 树结构

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

在此之后，遍历树并且每个 RenderObject 要么合并到其最近祖先的 RenderLayer 中，要么合并到新的 RenderLayer 中，如果其中一个关于 RenderObject 是真的：

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

在此之后，遍历树，并且每个 RenderLayer 要么合并到其最近祖先的 GraphicsLayer 中，要么合并到新的 GraphicsLayer（如果其中一个关于 RenderLayer）：

  • 图层具有 3D 或透视变换 CSS 属性
  • 层由<video>使用加速视频解码的元素使用
  • 层由<canvas>具有 3D 上下文或加速 2D 上下文的元素使用
  • 层用于复合插件
  • 图层的不透明度使用 CSS 动画或使用动画 webkit 变换
  • 图层使用加速 CSS 过滤器
  • 层有一个后代，它是一个合成层
  • 图层有一个具有较低 z-index 的同级，该同级具有一个合成图层（换句话说，该图层呈现在合成图层的顶部）

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

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

于 2013-03-18T14:24:19.227 回答