在Linux上优化WebKit中的动画性能

Question

如何优化已编译的WebKit浏览器以充分利用GPU？

背景

我和我的团队正在配置一个Linux盒子(CentOS)来显示带有流畅的CSS驱动动画的全屏HTML.该盒子具有足够的GPU和CPU能力,能够在Chromium中轻松播放这些动画.

但是,我们尝试使用纯WebKit来渲染这些动画,既可以使用Python中的WebKitGTK +,也可以将WebKit从源代码编译为简单的浏览器.

当前状态

在两个"纯粹的"webkit应用程序中,动画比Chromium慢很多,这让我们抓住了头脑来回答两者之间究竟有什么不同.我们了解Chromium使用Blink,WebKit的一个分支,我们目前认为性能上的差异是由于Chromium,Safari和其他基于WebKit的浏览器都使用自己的图形组件,这些组件与WebKit和Web Core本身分开,基于我们所读到的.

如果我们能够自定义我们的WebKit构建以执行我们在Chromium中看到的一半规格,但我们不确定从哪里开始,那将是很棒的.

我想知道 ......

1. 我们对单独图形组件的假设是否正确？
2. 我们在"纯"WebKit浏览器(例如我们的浏览器)中优化CSS动画性能有哪些选择？

Answer 1

我不确定我是否可以帮助您完成您的项目，但我最近学到的一件事是，我们可以通过将图形密集型 CSS功能卸载到 GPU 来对其进行硬件加速，以便在浏览器中获得更好的渲染性能。

目前，大多数现代浏览器都附带硬件加速功能。当他们看到DOM 将从中受益时，他们就会使用它。一个强有力的指标是 3D 转换。

假设您想将 DOM 放置在绝对位置并将其提升到父容器之上。相反，您实际上可以使用-webkit-transform: translate3d(10px,10px,10px);That 来解析为 3D 渲染，即使我们根本不为元素设置动画。即使您设置零值，它仍然会触发图形加速。

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

现在我们来谈谈CSS的基础知识

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

因此，首先，ID 是最有效的，而通用性则最少。因此，您可以重写 CSS 代码，用ID替换全局代码（当不需要时）。

另一种降低浏览器速度的方法是预先添加全局选择器。(div#my-div) Chrome 在检查模式下实际上默认执行的操作。这将大大减慢您的浏览器速度。

到目前为止，最坏的情况是后代选择器。即使选择器失败（当您的选择器不匹配任何内容时）也比html body div ul li a { }

还有一件事，非常有用且干净，那就是 CSS3 选择器 (:last-child)。即使这些选择器帮助我们并使我们的生活更轻松，它们也会破坏您的浏览器。您可能在小型应用程序上看不到任何性能差异，但是当您在企业应用程序中引入它们时，您会注意到它们会减慢渲染速度。

所以总结一下。我刚刚告诉过您，用 ID 替换所有选择器并通过 ID 在每个元素上应用样式将使您的应用程序变得超级快，但另一方面，这会有点愚蠢。维护起来非常困难，而且不符合语义。因此，您应该考虑用 ID 替换大多数选择器，但不要为了高效的 CSS而牺牲语义/可维护性

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

现在想起来，我应该从 CSS 基础开始。哦，好吧，我希望我对你的项目有一点帮助。干杯