WebKit是否使用OpenGL来渲染CSS过渡效果？

Question

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

- wanderingbear

Answer 1

WebKit只是一个前端。它取决于后端和硬件支持。Google Chrome使用skia作为后端，它可以使用软件或硬件。因此，答案取决于后端的实现和运行的硬件。

- masebase

Answer 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变换或对任何其他属性进行动画处理，则不会进行硬件加速。

- Mario Estrada

---

我应该指出，这对Safari/Mobile-Safari是正确的，其他一些实现可能根本没有硬件加速，或者对其有更好的支持。 - Mario Estrada

所有的过渡效果在Safari中都是使用OpenGL进行硬件加速的，无论是哪种属性/变换。你可以通过初始闪烁和某些情况下不同的字体渲染来看到这一点。此外，如果不使用硬件加速，在移动版Safari中，过渡效果可能不会那么流畅。 - jholster

实际上，有证据表明硬件加速仅在使用translate3d时才会被使用，而不是translate。这种差异的原因之一是因为translate比translate3d更早地在Safari中实现。 - Mario Estrada

有一些网页提到了这两者之间性能差异的问题：链接，链接搜索translate3d，链接。我已经测试过了，在iOS上特别明显，尽管硬件加速有点不稳定并且使用更多资源。 - Mario Estrada

谢谢Mario。这些链接有点过时（第一个链接提到了IOS 3.0），尽管毫无疑问我在上面过于简化了。我认为我们可以安全地假设在大多数（webkit）平台上，大部分东西都是硬件加速的，并且它们一直在变得更好。 - jholster

没问题，是的，硬件加速正在缓慢实现，尽管其中一些非常有缺陷或在移动设备上由于资源有限而存在问题。我不得不更改一个 Web 应用程序上的大多数 translate3d 过渡，因为它在 iOS 5 上有视觉故障，一些元素被渲染得很差（像素化）。遗憾的是，关于 HTML 的硬件加速没有精确的文档，并且不清楚它在哪些平台上得到支持。 - Mario Estrada