I have found how to speed up jquery by an amazing factor ! (Working in most READ-ONLY situations)
Here is my Class (Speeding up the jquery usage)
//Create new object.
UtilDom = new Object();
//Logging purposes
UtilDom.TAG = "UtilDom.JS: ";
//Cached references
UtilDom.CACHED_REFERENCES = new Object()
/**
* get returns the requested dom element or the one in cache if already known.
* @param jqueryId the jqueryId
*/
UtilDom.get = function(jqueryId) {
var cachedElement = UtilDom.CACHED_REFERENCES[jqueryId];
if (cachedElement) {
return cachedElement;
} else
UtilDom.CACHED_REFERENCES[jqueryId] = $(jqueryId);
return UtilDom.CACHED_REFERENCES[jqueryId];
}
Here my Performance test (started in the first page of the application: lifecycle pageshow)
//TEST JQUERY
var startTime = new Date().getTime();
for (cpt = 0; cpt < 100000; cpt++)
$("img");
console.log('JQUERY TESTS = '+(new Date().getTime()-startTime)+' number of elements = '+$("img").length);
var startTime = new Date().getTime();
//TEST UTILDOM
for (cpt = 0; cpt < 100000; cpt++)
UtilDom.get("img");
console.log('UTILDOM TESTS = '+(new Date().getTime()-startTime)+' number of elements = '+UtilDom.get("img").length);
- JQUERY TESTS = 3099ms number of elements = 40
- UTILDOM TESTS = 3ms number of elements = 40
- JQUERY TESTS = 53ms number of elements = 40
- UTILDOM TESTS = 1ms number of elements = 40
Demonstrated ! It also works faster if starting the search with UtilDom followed by JQuery.
Thibaut de Sany (Mobile Expert)