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

StackOverflow https://stackoverflow.com/questions/459224

Вопрос

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

Визуально это работает прекрасно. Однако во время анимации мой процессор загружается примерно на 50%. Это также не относится к какому-либо отдельному браузеру - то же самое происходит в Safari3 и Firefox3.Если у меня оба браузера запускают страницу, мой процессор работает с нагрузкой около 95%.

Я использую jQuery 1.3.Обе анимации происходят одновременно.На странице нет флэш-памяти.Если я закомментирую код (удалю анимацию) и обновлю страницу, мой процессор немедленно вернется к нормальному использованию.

Я надеюсь, что мне не придется прибегать к Flash, но даже просмотр шоу на Hulu.com не приводит к такому скачку моего процессора.

Мысли?

Это было полезно?

Решение

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

Другие советы

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

По состоянию на jQuery 1.4.3 вы можете установить интервал, который использует jQuery animate непосредственно с помощью jQuery.fx.интервал собственность.Таким образом, вы можете просто сделать что-то вроде:

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();в пользовательской функции.'jQuery.fx.prototype { ...обычай:функция() { ...} ...}'

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

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

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

Я только что наблюдал за производительностью анимации в Scriptaculous и обнаружил похожие всплески процессора:примерно на 50% для IE, немного лучшая производительность (16-30%) для Firefox - оба на двухъядерных ПК.Поскольку и 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);
}
};
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top