Как хороший код поможет избежать отладки в дебаггере, так он же поможет вам никогда не применять навыки, полученные в этой статье.
Если на вашем сайте у вас «умирает» браузер от перегрузки javascript'ом, то вам просто необходимо это прочитать(и применить тоже).
Весь цикл: Console, Commands, Debugging ,Profiling
Сегодня мы напишем немного javascript'а и оптимизируем его, т.к. это и есть наша цель.
Все действо будет происходить на главной хабрахабра.
Начнем с малого, соберем все ссылки на странице:
Они и станут объектом нашего издевательства.
Теперь создадим две функции, которые будут добавлять и удалять класс «hidden», который используется на хабре по назначению:
А теперь напишем функцию, которая будет прятать и показывать все ссылки на странице:
И запустим профайлер:
Немного подождем, и получим результат, на котором видно, что дольше всех в вызванной нами функции выполняются removeClass() и getComputedStyle(). Главной причиной этого 401 вызовов каждой из них.
Теперь попробуем второй способ — вызовем встроенный в mootools $each:
И посмотрим результат:
Есть прирост(целых 2ms), но мы так и не избавились от главного «тормоза».
И вспомним, что функции addClass() и removeClass() можно вызвать на массиве элементов:
А теперь после всего увиденного мы поняли, что большой разницы нету. И самое время задуматься, нужно ли нам прятать, а затем показывать 401 ссылку?
Статья основана на блоге Michael Sync.
* This source code was highlighted with Source Code Highlighter.
P.S. все же иногда можно обнаружить много глупостей в коде из-за которого он будет медленно выполняться.
Если на вашем сайте у вас «умирает» браузер от перегрузки 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. все же иногда можно обнаружить много глупостей в коде из-за которого он будет медленно выполняться.