jQuery animate() и производительность браузера

Я думаю, что способ работы jQuery animate() заключается в том, что он использует таймер, который периодически срабатывает и вызывает функцию, которая обновляет DOM, чтобы отразить состояние анимации. Как правило, анимация относительно короткая и может занимать довольно много места на экране, поэтому я подозреваю (без подтверждения), что таймер истекает и сбрасывается с довольно высокой скоростью для создания плавной анимации. Поскольку ваша анимация занимает много времени, вы можете изменить функцию анимации, чтобы скорость, с которой происходит анимация, можно было установить с помощью параметра. В вашем случае вам нужно будет обновлять только каждые 250 мс или около того, поскольку вы покрываете примерно 3-4 пикселя в секунду.

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

Начиная с jQuery 1.4.3, вы можете установить интервал, который jQuery использует анимация, напрямую через jQuery.fx.interval. Итак, вы можете просто сделать что-то вроде:

jQuery.fx.interval = 50;

Люди упоминали о замедлении частоты обновления jQuery. Вы можете переопределить функцию таймера в jQuery 1.4 с помощью этого файла (jquery.animation-fix.js):

function now() {
    return (new Date).getTime();
}
jQuery.fx.prototype.custom = function( from, to, unit ) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;

    var self = this;
    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) {
        //timerId = setInterval(jQuery.fx.tick, 13);
        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 2050);
    }
}

Так что измените строку с этим в нем

jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);

Измените 50 на любой интервал, который вы хотите. То есть в миллисекундах (мс)

Если вы сохраните этот код в другом файле, вы можете прикрепить его следующим образом:

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.animation-fix.js" type="text/javascript"></script>

jQuery Animate использует функцию javascript setInterval для обновления объектов каждые несколько миллисекунд. К сожалению, интервал в jQuery по умолчанию составляет «13 мс». Это 76 обновлений каждую секунду. Слишком много для таких медленных и средних анимаций.

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

Вы можете изменить параметр для setInterval(); в функции custom. 'jQuery.fx.prototype {... custom: function() {... }...}'

Анимации включают в себя циклические операции, и они действительно будут нагружать процессор, несмотря ни на что.

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

40 секунд? не слишком ли это длинно для анимации? Я думал, что они должны быть немного более непосредственными, чем это.

Я только что наблюдал за производительностью анимации в Scriptaculous и обнаружил схожие всплески ЦП: примерно 50% для IE, чуть более высокую производительность (16-30%) для Firefox — оба на ПК с DuoCore. Поскольку и JQuery, и Scriptaculous работают, изменяя лежащий в их основе CSS, я думаю, можно с уверенностью сказать, что любая реализация Javascript требует больших вычислительных ресурсов.

Вы вполне можете застрять с Flash.

Мне очень нравится ответ, опубликованный Тимом, хотя мне нужно было, чтобы это исправление работало в производственной среде Drupal 6.

У меня установлен jQuery 1.3.2 благодаря использованию модуля обновления jQuery, поэтому есть несколько различий между тем, что я использую, и jQuery 1.4, для которого предназначено исправление Тима.

Следуя инструкциям Тима, я прошел 90% пути, мне просто нужно было на 10 минут подумать, чтобы вместо этого придумать этот код.

Значения таймера 25–33, кажется, работают намного лучше, чем 13 мс, для анимации средней скорости, такой как исчезающие фоновые изображения.

var timerId;

function now() {
    return (new Date).getTime();
}

jQuery.fx.prototype.custom = function( from, to, unit ) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;

    var self = this;
    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

        if ( t() && jQuery.timers.push(t) && !timerId ) {
    timerId = setInterval(function(){
        var timers = jQuery.timers;

        for ( var i = 0; i < timers.length; i++ )
            if ( !timers[i]() )
                timers.splice(i--, 1);

        if ( !timers.length ) {
            clearInterval( timerId );
            timerId = undefined;
        }
    }, 25);
}
};