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 和 Recalculate Style。
原因似乎是背景图片上的 CSS 动画。当我删除动画时，系统回到空闲状态。违规行是
@keyframes spin { 100% { transform:rotate(360deg) } }
我只是非常缓慢地旋转它，所以绝对没有必要以 60fps 渲染整个东西。有没有办法让它使用更少的 CPU？我可能需要恢复到多年前使用的丑陋的 setInterval 解决方案。
(有几个类似的问题，但我觉得这不是重复的，因为我的动画实际上不应该对任何现代 CPU 造成负担，这与其他问题中的数十个带有阴影和其他特殊效果的大型快速动画相反)
最佳答案
我猜问题出在 position: fixed 上，但我不确定。
为了节省 CPU，您可以做的是减少它的更新频率:
animation: spin 600s steps(3600) infinite;
将使轮子静止不动 0/6 秒。 (或者说，每秒刷新 6 次)
关于css - 如何停止导致 Firefox 和 Xorg CPU 使用率过高的 CSS 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34566169/