CSS3动画和过渡 - 浏览器在动画图形背景或DOM元素方面更好吗？
mat*_*ler 5 html5 css3 css-transitions
我正在开发一个网络应用程序; 其中一个设计要求是几个大型CSS3动画.
具体来说 - 它有一个大的<div>,将响应用户输入在屏幕上转换.
由于应用程序的设计方式,其"内容" <div>可以实现为设置为<div>背景的大型静态图形(例如,.jpg或.png).
或者,内容也可以使用标准HTML实现.(内容布局本身是一个"小"的棘手 - 它需要几个浮动或定位的嵌套div元素和跨度,但没有什么疯狂.)
我的问题是 - 哪个选项可能会产生最好(最流畅)的动画？
(我显然可以自己测试一下,但通常很难判断动画的流畅程度,尤其是在各种设备上的十几种不同浏览器中.我也意识到还有其他考虑因素 - 例如维护.但在这种情况下,我完全专注于动画表演.)
我想知道,如果浏览器一般都是在动画/渲染简单的DOM元素更好地与图形背景,或更复杂的DOM元素(有很多儿童)无图形元素？
还 - 有其他指导方针吗？例如,
- 浏览器是否比其他浏览器更好地激活某些类型的图形元素？(例如.png vs .jpg)
- 浏览器在子元素具有
position:absolute,子元素浮动时,或子元素的位置由常规文档流确定时,是否更好地为元素设置动画？ - 对嵌套元素执行不透明度,阴影或3D变换等操作会对父元素的动画产生负面影响吗？
- 动画性能是否会因元素的复杂性而降低？例如,具有十几级嵌套DOM元素动画的元素是否比仅具有文本节点的简单元素更不平滑？
我对这些事情有直觉(深层嵌套的DOM元素会比简单元素更不容易制作动画),但我的直觉常常是错误的.所以,我想知道是否有关于浏览器或多或少有用的"规则".
当具有大量子元素的大元素被动画化时,我还应该考虑什么呢？
您的答案将取决于每个实现所使用的特定渲染策略，但如果您同意使用 WebKit 的策略作为“通用”策略，那么您的所有答案都在本文档中：
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
首先创建 DOM 树的“RenderObject”克隆
之后，遍历树，并且每个 RenderObject 要么合并到其最近祖先的 RenderLayer 中，要么合并到新的 RenderLayer 中（如果有关 RenderObject 的以下条件之一为真）：
- 它是页面的根对象
- 它具有明确的 CSS 位置属性（相对、绝对或变换）
- 它是透明的
- 有溢出、阿尔法遮罩或反射
- 有 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 代码，所以我想真正了解它的唯一方法就是分析它。