У меня есть система бронирования, которая довольно медлительна в IE7.Это ajaxified и основанное на hash / window onchange.Всего 5 шагов.Основная проблема, с которой я столкнулся, заключается в том, что шаг 2 в IE очень медленный.
Когда пользователь попадает на шаг 2, делается запрос ajax для получения данных с помощью веб-сервисов для отображения гостиничных номеров.Гостиничные номера разделены по основному типу номера и более конкретным типам внутри.Функциональность JS, которая применяется к гостиничным номерам, состоит из:
- аккордеон в номерах
- аккордеон в типах номеров (вложенный аккордеон)
- quickflip наimage
- jscrollpane, пользовательская полоса прокрутки в описании комнаты слева после переворачивания изображения
- jscrollpane, пользовательская полоса прокрутки в типах комнат справа
Всеэто вызывает знаменитое:
Я гуглил и приземлился на это , это и это .
Очевидно, что причина в том, что в 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);
Моя первая версия кода в основном применяла быстрое переключение и полосы прокрутки к каждой комнате, независимо от того, была ли она скрытав аккордеоне или нет.Реорганизованная версия (живая / текущая) применяет ее к самой первой комнате, которая активна в аккордеоне, и, когда по аккордеону нажимают на другую, я применяю к ней быстрое переключение и панель прокрутки.
Я добавилsetTimeout вокруг всего этого, потому что это происходит после внедрения HTML.У меня также есть setTimeout с.
Кажется, что это все еще слишком медленно. Может кто-нибудь предложить какие-либо советы по рефакторингу / оптимизации?
Мои идеи по рефакторингу снова состоят из:
- вместо
.each для .room accordion, примените повторяющуюся операцию, чтобы вызвать задержку в между каждой итерацией, как это ? - , оптимизировать и минимизировать HTML, возвращаемый ajax, еще больше - я уже провел большую оптимизацию, убрал пробел, не отображать комментарии HTML и т. д.
- Включение Gzip
- Выполнение отложенной загрузки изображений, чтобы показывать только видимые изображения содержимого аккордеона, а другие -
blank.gif, пока вы не активируете их черезaccordion - Вместо того, чтобы возвращать HTML и выводить его, возвращать только релевантные данные без HTML и вместо этого строить HTML с помощью механизма шаблонов?!
Если кто-то может высказать свое мнение о моемидеи для рефакторинга, с точки зрения того, какие из них дадут наилучшие результаты, это тоже было бы здорово.
ССЫЛКИ:
- страница воценка это .
- соответствующий JS здесь .
- соответствующий код / номера строк начинаются со строки 829 из
new.js (вот фрагмент, который я вставил) - соответствующий запрос ajax сделан на на этой странице .
PS - не поддерживает IE6
EDIT : я установил задержку между итерациями .each, и она все еще очень медленная.Я думаю, что пользовательская полоса прокрутки является основной причиной.Тьфу.
РЕДАКТИРОВАТЬ # 2 : живой код - это спагетти setTimeouts.Я попытался лениво загрузить панель прокрутки, но она все еще слишком вялая для IE.