Медленная анимация JavaScript в Chrome

Question

У меня проблема с манипулированием стилем HTML-объекта в Chrome.

Вот пример:

var a = document.createElement('div'); 

a.style.position = 'absolute'; 
a.style.display = 'block'; 
a.style.top = '300px'; 
a.style.left = '50px'; 
a.style.height = '100px'; 
a.style.width = '10px'; 
a.style.backgroundColor = '#000000'; 
a.style.zIndex = '200'; 

a.aW = 10; 

var a2 = document.createElement('div'); 

a2.style.position = 'absolute'; 
a2.style.display = 'block'; 
a2.style.top = '200px'; 
a2.style.left = '50px'; 
a2.style.height = '100px'; 
a2.style.width = '10px'; 
a2.style.backgroundColor = '#000000'; 
a2.style.zIndex = '200'; 
a2.id = 'a'; 

a2.aW = 10; 

document.getElementsByTagName('body')[0].appendChild(a); 
document.getElementsByTagName('body')[0].appendChild(a2); 

var b = window.setInterval(function() { 
    a.aW += 10; 
    if (a.aW > 1600) { 
     window.clearInterval(b); 
    } 
    a.style.width = a.aW + 'px'; 
}, 13); 

$('#a').animate({ 
    width: '1600' 
}, 2000, 'linear'); 

Объект, который оживляется через setInterval функция иногда работает медленно, если она выполняется на обычном сайте. Странно, что объект, анимированный jQuery, работает плавно oO.

(Извините за мой плохой английский).

Answer 1

Прежде всего, интервальные таймеры не гарантируются для запуска точно в то время, когда вы их установили, особенно если время очень короткое. Во многих браузерах допустимо минимальное значение времени для setInterval(). Итак, если это минимальное время больше 13 мс, или если многие из интервальных вызовов приходят дольше 13 мс, ваша анимация с фиксированным числом шагов займет больше времени и будет медленнее.

Во-вторых, любая надежная анимация должна использовать алгоритм tweening, где он вычисляет шаги, которые он хочет использовать, а затем на каждом шаге он повторно оценивает (путем сравнения системного времени с ожидаемым системным временем для этого номера шага) независимо от того, отстает ли он от графика или досрочно и соответственно скорректирует размер будущего шага, чтобы он завершился вовремя и, по-видимому, пошел на соответствующую скорость. Это то, что делает анимация jQuery. Вот что ваша анимация setInterval() не делает.

Вот reference article на самонастраивающихся таймерах для анимаций, которые обеспечивают прогнозируемое количество времени и another article в минимальное время для таймеров.

Вот an article and code on tweening и еще piece of code, который делает tweening.

Кроме того, для простоты, пожалуйста, изменить:

document.getElementsByTagName('body')[0] 

к этому:

document.body 

Answer 2

Ваш таймер будет выполнять много много раз в секунду. Я бы предположил, что это слишком быстро, что может привести к задержке браузера. Я полагаю, что интервал функции анимации jQuery составляет 50 мс.

Посмотрите на this question, в котором рассказывается об эффективности работы с интервалом браузера и рассмотрим возможность увеличения интервала времени.