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

Question

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

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

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 和 Recalculate Style。

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

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

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

（有几个类似的问题，但我觉得这不是重复的，因为我的动画实际上不应该对任何现代 CPU 征税，与许多带有阴影和其他特殊的快速动画相反其他问题的影响）

Answer 1

我猜问题出在position: fixed，但我不确定。

你可以做些什么来节省 CPU 就是减少它的更新频率：

animation: spin 600s steps(3600) infinite;

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

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

How can I stop my CSS animation causing high Firefox and Xorg CPU usage?

css

firefox

cpu-usage

css-animations