Медленная работа с использованием анимации на холсте

Question

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

Иногда это более чем на 70% от загрузки процессора.

Я не знаю, если это анимация или репозиция линий

function animateline() { 
    reqAnimFrame = 
    window.requestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    window.oRequestAnimationFrame; 

    reqAnimFrame(animateline); 

    x += speed; 

    if (x <= 0 || x >= 475) { 
    speed = -speed; 
} 
    reposition(); 
} 

Полный код здесь http://jsfiddle.net/a4cNp/46/

полноэкранной версия страницы ->http://jsfiddle.net/a4cNp/46/show/light/

Спасибо заранее.

Добавлен образ Firefox Profiler. Может быть, полезно найти проблему, но я до сих пор не знаю, как ее решить.

Answer 1

Как говорит @GameAlchemist, положи polyfill раз в верхней части кода, а не внутри вашей анимации. Ваш цикл анимации вызывается много раз в секунду, поэтому минимизируйте объем работы, который должен выполнять цикл.

Одно наблюдение: вы делаете слишком много вариантов jQuery.

Во-первых, кэш-объектов JQuery вы хотите переместить вместе с их размерами:

Сделайте это один раз в верхней части кода:

var $area1=$("#area1"); 
var $area2=$("#area2"); 
var $area3=$("#area3"); 
... 
var area1Width=$area1.width(); 
var area1Height=$area1.height(); 
... 

Затем использовать эти кэшированные значения на вашем often- (например, перепозиция):

function reposition(){ 

    $area2.css("left", area1Width+40); 

    ....