Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2015, 11:48
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

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

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

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

Последний раз редактировалось js-user, 14.07.2015 в 11:51.
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2015, 12:23
Аспирант
Отправить личное сообщение для jackdempsey2015 Посмотреть профиль Найти все сообщения от jackdempsey2015
 
Регистрация: 23.06.2015
Сообщений: 53

Сообщение от js-user
найти
Самая первая ваша ошибка (если важна скорость), это то, что вы создаете функцию, которая каждый раз парсит дом. Все эементы, которые можно связать статически (которые не интерактивны, не меняются в рантайме) --- свяжите
Код:
el=getElement("someQuery")
fu=function(){doStaffWith(el)}
Вторая ошибка -- использование жеквери. Если нужна максимальная скорость -- забудьте о нем.

В целом, оптимизация "из принципа" -- это обычно либо тупость, либо дежурный отмаз кодера, который не может писать код. Это простительно, только если делается в качестве упражнения. Оптимизируются только узкие места, и только после того, как реализован рабочий прототип программы.
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2015, 14:01
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

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

Сообщение от jackdempsey2015
Самая первая ваша ошибка (если важна скорость), это то, что вы создаете функцию, которая каждый раз парсит дом. Все эементы, которые можно связать статически (которые не интерактивны, не меняются в рантайме) --- свяжите
el=getElement("someQuery")
fu=function(){doStaffWith(el)}
Простите, но вообще не понял. Можно подробнее? Или укажите, куда копать.

Сообщение от jackdempsey2015
использование жеквери. Если нужна максимальная скорость -- забудьте о нем.
Пока не могу. Он достаточно прост. Проще, чем JavaScript. Хотя в процессе знания по JS приходят.

Поэтому, если есть желание и возможность, помогите оптимизировать код из первого сообщения.
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2015, 14:15
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

Сообщение от jackdempsey2015
Самая первая ваша ошибка (если важна скорость), это то, что вы создаете функцию, которая каждый раз парсит дом. Все эементы, которые можно связать статически (которые не интерактивны, не меняются в рантайме) --- свяжите
el=getElement("someQuery")
fu=function(){doStaffWith(el)}
Давайте я постараюсь понять сам.
Вы считаете неправильным, что функция парсит ДОМ при каждом клике? Мне кажется это правильным, потому что при открытии меню я программно подсвечиваю активный пункт меню.
Ответить с цитированием
  #5 (permalink)  
Старый 14.07.2015, 14:19
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

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

Последний раз редактировалось js-user, 14.07.2015 в 14:22.
Ответить с цитированием
  #6 (permalink)  
Старый 14.07.2015, 14:35
Аспирант
Отправить личное сообщение для jackdempsey2015 Посмотреть профиль Найти все сообщения от jackdempsey2015
 
Регистрация: 23.06.2015
Сообщений: 53

Сообщение от js-user
Но программированием занимаюсь с 1996
Сообщение от js-user
вообще не понял
это довольно странно, учитывая то, что это азы
Сообщение от js-user
красота, простота и эффективность кода
Это несочетаемые вещи. Например, Iо, Smalltalk, не могут быть в общем случае эффективными, в смысле перформанса, именно потому, что они фантастически красивы и выразительны. Тут что-то одно, либо вы пишете код за машину, либо она это делает за Вас. Стремиться надо найти баланс, который всегда есть компромисс.
Сообщение от js-user
Можно подробнее?
разница между
el=getElement("someQuery")
fu=function(){doStaffWith(el)}

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

во времени поиска. В первом коде при вызове getElement("someQuery"), парсится документ, через какое-то время находится элемент, он возвращается и присваивается переменной. С этого момента, переменная указывает на этот элемент, его искать больше не нужно. При вызове ф-ции fu, интерпретатор ищет переменную, сначала в локальном скопе, затем в глобале. В данном случае, он находит ее за два шага, очень быстро, и сразу получает ссылку на нужный элемент
Во втором варианте, при вызове функци каждый раз выполняется var el=getElement("someQuery"), то есть, кадый раз заново парситься документ, находится элемент, присваивается переменной, и лишь затем отрабатывает doStaff, который снова резольвит переменную. Это, в общем случае намного дороже.
Ответить с цитированием
  #7 (permalink)  
Старый 14.07.2015, 14:36
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

Есть еще жуткое раздражение по техподдержке дублирующих кодов равного функционала
Ответить с цитированием
  #8 (permalink)  
Старый 14.07.2015, 14:44
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

Сообщение от jackdempsey2015
разница между {} и {} - во времени поиска
Ну, это очевидно!
Поэтому я сам уже сделал так:
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 вынес пере функцией.
Или можно ещё больше оптимизировать?
Ответить с цитированием
  #9 (permalink)  
Старый 14.07.2015, 14:51
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

Сообщение от Deff
данный стандартный код
Меня сейчас вот этот кусочек беспокоит:
link.closest('#menu > li').addClass('active').find('ul').show();

Link - это объект <a>.
Нужно найти его родителя <li>, но не первого снизу, а первого сверху, от #menu. Мне кажется, что у меня это плохо получилось.
Ответить с цитированием
  #10 (permalink)  
Старый 14.07.2015, 14:51
Аспирант
Отправить личное сообщение для jackdempsey2015 Посмотреть профиль Найти все сообщения от jackdempsey2015
 
Регистрация: 23.06.2015
Сообщений: 53

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Текуший пункт меню и разные родители Kiano Элементы интерфейса 17 08.01.2015 07:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Оптимизация кода (создание горизонтального меню) IONEX jQuery 0 16.01.2012 05:07
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36