Velocity.js + SVG 性能问题答案

【问题标题】：Velocity.js + SVG performance problemsVelocity.js + SVG 性能问题
【发布时间】：2015-01-21 22:41:50
【问题描述】：

我需要创建约 20 个连续闪烁的点。出于性能原因，我选择了 Velocity.js + SVG。对结果很满意（动画运行流畅），我对CPU/GPU过载感到困惑。

这是一个代码 sn-p，为了这个问题而简化了 (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%。我在 OS X Yosemite 10.10 上使用 Chrome 39（64 位）。

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

我尝试在 Chrome 中使用 Timeline Tool 查找任何内存泄漏，但没有成功。

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

【问题讨论】：

标签： performance svg velocity.js

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

【讨论】：