如何优化已编译的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所见规格的一半,那将是很好的选择,但我们不确定从何开始。
我想知道 ...
我不确定是否可以为您的项目提供帮助,但是我最近了解到的一件事是,我们可以通过将图形密集型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] 删除。
我来说两句