анимационный jQuery () и производительность браузера

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

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

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

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

можно застрять, идя с Flash.

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

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

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

Люди упоминали о замедлении частоты обновления 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>

Мне очень нравится ответ, отправленный Тимом, хотя мне нужно, чтобы это исправление работало в производственной среде 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);
}
};