如何停止导致 Firefox 和 Xorg CPU 使用率高的 CSS 动画？

Posted 2023-03-06

【中文标题】如何停止导致 Firefox 和 Xorg CPU 使用率高的 CSS 动画？

【英文标题】：How can I stop my CSS animation causing high Firefox and Xorg CPU usage?

【发布时间】：2016-04-06 14:11:10

【问题描述】：

http://pepijndevos.nl/ 在 Firefox 上使用大量 CPU，令人惊讶的是 Xorg 也是如此。

基本上没有 JS 进行，当然也没有调整窗口大小或类似的东西。

Tasks: 245 total,   2 running, 243 sleeping,   0 stopped,   0 zombie
%Cpu(s):  8,7 us,  0,5 sy,  0,0 ni, 90,6 id,  0,0 wa,  0,0 hi,  0,2 si,  0,0 st
KiB Mem:   8052196 total,  3121524 used,  4930672 free,   292388 buffers
KiB Swap:  8266748 total,        0 used,  8266748 free.  1258032 cached Mem

  PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND      
 1223 root      20   0  567100 238528  73272 S  37,9  3,0  22:33.44 Xorg         
 5036 pepijn    20   0 2257996 543324  94428 R  31,9  6,7  16:26.62 firefox  

页面上唯一的 JS 是 Google Analytics、MathJax 和这个小点 http://pepijndevos.nl/js/magic.js

我在 Firefox 调试器中进行了性能分析，结果只显示了 Paint and Recalculate Style。

原因似乎是背景图像上的 CSS 动画。当我删除动画时，系统回到空闲状态。违规行是

@keyframes spin  100%  transform:rotate(360deg)  

我只是非常缓慢地旋转它，所以完全没有必要以 60fps 的速度渲染整个物体。有没有办法让它使用更少的CPU？我可能需要恢复到几年前使用的丑陋的 setInterval 解决方案。

（有几个类似的问题，但我觉得这不是重复的，因为我的动画实际上不应该对任何现代 CPU 造成负担，这与其他问题中的几十个带有阴影和其他特殊效果的大型快速动画相反）

【问题讨论】：

这很有趣。一般transform change shouldn't cause a repaint，因此在系统上应该更容易。

您能否跟踪实际以“动画结束”事件结束的动画？？无法在提供的 URL 中重现您的问题，您能否发布一个测试用例以便我们分析您的代码??

【参考方案1】：

我猜问题来自位置：已修复，但我不确定。

节省 CPU 的方法是减少更新频率：

animation: spin 600s steps(3600) infinite;

将使***静止 1/6 秒。 （或者说，每秒刷新6次）

【讨论】：

仍然是 20% 的 CPU，但要好得多。

@Harry 是的，确实 :-(