У меня есть механизм бронирования, который очень медлителен в 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.