У меня есть механизм бронирования, который очень медлителен в 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 внутри.
Кажется, он все еще слишком медленный. Кто-нибудь может предложить советы по рефакторингу/оптимизации?
Мои идеи для рефакторинга снова состоят из:
-  вместо .eachon.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.
