基于Linux的WebKit动画性能优化

Question

如何优化编译后的WebKit浏览器以最大限度地利用GPU？

背景

我和我的团队正在配置一个Linux盒(CentOS)，以显示带有流畅的CSS驱动动画的全屏幕HTML。该盒有超过足够的GPU和CPU的能力，并能够轻松地播放这些动画在铬。

但是，我们试图使用纯WebKit来呈现这些动画，方法是在Python中使用WebKitGTK+，并从源代码将WebKit编译成简单的浏览器。

当前状态

在这两个“纯”的webkit应用程序中，动画的速度比Chromium慢得多，这让我们绞尽脑汁来回答两者之间到底有什么不同。我们理解Chromium，这是WebKit的一个分支，我们目前认为性能上的差异是因为Chromium、Safari和其他基于WebKit的浏览器都使用自己的图形组件，这些组件独立于WebKit和Web本身，根据我们所读到的内容。

如果我们能够定制我们的WebKit构建来执行我们在Chromium中看到的一半的规格，那就太棒了，但是我们不知道从哪里开始。

我在想..。

1. 我们关于独立图形组件的假设正确吗？
2. 在像我们这样的“纯”WebKit浏览器中，我们有什么选择来优化CSS动画性能？

Answer 1

我不确定我是否可以帮助您的项目，但我最近学到的一件事是，我们可以硬件-加速图形密集的CSS功能，卸载到图形处理器，以更好的渲染性能在浏览器。

现在，大多数现代浏览器都是随着硬件加速而来的。当他们看到看到DOM将从中受益时，他们将使用它。一个强有力的指标是三维转换。

让我们说，您希望将DOM放置为绝对位置，并将其提升到父容器的上方。相反，您可以使用-webkit-transform: translate3d(10px,10px,10px);来解析为3D渲染，即使我们根本没有动画元素。即使设置了零值，它仍然会触发图形加速。

提示如果您看到任何闪烁，然后尝试添加-webkit-backface-visibility: hidden;和-webkit-perspective: 1000;

现在让我们来讨论CSS的基础知识。

您应该知道浏览器读取CSS选择器的方式最重要的一点是，它们从从右到左读取它们。意味着在选择器ul > li img[alt="test.png"]中，首先解释的是img[alt="test.png"]。第一部分也称为“键选择器”。

因此，首先，ID是最有效的，使普遍性最小。这样您就可以用ID替换全局代码(当不需要的时候)。

另一种减缓浏览器速度的方法是预先添加全局选择器。(div#my)在默认情况下Chrome在检查模式下所做的事情。，这将大大降低浏览器的速度。

到目前为止，最糟糕的情况是后代选择器。即使选择器失败(当选择器与任何选项不匹配时)也比html body div ul li a { }好

还有一件事，这是非常有用和干净的是CSS3选择器(：最后一个子)。即使这些选择器帮助我们，使我们的生活更轻松，他们也会撕毁你的浏览器。在小型应用程序中，您可能看不到性能上的任何差异，但是当您在Enterprise应用程序中引入它们时，您会注意到它们正在减慢您的呈现速度。

所以总结一下。我刚刚告诉过你，用ID替换你所有的选择器，然后用ID在每个元素上应用样式会让你的应用程序变得非常快，但另一方面，这会有点傻。这将是极其难以维护的，也是非语义的。因此，您应该考虑用ID替换大多数选择器，但不要牺牲语义/可维护性来换取高效的CSS。

此外，您还可以检查一个有趣的测试这里。

现在我想到了它，我应该从CSS基础开始。哦，好吧，我希望我在你的项目上帮了你一点。干杯

Answer 2

根据[经]文章 CSS动画，转换和转换不会自动加速，而是从浏览器的较慢的软件呈现引擎执行。那么究竟是什么迫使浏览器切换到GPU模式呢？许多浏览器通过某些CSS规则提供GPU加速。

示例：

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}