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

Question

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

我写了一个基于 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 没有任何意义？ (除非内存使用再次出现差异......)

Answer 1

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