Velocity.js + SVG性能问题

Question

我需要创建20个连续闪烁的点。出于性能原因，我选择了Velocity.js + SVG。对于结果(动画运行顺利)，我对CPU/GPU过载感到困惑。

下面是为这个问题(http://codepen.io/anon/pen/NPjLVq?editors=101)而简化的代码片段：

var i = 0;

setInterval(function()
{
    if( i > 9 ) i = 0;

    var radius = $('#dot' + i).data('r');

    $('#dot' + i)
    .velocity({ opacity: 0.2 }, { duration: 500, queue: false })
    .velocity({ r: 4 * radius }, { duration: 500 })
    .velocity({ r: radius }, { duration: 500 })
    .velocity({ opacity: 1.0 }, { duration: 600 - 15 * radius });
    i++;

}, 500);

SVG对象：

<svg width="700px" height="200px">
    <circle cx="100" cy="100" r="5"  data-r="5"  class="dot" id="dot0"/>
    <circle cx="150" cy="100" r="13" data-r="13" class="dot" id="dot1"/>
    <circle cx="200" cy="100" r="3"  data-r="3"  class="dot" id="dot2"/>
    (...)
</svg>

5分钟的连续播放和CPU温度上升到150%。我在10.10上使用Chrome 39 (64位)。

缓存选择器和使用Velocity.js序列进行操作都没有帮助。

我试图用Chrome中的Timeline工具找到任何内存泄漏，但都是徒劳的。

为什么这么简单的动画会导致我的笔记本电脑着火？

Answer 1

1.方法: SMIL

您可以使用SMIL，而不是以非常快的方式操作SVG/DOM。使用SMIL，您可以定义简单的动画，而无需自己与DOM交互。

动画可以如下所示：

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate 
    xlink:href="#my-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />

(资料来源：http://css-tricks.com/guide-svg-animations-smil/)

我认为这将大大减少CPU负载。

您实际上一直在将DOM设置为新值，这会导致CPU负载。定义一个“真实的”动画将更有效率。

2.方法:不要使用setInterval

使用setInterval也可能导致高负载。因为它将在500 ms内再次调用您的函数(即使它仍在运行)。