41.两张图解释CSS动画的性能 about cc HOT 5 OPEN

文章好，图也挺好的。
不过我觉得 生成这个元素的位图 这一部分不是很详细，可以稍微补充详细点。

所谓 生成这个元素的位图 其实是 纹理(texture)，在 Chrome 中，存在有不同类型的层： RenderLayer(负责 DOM 子树)，GraphicsLayer(负责 RenderLayer 的子树)，其中 GraphicsLayer 层是作为纹理(texture)上传给 GPU 的。

这里的纹理指的是 GPU 的一个术语：可以把它想象成一个从主存储器(例如 RAM)移动到图像存储器(例如 GPU 中的 VRAM)的位图图像(bitmap image)。一旦它被移动到 GPU 中，你可以将它匹配成一个网格几何体(mesh geometry)，在 Chrome 中使用纹理来从 GPU 上获得大块的页面内容。通过将纹理应用到一个非常简单的矩形网格就能很容易匹配不同的位置(position)和变形(transformation)，这也就是 3D CSS 的工作原理。

而 transform 移动元素时就是移动这些生成的 GraphicsLayer 层从而避免了浏览器大量的reflow（relayout）而提升性能的。

那么一个元素什么时候会触发创建一个层？从目前来说，满足以下任意情况便会创建层：

• 3D 或透视变换(perspective、transform) CSS 属性
• 使用加速视频解码的
• 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
• 混合插件(如 Flash)
• 对自己的 opacity 做 CSS 动画或使用一个动画变换的元素
• 拥有加速 CSS 过滤器的元素
• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
• 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

from cc.

@chokcoco

对于 纹理(texture) 确实没有深入的研究过。

非常感谢，补充的很详细。

from cc.

嗯嗯 很好 学习了

from cc.

怪不得有的文章提到给css加上一个并不移动的 3D transform 就能加速。

from cc.

👍 终于比较详细的了解了所谓的 开启 GPU 加速 了

from cc.