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

[js-user]

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

Меню открывается при тапе на элемент #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')

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

[jackdempsey2015]

найти

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

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

Вторая ошибка -- использование жеквери. Если нужна максимальная скорость -- забудьте о нем.

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

[js-user]

либо тупость, либо дежурный отмаз кодера, который не может писать код

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

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

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

использование жеквери. Если нужна максимальная скорость -- забудьте о нем.

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

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

[js-user]

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

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

[js-user]

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

[jackdempsey2015]

Но программированием занимаюсь с 1996

вообще не понял

это довольно странно, учитывая то, что это азы

красота, простота и эффективность кода

Это несочетаемые вещи. Например, 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, который снова резольвит переменную. Это, в общем случае намного дороже.

[Deff]

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

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

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

[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 вынес пере функцией.
Или можно ещё больше оптимизировать?

[js-user]

данный стандартный код

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

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

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

[jackdempsey2015]

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