Оптимизация: Меню
 

При уменьшении сайта до мобильного экрана большое меню скрывается, а маленькое меню появляется.
Пример

Меню открывается при тапе на элемент #smart.
Написал код:

$('#smart').click(function(){
	var menu=$('#menu');
	menu.slideToggle('fast');
	menu.children('li').removeClass('active').children('ul').hide();
	//найти текущий пункт меню
	var link=menu.find('a[href='+window.location.pathname+']');
	link.addClass('active');
	link.closest('#menu > li').addClass('active').find('ul').show();
});

Сейчас занимаюсь оптимизацией кода. Не то что меню медленно работает, но дело принципа.
Знаю, что медленно работают конструкции:
- find('a[href=*]')
- closest('#menu > li')

Можно ли как-то оптимизировать код?

Самая первая ваша ошибка (если важна скорость), это то, что вы создаете функцию, которая каждый раз парсит дом. Все эементы, которые можно связать статически (которые не интерактивны, не меняются в рантайме) --- свяжите
Вторая ошибка -- использование жеквери. Если нужна максимальная скорость -- забудьте о нем.

В целом, оптимизация "из принципа" -- это обычно либо тупость, либо дежурный отмаз кодера, который не может писать код. Это простительно, только если делается в качестве упражнения. Оптимизируются только узкие места, и только после того, как реализован рабочий прототип программы.

Я открыл для себя JQuery не ранее, как месяц назад. Честно. Но программированием занимаюсь с 1996 года, HTML+CSS - с 2001 года. С JavaScript и JQuery дела не имел.
Для меня очень важна красота, простота и эффективность кода. Поэтому и сейчас, при освоении нового для себя языка программирования, я следую своим принципам. Считайте, что я учусь на реальном примере. Потому и прошу помощи.

Простите, но вообще не понял. Можно подробнее? Или укажите, куда копать.

Пока не могу. Он достаточно прост. Проще, чем JavaScript. Хотя в процессе знания по JS приходят.

Поэтому, если есть желание и возможность, помогите оптимизировать код из первого сообщения.

Давайте я постараюсь понять сам.
Вы считаете неправильным, что функция парсит ДОМ при каждом клике? Мне кажется это правильным, потому что при открытии меню я программно подсвечиваю активный пункт меню.

Объясню. Прочитал статью и захотелось оптимизировать код.

это довольно странно, учитывая то, что это азыЭто несочетаемые вещи. Например, Iо, Smalltalk, не могут быть в общем случае эффективными, в смысле перформанса, именно потому, что они фантастически красивы и выразительны. Тут что-то одно, либо вы пишете код за машину, либо она это делает за Вас. Стремиться надо найти баланс, который всегда есть компромисс.
разница между

el=getElement("someQuery")
fu=function(){doStaffWith(el)}

и

fu=function(){
 var el=getElement("someQuery")
 doStaffWith(el)
}

во времени поиска. В первом коде при вызове getElement("someQuery"), парсится документ, через какое-то время находится элемент, он возвращается и присваивается переменной. С этого момента, переменная указывает на этот элемент, его искать больше не нужно. При вызове ф-ции fu, интерпретатор ищет переменную, сначала в локальном скопе, затем в глобале. В данном случае, он находит ее за два шага, очень быстро, и сразу получает ссылку на нужный элемент
Во втором варианте, при вызове функци каждый раз выполняется var el=getElement("someQuery"), то есть, кадый раз заново парситься документ, находится элемент, присваивается переменной, и лишь затем отрабатывает doStaff, который снова резольвит переменную. Это, в общем случае намного дороже.

js-user,
В принципе данный стандартный код, проверенный на сотнях сайтов, для нового нужна новая идея, проверенная и востребованная юзерами. "Усовершенствование" хорошего рабочего код, как правило приводит к тем граблям, через которые старый код уже прошел.

Переделывать круглые колёса в квадратные, без запросов реальности - нонсенс. Любой, даже короткий код проходит минимум два этапа - месяц полтора - отладки и год правки траблов по совместимости с иными скриптами и кодами.

Есть еще жуткое раздражение по техподдержке дублирующих кодов равного функционала

Ну, это очевидно!
Поэтому я сам уже сделал так:

var menu=$('#menu');
$('#smart').click(function(){
	menu.slideToggle('fast');
	menu.children('li').removeClass('active').children('ul').hide();
	//найти текущий пункт меню
	var link=menu.find("a[href='"+window.location.pathname+"']");
	link.addClass('active');
	link.closest('#menu > li').addClass('active').find('ul').show();
});

То есть menu вынес пере функцией.
Или можно ещё больше оптимизировать?

Меня сейчас вот этот кусочек беспокоит:

link.closest('#menu > li').addClass('active').find('ul').show();

Link - это объект <a>.
Нужно найти его родителя <li>, но не первого снизу, а первого сверху, от #menu. Мне кажется, что у меня это плохо получилось.

js-user,
Мне неохота копаться в Вашем коде, я Вам направление подсказал. Линкуйте неизменяющиеся элементы , кэшируйте вызова, выкиньте жеквери, и самое главное, продумывайте архитектуру. В некоторых случаях может помочь асинхронность. Кроме того, сейчас в JS появились web-веркеры, есть возможность распараллелить вычисления. Копайте в этих направлениях.