这个重复的动画代码会减慢我的系统吗?:
@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}
所有 CSS3 属性都是 CPU 密集型的吗?
谢谢。
这个重复的动画代码会减慢我的系统吗?:
@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}
所有 CSS3 属性都是 CPU 密集型的吗?
谢谢。
每个浏览器都有自己的 CSS3 实现,并且处理和呈现效果的方式各不相同。一种浏览器会阻塞某些事情,而另一种可能不会。你最好还是谨慎点:不要过度使用 CSS3 效果,一切都会好起来的。如果您真的关心性能,您可以随时尝试使用旧笔记本电脑或其他东西测试该站点。如果它窒息 - 你可能夸大了渐变或其他东西。
正如我的一位程序员同事所说(关于 C++ 应用程序,但它在这里完全适用):在您真正注意到它们之前不要担心性能问题 :)。
避免使用 box-shadow 和 text-shadow。不要尝试为整个页面或 body 元素设置动画并使用 translate3d、scale3d、rotate3d,因为它们在计算机和移动设备上是硬件加速的。如上所述,避免过度使用动画属性。然而,我怀疑一个甚至四个无限动画元素会减慢您的页面速度。
更新
谨防!浏览器现在正在放弃用于 transform-3D 属性的硬件加速。无论是现在还是将来,您都必须使用其他方法来优化您的应用程序。
我有一个网页,其中包含大约 15 个元素,看起来像地震一样摇晃。动画以 10% 的增量持续 1 秒。它在无限循环中重复。我注意到处理器使用量猛增。所以我会说是的,但这取决于动画,
查看动画时,我会检查浏览器的 CPU 使用率。某些功能可能不会减慢系统速度,但其他功能可能会。
确实,某些浏览器可以在某些事情上采取不同的行动。但是,我使用旋转动画进行测试,它在我的 3.5ghz 机器上使用了大约 30-50% 的 CPU 使用率,并使用多个浏览器进行测试。无论是否设置为无限迭代,都没有关系。
截至目前,某些功能可能会减慢机器速度并且对用户不友好。在使用它们之前,您可能希望等待这些功能得到优化。我感觉它们的设计效率低下,因为即使在我的 iPod touch 上动画看起来也很流畅。
另请注意,我的浏览器当时没有运行 GPU 加速,这可能是一个因素。
如果您在 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 秒长)。