Дано — раз в секунду дергается AJAX'ом скрипт, в нем несколько вызовов одной функции (назовем ее updater) с разными аргументами. Функция в соответствии с аргументами апдейтит некоторый набор DOM-элементов (меняет контент, скрывает, показывает) на текущей странице. Используется jQuery, визэффекты и т.п. Т.е. на клиента приходит примерно такой код…
Проблема — после увеличения количества вызываемых функций (увеличилось количество типовых блоков) все жутко тормозит — много времени уходит на jQuery, на выбор DOM-элементов по селекторам.
Требуется по-возможности быстро и безболезненно, не меняя верстку и не отказываясь от jQuery оптимизировать процесс.
Решение — делаем функцию, которая генерирует для каждого типового блока новую функцию-апдейтер используя замыкания. При этом все «долгие» операции ($('.class .class').parent('div') и.т.п.) закэшировать.
Пусть ранее было
Прегенерируем все «апдейтеры» и вызываем нужный — все результаты «долгих» операции закэшированы, остались только обновления элементов и манипуляции с ними, зависящие от оставшихся аргументов.
UPD: Алтернативное решение — кэширование селекторов: habrahabr.ru/blogs/jquery/63145
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