WebKit 是否使用 OpenGL 来呈现 CSS 过渡？答案

【问题标题】：Does WebKit use OpenGL to render CSS transitions?WebKit 是否使用 OpenGL 来呈现 CSS 过渡？
【发布时间】：2011-09-27 22:00:30
【问题描述】：

WebKit 是使用 OpenGL 来渲染 CSS 过渡，还是使用软件渲染？

【问题讨论】：

标签： opengl css webkit css-transitions

【解决方案1】：

WebKit 只是一个前端。这取决于后端和硬件支持。谷歌浏览器使用skia作为后端，它可以使用软件或硬件。所以答案是它取决于后端的实现和运行它的硬件。

【讨论】：

【解决方案2】：

据我所知，唯一使用转换的硬件加速属性是 translate3d transform。

例如：

// Normal
div{
    -webkit-transition: all 0.5s ease-out;
}

// Adding class to animate
div.transformed{
    -webkit-transform: translate3d(100px, 100px, 0);
}

如果您只使用translate 转换或动画任何其他属性，则不会进行硬件加速。

【讨论】：

我应该注意到，这对于 Safari/Mobile-Safari 来说是正确的，其他一些实现可能根本没有硬件加速或者对它有更好的支持。
无论属性/转换如何，所有转换都在 Safari 中进行硬件加速（使用 OpenGL）。您可以看到这是因为在某些情况下初始闪烁和不同的字体渲染。此外，如果不使用硬件加速，尤其是在 Mobile Safari 中，过渡不会那么平滑。
实际上有证据表明硬件加速仅用于translate3d 而不是translate，造成这种差异的原因之一是因为在 Safari 中实现 translate 的时间比 translate3d 早得多。跨度>
有些网页提到了这两者之间的性能差异：link、link 搜索translate3d、link。我已经对此进行了测试，并且差异在 iOS 上特别明显，尽管 hw-acceleration 有点错误并且使用更多资源。
谢谢马里奥。这些链接部分已过时（第一个提到 IOS 3.0），尽管毫无疑问我在上面过于简单化了。我认为我们可以有把握地假设，在大多数（webkit）平台中，大多数东西都是硬件加速的，而且它一直在变得更好。