Its been quite a while since i write anything about jQuery. Furthermore, i have been writing many different optimization articles and jQuery is something that i have not write for quite sometime. Since many uses jQuery quite intensively in either design or application, why don't i give some tips on jQuery too. I think it will be beneficial that such optimization tips can be share and utilize in future application. Therefore, in this article you will see 8 jQuery optimization tips and tricks that might just benefit you during your jQuery coding.
1. Profiling
Once of the most important thing in every optimization, profiling. We can easily perform profiling using firebug. Everyone who is a developer or even designer should be well aware of firebug that could help assist in this task. Profiling allow us to see exactly how many times each function has run and how long does it take. With the help of profiling you will be able to see which function is the bottleneck in your jQuery functions.
2. Benchmarking
Another thing that every optimization will have to come across eventually is benchmarking. In programming, it is very common to use different ways to achieve the same result when we are writing our codes. In order to know which ways give us the best result, benchmarking will be required in order to justify correctly that certain way of achieving the same result is better than the other. Benchmarking across different JavaScript frameworks is the only way we can see which framework run faster than the other in certain ways. Hence, benchmarking is really required in order to justify the efficiency of two or more methods or script.
3. Specific Selector
In jQuery v1.3 below, specific a selector is necessary to optimize jQuery selector speed. A selector that are more specific will result in a faster result found. Hence, an id such as this:
jQuery('#someid').attr('value');
id is always the fastest compare to class or tag where classes is the worst (we do not have document.getElementByClasses don't we). Nonetheless, we can improve the efficiency of the selector by being more specific. Hence, instead of just calling out classes like this:
jQuery('.classes').html();
we can improve it by telling it where it exactly located at
jQuery('div ul li.classes').html();
By being specific in jQuery, we can improve the selector speed. However, this is what happen before jQuery v1.3. After the introduction of 'Sizzling' selector engine, this is no longer the case. We can see that by doing a selector test that the selector has speed up than before. This means that being specific with classes will not have significant differences after v1.3 (because it required more call to be specific) unless you are doing a rather odd selector such as this
jQuery('#id .class div').html();
It will be rather faster with just
jQuery(' .class').html();
Try to avoid id, classes and attribute combination that might just hit your selector badly. The point is to specific a selector but not over specific that might cause a degrade in selector performance.
4. Avoid Unnecessary Selector
Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary selector is expensive. Doing something like this:
jQuery('.class').each(function(){
jQuery(this).html();
jQuery(this).find('div').each(function(){
//etc.
});
});
which required many selector it is best to use 1 instead since we are repeating ourselves and doing some redundant selector.
jQuery('.class').each(function(){
var obj = jQuery(this);
obj.html();
obj.find('div').each(function(){
//etc.
});
});
This is something that we often see in many plugin. Many plugin contains unnecessary selector which degrade the perform of the plugin little by little.
5. Avoid Unnecessary Styling
This is another common mistake that many jQuery developer made. jQuery provides us with the ability to manipulate styling through styling methods. Although it is very convenient to do that but it also contribute to the size of the script and makes maintenance difficult. Furthermore, some of the selector is made solely for styling purposes which makes it even undesirable. To make thing worst, the styles made with jQuery are all inline style which doesn't help caching. Hence, instead of styling everything with jQuery. It is much more advisable to give classes to your tag and style it on a external stylesheet. Instead of writing jQuery styling such as these,
jQuery('div').each(function(){
var obj = jQuery(this);
obj.css({'background-color' : 'yellow', 'font-weight' : 'bolder', 'color': '#000', 'font-size': '15px'})
});
Where styling is being applied through jQuery, we can just add a class or even better do it on the HTML file itself!
jQuery('div').each(function(){
var obj = jQuery(this);
obj.addClass("mystyling");
});
This way we can easily eliminate a lot of extra code in our script. Unless, absolutely necessary to manipulate styling through jQuery, it is better to leave styling to the stylesheet.
6. Optimize Selector
We can also optimize our selector other than being a bit specific on our selector. The key to optimize our selector is simple. Naive JavaScript provides two method to get id and tag (getElementById and getElementByTagName). Hence, it is always faster to use tag or id on your selector. No matter what algorithm used for classes and attributes selection, the naive built-in JavaScript method will always have the upper hand. Nonetheless, classes and attribute selector have also been improved dramatically through the introduction of 'sizzling' selector engine. However, it is always advisable to reduce the number of attribute selector as they are the slowest in many cases. On the other hand, making your selector as simple as possible is good for pure tag and id selector but may not be true for attribute and selector. Hence,
jQuery('div')
jQuery('#id')
jQuery('.classes')
jQuery('p:last')
is considered as good selectors while the below might not give you very good selector result.
jQuery('body div div')
jQuery('div#id')
jQuery('#id div.classes')
jQuery('.classes p:last')
It is important to treat jQuery as a helper of JavaScript instead of a new language.
7. Avoid DOM Manipulation
Since we are using jQuery as a framework, making life difficult for ourselves is the most silly thing anyone can make. Example, using jQuery to write a table in DOM style~
var table = $('<table></table>');
for (var i = 0; i < 6; i++) {
var tr = $('<tr></tr>');
for (var j = 0; j < 7; j++) {
tr.append('<td></td>');
}
table.append($tr);
}
Leaving aside the additional operation on append() each time we call, we are also doing some expensive DOM creation each step when we can really help ourselves by doing a one line query and leave the rest to jQuery. For customize table you might do this.
var table = '<table>'
for (var i = 0; i < 6; i++) {
var tr = '<tr>';
for (var j = 0; j < 7; j++) {
tr +='<td></td>';
}
tr +='</tr>';
table += tr;
}
table += '</table>';
var table = $(table);
For a static table, its really one line.
var table = $('<table><tr><td><td>...</tr><tr>...</tr>...</table>');
But if you really want a table, do it in HTML. You don't need to create everything using jQuery. Treat jQuery as an expensive action and use it when absolute needed. (same goes with styling)
8. Balance between JavaScript and jQuery
jQuery is excellent to speed up ANY front-end developer job. However, there are times when jQuery may take more time to perform certain action than using JavaScript. For example,
css: function( key, value ) {
// ignore negative width and height values
if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
value = undefined;
return this.attr( key, value, "curCSS" );
}
The above is a CSS method in jQuery that takes a key and a value which we are familiar using in this way
jQuery('#id').css('display', 'block');
We can see that jQuery present certain overhead for doing something simple where JavaScript can also achieve.
document.getElementById('id').style.display = 'block';
Other methods such as show(), hide(), hasClass() and etc. also present some overhead which you should balance between complexity and efficiency. Hence, we must understand some of the cost of jQuery action and balance between JavaScript and jQuery. jQuery is build for general public and making a general public framework might means additional operation to meet everyone needs. Hence, if you truly going all out on optimization, you should consider the trade-off of some action between JavaScript and jQuery.
Summary
jQuery is a great framework that ease all our development life. Operation that gets complicated can easily become simple with jQuery. However, like i stress the important of keeping out unnecessary jQuery code will certainly help generating a more efficiency and optimize jQuery script.
Nice tips. Thanks!