Здесь много неправильного в отношении оптимизации скорости.
Давайте посмотрим на этот код для наведения мыши, который, кажется, замедляется:
this.childNodes.item(1).style.left="0px";
this.getElements('div').setStyles({'opacity':'1'});
this.getElements('div').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('span').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('div').morph({'left':'-28px'});
this.getElements('span').morph({'left':'-30px','color':'#FFF'});
очевидно, что это будет работать так, как работает, но это очень неправильно, я не знаю, с чего начать.
Идея состоит в том, чтобы абстрагировать и настроить повторяющиеся задачи, чтобы они выполнялись как единое целое.
рассмотрим построчно приведенный выше код:
this.childNodes.item(1).style.left="0px";
в любом случае это неправильно для приложения mootools, оно должно быть this.getFirst().setStyle("left", 0);
this.getFirst() - это поиск, его следует кэшировать - хотя это и не медленный.
затем наступает плохая часть.
вы выбираете все дочерние элементы 3 раза и все промежутки дважды, где НЕТ ОТБОРА. ОЧЕНЬ ДОРОГО
вы сбрасываете параметры Fx.morph при каждом событии наведения мыши, когда нет изменений (хотя у вас есть разные длительности для mouseenter и mouseleave - это дорого)
рассмотрите этот код:
[document.id("menu1"), document.id("menu2")].each(function(el) {
// use element storage to save lookups during events
el.store("first", el.getFirst());
el.store("divs", el.getElements("div"));
el.store("spans", el.getElements("span"));
// store the fx.morph options once and for all, no need to do so
// on every event unless you are changing something
el.retrieve("divs").set("morph", {
duration: 'normal',
transition: 'sine:out',
link: 'cancel'
});
el.retrieve("spans").set("morph", {
duration: 'normal',
transition: 'sine:out',
link: 'cancel'
});
// add the events
el.addEvents({
mouseenter: function(e) {
// retrieve the saved selectors from storage and do effects
this.retrieve("first").setStyle("left", 0);
this.retrieve("divs").morph({
"left": -28
});
this.retrieve("spans").morph({
'left': '-30px',
'color': '#FFF'
});
}
});
});
это сэкономит много времени на обработке событий.
аналогично, есть много мест, где вы на самом деле не используете API mootools.
document.getElementById(curr).style.cursor="pointer";
$(this).removeEvents -> нет необходимости в $, это не jquery.
document.getElementById("lightbox").style.visibility="hidden";
m=setTimeout('gallery()',5000); -> использовать mootools var timer = (function() { ... }).delay(5000);, не использовать строки с setTimeout / interval, так как он вызывает eval и reflow, но чисто аноновые функции
и т. Д. И т. Д.
вы действительно можете сделать целый день из рефакторинга всего этого и сделать его "хорошим", но оно того стоит.
также, узнайте о цепочке
$("ribbon").set('morph', {duration:'long',transition: 'bounce:out'});
$("ribbon").morph({'top':'-10px'});
$("ribbon").addEvents({
это вызывает селектор 3 раза. вместо этого вы можете:
- храни это.
var ribbon = $("ribbon"); ribbon.set...
- зацепи это.
$("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - методы элемента mootools возвращают исходный элемент, поэтому вы можете взять ответ последней функции и применить к нему больше.
1 лучше для удобства чтения, 2 быстрее.
также. у вас слишком много глобальных переменных, что делает поиск цепочек областей более дорогим, это повлияет на многие вызовы и места. попробуйте правильно определить пространство имен, если вам нужен доступ к реальным глобальным переменным из функций и замыканий, используйте window.varname и т. д. и т. д.
Еще одним возможным улучшением здесь будет использование делегирования событий (всплывающее окно событий приведет к тому, что события вызовут родительское дерево, у mootools есть API для работы с ним, так что вы можете добавлять отдельные события в родительские элементы и не иметь прикрепить события nnn ко всем детям) - посмотрите.
P.S. пожалуйста, не принимайте это неправильно - это не означает, что вы отбрасываете свою работу, и это просто некий конструктивный (я надеюсь) совет, который может помочь вам вывести ее на следующий уровень. удачи :) 1067 *