Олег Елифантьев

Дано – раз в секунду дергается AJAX’ом скрипт, в нем несколько вызовов одной функции (назовем ее updater) с разными аргументами. Функция в соответствии с аргументами апдейтит некоторый набор DOM-элементов (меняет контент, скрывает, показывает) на текущей странице. Используется jQuery, визэффекты и т.п. Т.е. на клиента приходит примерно такой код…

updater('id1', 10, 20);
updater('id33', 11, 22);
updater('id181', 102, 27);

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

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

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

Пусть ранее было

function updater(rootId, arg2, arg3)
{
  $('#'+rootId+' .some .selector').some().action();
  $('#'+rootId+' .some2 .selector3').some().action();
}

Прегенерируем все «апдейтеры» и вызываем нужный – все результаты «долгих» операции закэшированы, остались только обновления элементов и манипуляции с ними, зависящие от оставшихся аргументов.

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);
}