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

Оптимизация с помощью замыканий

Время на прочтение2 мин
Количество просмотров1.6K
Дано — раз в секунду дергается AJAX'ом скрипт, в нем несколько вызовов одной функции (назовем ее updater) с разными аргументами. Функция в соответствии с аргументами апдейтит некоторый набор DOM-элементов (меняет контент, скрывает, показывает) на текущей странице. Используется jQuery, визэффекты и т.п. Т.е. на клиента приходит примерно такой код…
updater('id1', 10, 20);
updater('id33', 11, 22);
updater('id181', 102, 27);


* This source code was highlighted with Source Code Highlighter.

Проблема — после увеличения количества вызываемых функций (увеличилось количество типовых блоков) все жутко тормозит — много времени уходит на jQuery, на выбор DOM-элементов по селекторам.

Требуется по-возможности быстро и безболезненно, не меняя верстку и не отказываясь от jQuery оптимизировать процесс.

Решение — делаем функцию, которая генерирует для каждого типового блока новую функцию-апдейтер используя замыкания. При этом все «долгие» операции ($('.class .class').parent('div') и.т.п.) закэшировать.

Пусть ранее было
function updater(rootId, arg2, arg3)
{
 $('#'+rootId+' .some .selector').some().action();
 $('#'+rootId+' .some2 .selector3').some().action();
}


* This source code was highlighted with Source Code Highlighter.

Прегенерируем все «апдейтеры» и вызываем нужный — все результаты «долгих» операции закэшированы, остались только обновления элементов и манипуляции с ними, зависящие от оставшихся аргументов.
function makeUpdater(rootId) { 
if($('#'+rootId).length>0) 
{  
 var someVar = $('#'+rootId+' .some .selector');
 var someVar2 = $('#'+rootId+' .some2 .selector3');
 return function(arg2, arg3) {
  someVar.some().action();
  someVar2.some().action();
  // do smth else... 
 } 
}
else
 return function(arg2, arg3) {}
}

var updaters = new Array();
var idx = 0;
$('div.rootElement').each(function() {
 updaters[idx++] = makeUpdater($(this).attr('id'));
}); 

function updater(rootId, arg2, arg3) { 
 updaterFnc = // По rootId получаем ранее сформированный апдейтер из updaters
 updaterFnc(arg2, arg3);
}


* This source code was highlighted with Source Code Highlighter.


UPD: Алтернативное решение — кэширование селекторов: habrahabr.ru/blogs/jquery/63145
Теги:
Хабы:
+3
Комментарии10

Публикации

Истории

Работа

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