Подтвердить что ты не робот

Что я могу сделать для оптимизации моего приложения ajax для IE7/IE8, чтобы избежать "Прекратить выполнение этого script"?

У меня есть механизм бронирования, который очень медлителен в IE7. Это ajaxified и hash/window onchange. Всего 5 шагов. Основная проблема, с которой я столкнулась, - это шаг 2 - медленный IE в IE.

Когда пользователь приземляется на шаге 2, выполняется запрос ajax, чтобы извлекать данные с помощью веб-сервисов, чтобы отображать гостиничные номера. Номера отеля делятся по типу главной комнаты и более конкретным типам внутри. Функциональность JS, применяемая к гостиничным номерам, состоит из:

  • аккордеон в номерах
  • аккордеон на типы комнат (вложенный аккордеон)
  • quickflip на изображении
  • jscrollpane, пользовательская полоса прокрутки в описании комнаты слева после того, как изображение переворачивается.
  • jscrollpane, пользовательская полоса прокрутки по типам комнат справа.

Все это заставляет знаменитых:

enter image description here

Я googled и приземлился на this, this и this.

Таким образом, очевидно, причина в том, что в IE слишком много операторов script, выполняемых последовательно в течение определенного периода времени.

Мне в основном нужно реорганизовать мой код и оптимизировать его таким образом, чтобы между вызовами функций были задержки.

Способ ввода HTML после выполнения запроса ajax:

 734                     $( o.html ).appendTo( el )

o.html является ссылкой на свойство объектов html объектов JSON, которое выводится из здесь.

Затем выполняется следующий код:

setTimeout(function () {


    $('#roomz .room-accordion').each(function () {

        $(this).accordion({
            header: 'h2.new-heading',
            autoheight: false,
            clearStyle: true,
            collapsible: true,
            change: function (event, ui) {
                window.ui = ui;

                // if it hasnt been quickflipped/subnest accordioned, do it
                if (!$(ui.newContent).data('enabled')) {
                    $('.room-rates', ui.newContent).each(function () {

                        $(this).accordion({
                            header: 'h4.rate-name',
                            autoheight: false,
                            active: 0,
                            clearStyle: true
                        });

                        //if (!$.browser.msie) 
                           $(this).jScrollPane();

                    })

                    $('.room-image', ui.newContent).quickFlip({
                        vvertical: true
                        //easing:'easeInBounce'
                        //easing:'easeInSine'
                    });

                    $('.back-copy-inner', ui.newContent).jScrollPane({
                        verticalDragMaxHeight: 131
                    });

                    $(ui.newContent).data('enabled', true);
                }
            }
        })

        var el = this;
        setTimeout(function () {
            $('.back-copy-inner:eq(0)', el).jScrollPane({
                verticalDragMaxHeight: 131
            });
        }, 500);

        $('.room-rates:eq(0)', this).each(function () {

            $(this).accordion({
                header: 'h4.rate-name',
                autoheight: false,
                active: 0,
                clearStyle: true
            });

            var el = this;
            setTimeout(function () {
                //if (!$.browser.msie) 
                $(el).jScrollPane();
            }, 50);

        });

        $('.room-image:eq(0)', this).quickFlip({
            vvertical: true
            //easing:'easeInBounce'
            //easing:'easeInSine'
        });

        $('.room:eq(0)', this).data('enabled', true);

    });



}, 20);

Моя первая версия кода в основном применяла quickflip и scrollpanes к каждой комнате, независимо от того, была ли она скрыта на аккордеоне или нет. Рефакторизованная версия (live/current one) применяет ее к самой первой комнате, которая активна в аккордеоне, а когда другой нажат на аккордеон, я применяю к ней quickflip и scrollpane.

Я добавил setTimeout вокруг всего, потому что это происходит после того, как HTML будет введен. У меня есть setTimeout внутри.

Кажется, он все еще слишком медленный. Кто-нибудь может предложить советы по рефакторингу/оптимизации?

Мои идеи для рефакторинга снова состоят из:

  • вместо .each on .room accordion применить повторяющуюся операцию, чтобы задержать задержку в между каждой итерацией, подобной этой?
  • оптимизировать и минимизировать HTML, возвращаемый ajax, даже больше - я уже сделал много оптимизации, убил пробелы, не показывал комментарии HTML и т.д.
  • Включение Gzip
  • Выполняя ленивую загрузку изображений, чтобы показать только видимые изображения содержимого аккордеона, а другие - blank.gif, пока вы не активируете их через аккордеон
  • Вместо того, чтобы возвращать HTML и сбрасывать его, возвращать только соответствующие данные без NO HTML и вместо этого строить HTML с помощью механизма шаблонов?!

Если кто-то может высказать мнения о моих идеях для рефакторинга, с точки зрения которых они будут давать наилучшие результаты, это тоже будет здорово.

LINKS:

  • рассматриваемая страница this.
  • соответствующий JS здесь.
  • соответствующие номера кода/строк начинаются с строки 829 new.js (это фрагмент, который я вставлял)
  • соответствующий запрос ajax, сделанный, сделан эта страница.

PS - не поддерживает IE6

EDIT. Я положил задержку между итерацией .each, и она все еще медленнее. Я думаю, что обычная полоса прокрутки является главной причиной. Тьфу.

РЕДАКТИРОВАТЬ № 2: живой код является спагетти setTimeouts. Я попытался лениво загрузить панель прокрутки, но она все еще слишком вялая для IE.

4b9b3361

Ответ 1

Чтобы сделать IE script слишком медленным, вам нужно использовать больше setTimeout. Проблема заключается в ударе 5 миллионов javascript команд. setTimeout сбрасывает этот счетчик.

Замена гармонических звонков

$(this).accordion({
    ...
});

С

var that = this;
setTimeout(function() {
    $(that).accordion({ ... });
}, 0);

Исправить проблему. Это не ускорит код, но он просто сделает script слишком медленным.

Что касается реальной оптимизации, то есть две вещи obvouis.

Вместо $('.room:eq(0)')

Используйте $(".room").eq(0)

Edit

.each(function() {
    setTimeout(function() {
        ...
    }, 0);
}

Ответ 2

Я не пошел и сам пробовал это в вашем случае, но в своем опыте с этими вещами здесь, в каком порядке я бы рассмотрел ваши рефакторинги.

Поскольку эта ошибка связана с выполнением JS в течение 10 секунд подряд или больше, я бы сосредоточился на этом, а не на оптимизации загрузки HTML или GZip или даже на загрузке изображения. IMO ваша проблема - это все исполнение JS, устанавливающее аккордеоны и, возможно, несколько дорогие селектора. Я не думаю, потому что вы загружаете 31k JSON. Это обработка всего того, что вас убило.

Отсрочка каждой итерации $('#roomz .room-accordion').each(function() {...} на 100 мс или около того - это то, что я бы сфокусировал на первом, так что # 1.

Вы также можете подумать об изменении всех частей ": eq (0)" ваших селекторов на ": сначала", если нет разумной причины, по которой я не понимаю, использовать этот точный селектор.

Надеюсь, что это поможет, хотя у меня нет точных настроек кода, которые вы должны применить.