像动画这样的 CSS3 属性是否过于 CPU 密集？答案

【问题标题】：Are CSS3 properties like animate too CPU intensive?像动画这样的 CSS3 属性是否过于 CPU 密集？
【发布时间】：2011-12-06 12:45:42
【问题描述】：

这个重复的动画代码会减慢我的系统吗？：

@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}

所有 CSS3 属性都是 CPU 密集型的吗？

谢谢。

【问题讨论】：

如果您滥用它们，它们将占用 CPU 资源。就是这样。
不，不是“所有”属性都是 CPU 密集型的。是什么让您认为 box-shadow 或 box-sizing 会杀死 Pentium？
它们是 :( 例如，动画背景位置在所有浏览器中占用 100% cpu :(
一些基本的垃圾收集 + 检测用户在视口中的位置，从而仅对可见区域进行动画处理，就足够了。请记住，css3 转换只是将属性从起始值到结束值的间隔，在每个循环上递增/递减一个非常小的增量..

标签： css css-transitions hardware-acceleration

【解决方案1】：

每个浏览器都有自己的 CSS3 实现，并且处理和呈现效果的方式各不相同。一种浏览器会阻塞某些事情，而另一种可能不会。你最好还是谨慎一点：不要过度使用 CSS3 效果，一切都会好起来的。如果您真的关心性能，您可以随时尝试使用旧笔记本电脑或其他东西测试该站点。如果它窒息 - 你可能夸大了渐变或其他东西。

正如我的一位程序员同事所说（关于 C++ 应用程序，但它在这里完全适用）：在您真正注意到它们之前不要担心性能问题 :)。

【讨论】：

确实如此。这取决于系统以及您如何使用这些属性。如果我没记错的话，即使在现代系统上，固定的大背景图像也会使滚动变得非常生涩。

【解决方案2】：

避免使用 box-shadow 和 text-shadow。不要尝试为整个页面或 body 元素设置动画并使用 translate3d、scale3d、rotate3d，因为它们在计算机和移动设备上是硬件加速的。如上所述，避免过度使用动画属性。然而，我怀疑一个甚至四个无限动画元素会减慢您的页面速度。

Improving the Performance of your HTML5 App

更新

小心！浏览器现在正在放弃用于 transform-3D 属性的硬件加速。无论是现在还是将来，您都必须使用其他方法来优化您的应用。

【讨论】：

我很好奇。你从哪里得到这些信息的？您能否显示一个参考链接，据说浏览器正在放弃用于 3D 变换渲染的 GPU 加速？无论我在哪里阅读，我看到的都是相反的。
例如，请参阅 this page Chromium 中的 GPU 加速。

【解决方案3】：

我的网页包含大约 15 个元素，看起来像地震一样摇晃。动画以 10% 的增量持续 1 秒。它在无限循环中重复。我注意到处理器使用量猛增。所以我会说是的，但这取决于动画，

【讨论】：

【解决方案4】：

我会在观看动画时检查浏览器的 CPU 使用率。某些功能可能不会减慢系统速度，但其他功能可能会。

确实，某些浏览器可以在某些事情上采取不同的行动。但是，我使用旋转动画进行测试，它在我的 3.5ghz 机器上使用了大约 30-50% 的 CPU 使用率，并使用多个浏览器进行测试。是否设置为无限迭代都无所谓。

截至目前，某些功能可能会降低机器速度并且对用户不友好。在使用它们之前，您可能希望等待这些功能得到优化。我感觉它们的设计效率低下，因为即使在我的 iPod touch 上动画看起来也很流畅。

另外请注意，我的浏览器当时没有运行 GPU 加速，这可能是一个因素。

【讨论】：

【解决方案5】：

如果您在 CSS3 动画中仅使用 3D 变换，例如：

@keyframes animation { 
    0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) }
    50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) }
    100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) }
}

在您指示浏览器播放动画后，CPU 使用率将保持平稳。这是因为 3D 变换总是通过浏览器的 GPU 加速来呈现。（注意：如上设置一个 3D 变换即可启动 GPU 加速）。

以下快照是在运行 Chrome CPU 分析器时拍摄的：

如您所见，在使用一些 javascript 代码指示 CSS3 动画后，CPU 活动是平稳的（在本例中，动画为 2 秒长）。

【讨论】：