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

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

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

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

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

Я 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.

Ответы

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

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

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