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

亚当·格兰特(Adam Grant):

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

背景

我和我的团队正在配置Linux框(CentOS),以显示具有CSS驱动的平滑动画的全屏HTML。该盒子具有足够的GPU和CPU能力,并且能够在Chromium中轻松播放这些动画。

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

当前状态

在这两种“纯”的WebKit应用,动画是大大慢于铬,它使我们抓抓头怎么回答究竟是两个不同的。我们了解Chromium使用的是WebKit的分支Blink,并且我们目前认为性能上的差异是由于Chromium,Safari和其他基于WebKit的浏览器各自使用了自己的图形组件,这些组件与WebKit和Web Core本身是分开的,根据我们已阅读的内容。

如果我们可以自定义WebKit构建,使其性能甚至达到Chromium所见规格的一半,那将是很好的选择,但我们不确定从何开始。

我想知道 ...

  1. 我们对单独的图形组件的假设正确吗?
  2. 在“纯” WebKit浏览器(例如我们的浏览器)中,有哪些选项可以优化CSS动画性能?
詹尼斯·法鲁普洛斯(Giannis Faropoulos):

我不确定是否可以为您的项目提供帮助,但是我最近了解到的一件事是,我们可以通过将图形密集型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基础开始。哦,我希望我对您的项目有帮助。干杯

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章