javascript - 在不关闭 H/W 加速的情况下优化 CSS3 动画会使其之后在 GPU 上运行得更快吗?

标签 javascript css webkit css-transitions css-animations

起初这听起来像是一个奇怪的问题 - 但请耐心等待。

我写了一个基于 setTimeout 的基准测试(类似于 stats.js)——我的想法是比较动画在不同条件下的表现(比如添加不同的 CSS3 属性)。对于(简单的)示例,我有一些带有旋转和框阴影动画的东西,然后我将在第二次运行中删除旋转并在第三次运行中删除框阴影。之后我会有 3 个基准数字来比较每个动画的执行情况。

只要动画不是 GPU 加速的(原因很明显,即 H/W 加速会从页面的单进程结构中删除动画),这就可以正常工作。

但这也让我想到了百万美元的问题 - 如果我优化某些东西以在没有 GPU 加速的情况下运行得更好,这是否意味着相同的优化动画在启用 GPU 加速的情况下会运行得更好(更快或内存使用更少) ?还是适用不同的规则?

让我举一个更简单的例子。 CSS3 box-shadow 会降低几乎所有动画的性能。在更简单的情况下,您可以通过用类似阴影的光栅化(PNG?)图像替换 CSS3 box-shadow 来增强性能。但是,在开启 GPU 的情况下,其优势肉眼并不明显,因为两个动画的运行速度几乎相同(因为再次 - 我无法跟踪 GPU 开启时性能的变化)。那么,同样的规则是否适用于 GPU 开启和关闭?

我最初的想法是——一旦某些东西被优化——无论 GPU 打开或关闭,它都运行得更好。但是就像我在下面的评论中提到的(如果我理解错了请纠正我),但是硬件加速元素在 GPU 上缓存为预渲染的光栅纹理。如果那是真的 - 如果我的阴影是 CSS3 框阴影或基于图像的 PNG 阴影,为什么会有什么不同呢?我的意思是这两个元素在 GPU 开启的情况下都会变成光栅化纹理,对吧?所以我的优化对 GPU-on 没有任何意义? (除非内存使用再次出现差异......)

最佳答案

是的,绝对是。看here稍微了解一下 GPU 加速的影响和不影响。但总体思路是,是的,它将保留您的大部分优化。现在,相对而言,给定的优化会在 GPU 卸载后影响性能。这是一个很难回答的问题。

关于javascript - 在不关闭 H/W 加速的情况下优化 CSS3 动画会使其之后在 GPU 上运行得更快吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11690344/

相关文章:

javascript - JQuery 动画将不起作用

javascript - jQuery 顺序执行异步事件

css - <div> 高度 100% 在 Chrome 中不起作用

javascript - 样式被 Material-UI 样式覆盖

Javascript 函数重写原型(prototype)

html - 固定菜单在其下重叠 div

javascript - 什么可以抵消我的表格工作

c# - asp.net CSS 中的母版页

css - 为什么 webkit (Chrome/Safari) 在这个元素上呈现不稳定的焦点?

javascript - null string 和 none 的区别