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

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

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

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

Все это вызывает известное:

enter image description here

Я погуглил и нашел это , this и this .

Очевидно, причина в том, что слишком много операторов сценария выполняются последовательно в течение определенного промежутка времени в IE.

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

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

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

o.html - это ссылка на свойство объектов JSON html , которое получено из здесь .

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

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 и прокрутки к каждой комнате, было ли это спрятано в аккордеоне или нет. Реорганизованная версия (текущая / текущая) применяет ее к самой первой комнате, которая активна в аккордеоне, и когда через аккордеон щелкают по другой, я применяю к ней quickflip и scrollpane.

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

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

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

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

Если кто-нибудь может высказать свое мнение по поводу моих идей по рефакторингу с точки зрения того, какие из них дадут лучшие результаты, это тоже было бы здорово. 12152] ССЫЛКИ:

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

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

РЕДАКТИРОВАТЬ : я установил задержку между итерацией .each , и это все еще очень медленно. Я думаю, что основная причина - это настраиваемая полоса прокрутки. Уф.

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

12
задан Community 23 May 2017 в 12:13
поделиться