var myArray = []; var newElement = "test element"; myArray[myArray.length] = newElement;always works faster than
var myArray = new Array(); var newElement = "test element"; myArray.push(newElement);Never call new operator if you can use literal notations for arrays and objects in JavaScript. Never call methods like push() if you can do this in another way. Difference in execution time of the code parts above is significant in loops. The main rule here: "Less operations per iteration - less execution time. Doing nothing is the best from performance point of view". An example of bad programming would be
for(var i=0; i < myArray.length; i++) {
...
}
because length is not cached and myArray.length is executed for each iteration step.Today, I've played a little bit with the new great feature in PrimeFaces jQuery Selector API meets JSF. My aim was to compare $.each(), array's push() and $.attr() calls with native JavaScript calls. I prepared a small test page with a simple selector and the code from PrimeFaces core.js. Alternative I rewritten the code in PrimeFaces with native calls to show the difference. First, I ended up with this code. The main code is here:
var selector = "@(ul li)";
var jqSelector = selector.substring(2, selector.length - 1);
var components = $(jqSelector);
var ids = [];
console.time('Native Loop');
var length = components.length;
for(var i=0; i < length; i++) {
ids[length] = $(components[i]).attr('id');
}
console.timeEnd('Native Loop');
console.time('jQuery Each');
components.each(function() {
ids.push($(this).attr('id'));
});
console.timeEnd('jQuery Each');
My Firefox 11 shown (average time):Native Loop : 28 ms
jQuery Each : 37 ms
IE8 shown:
Native Loop : 249 ms
jQuery Each : 281 ms
After that I deleted $ around components[i] in the for loop and replaced $.attr('id') by native .getAttribute('id') (what I always use in my not jQuery / JSF apps). Changes:
var length = components.length;
for(var i=0; i < length; i++) {
ids[length] = components[i].getAttribute('id');
}
Look this test page please. Now we have in Firefox 11:Native Loop : 3 ms
jQuery Each : 42 ms
and in IE8:
Native Loop : 14 ms
jQuery Each : 274 ms
Perfomance benefit in IE8 (with choosen selector) is 260 ms. Not bad. This trick can give more performance optimization in a huge page. I'm not a game developer and don't develop critical web applications. But a performance optimization is always good for me anyway. Optimization means not only CSS and JavaScript optimization. Loading of images / icons can be optimized as well. Next post(s) will cover more such stuff.
