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>

连续播放五分钟，CPU温度上升至150％。我在OS X Yosemite 10.10上使用Chrome 39（64位）。

缓存选择器并使用Velocity.js序列进行操作无济于事。

我试图在Chrome中使用Timeline Tool找到任何内存泄漏，但是徒劳无功。

为什么这么简单的动画会让我的笔记本电脑燃烧起火？

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毫秒内再次调用您的函数（即使它仍在运行）。

Velocity.js + SVG性能问题

1 个答案: