Медленная анимация 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 мс, ваша анимация с фиксированным числом шагов займет больше времени и будет медленнее.

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

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

Вот статья и код о анимации движения и еще один фрагмент кода , который выполняет анимацию движения.

Также, для простоты, измените это:

document.getElementsByTagName('body')[0]

на это:

document.body

Answer 2

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

Взгляните на этот вопрос , в котором говорится о производительности браузера с интервалом и рассмотрите возможность увеличения интервала времени.