Sobald das DOM etwas umfangreicher ist, sollten so viele jQuery-Objekte wie möglich gecached werden. Da sonst Performance-Problemen im JavaScript-Code auftreten können. Der nachfolgende Code zeigt, wie ein einfacher Caching-Mechanismus für jQuery umgesetzt werden kann.
Code:
var oCache = {};
function $$(sSelector)
{
if(!oCache.hasOwnProperty(sSelector))
oCache[sSelector] = $(sSelector);
return oCache[sSelector];
};
function $$(sSelector)
{
if(!oCache.hasOwnProperty(sSelector))
oCache[sSelector] = $(sSelector);
return oCache[sSelector];
};
Beispiel:
$$('.myclass').text("Blaaaa"); //jQuery-Objekt ('.myclass') in Cache ablegen
$$('.myclass').text("Bluuuuub"); //jQuery-Objekt ('.myclass') aus Cache verwenden
$$('.myclass').text("Bluuuuub"); //jQuery-Objekt ('.myclass') aus Cache verwenden
Benchmark:
Der Benchmark zeigt, dass die Verwendung des Caches einen deutlichen Performance-Gewinn bringt.
//without_cache: 430.7ms
console.time('without_cache');
for(var i = 0; i < 10000; i++)
{
$('.test').text("Blaaaa");
}
console.timeEnd('without_cache');
//with_cache: 241.55ms
console.time('with_cache');
for(var i = 0; i < 10000; i++)
{
$$('.test').text("Blaaaa");
}
console.timeEnd('with_cache');
console.time('without_cache');
for(var i = 0; i < 10000; i++)
{
$('.test').text("Blaaaa");
}
console.timeEnd('without_cache');
//with_cache: 241.55ms
console.time('with_cache');
for(var i = 0; i < 10000; i++)
{
$$('.test').text("Blaaaa");
}
console.timeEnd('with_cache');