Проблемы с производительностью 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> 

Пять минут непрерывной игры и температура процессора поднимается до 150 %. Я использую Chrome 39 (64-разрядный) для OS X Yosemite 10.10.

Кэширующие селектора и манипуляции с последовательностями Velocity.js не помогли.

Я попытался найти утечку памяти с помощью инструмента Timeline Tool в Chrome, но напрасно.

Почему такая простая анимация заставляет мой ноутбук гореть в огне?

Answer 1

1. Подход: SMIL

Вместо того, чтобы манипулировать SVG/DOM в очень быстрый способ, вы могли бы использовать SMIL. С 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/)

Я думаю, что это позволит значительно снизить нагрузку на центральный процессор.

Вы фактически устанавливаете DOM на новые значения все время, которые вызывают загрузку процессора. Определение «реальной» анимации будет намного более эффективным.

2. Подход: Не использовать setInterval

Также возможно, что вы вызывая высокую нагрузку с помощью setInterval. Поскольку он снова вызовет вашу функцию за 500 мс (даже если она все еще работает).