Как стать автором
Обновить

Firebug: Part 4 — profiling

Время на прочтение2 мин
Количество просмотров2.9K
Как хороший код поможет избежать отладки в дебаггере, так он же поможет вам никогда не применять навыки, полученные в этой статье.
Если на вашем сайте у вас «умирает» браузер от перегрузки javascript'ом, то вам просто необходимо это прочитать(и применить тоже).

Весь цикл: Console, Commands, Debugging ,Profiling



Сегодня мы напишем немного javascript'а и оптимизируем его, т.к. это и есть наша цель.
Все действо будет происходить на главной хабрахабра.
Начнем с малого, соберем все ссылки на странице:
links = $$('a');


Они и станут объектом нашего издевательства.
Теперь создадим две функции, которые будут добавлять и удалять класс «hidden», который используется на хабре по назначению:
hide = function(el) {el.addClass('hidden');}
show = function(el) {el.removeClass('hidden');}


А теперь напишем функцию, которая будет прятать и показывать все ссылки на странице:
js = function() {
 for(var n=0; n<links.length; n++) {
  hide(links[n]);
  show(links[n]);
 }
}



И запустим профайлер:
console.profile('js');
js();
console.profileEnd();



Немного подождем, и получим результат, на котором видно, что дольше всех в вызванной нами функции выполняются removeClass() и getComputedStyle(). Главной причиной этого 401 вызовов каждой из них.

Теперь попробуем второй способ — вызовем встроенный в mootools $each:
each = function() {
 $each(links, function(link) {
  hide(link);
  show(link);
 })
}



И посмотрим результат:
console.profile('each');
each();
console.profileEnd();



Есть прирост(целых 2ms), но мы так и не избавились от главного «тормоза».

И вспомним, что функции addClass() и removeClass() можно вызвать на массиве элементов:
mass = function() {
 hide(links);
 show(links);
}


console.profile('mass');
mass();
console.profileEnd();




А теперь после всего увиденного мы поняли, что большой разницы нету. И самое время задуматься, нужно ли нам прятать, а затем показывать 401 ссылку?

Статья основана на блоге Michael Sync.

* This source code was highlighted with Source Code Highlighter.

P.S. все же иногда можно обнаружить много глупостей в коде из-за которого он будет медленно выполняться.
Теги:
Хабы:
+23
Комментарии9

Публикации

Изменить настройки темы

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн