Question

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造成负担，这与其他问题中带有阴影和其他特殊效果的数十个快速动画相反） / p>

Answer 1

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

如何节省CPU，可以减少更新频率：

animation: spin 600s steps(3600) infinite;

将使车轮保持静止1/6秒。（或。否则说，每秒刷新6次）

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

1 个答案: