Common jQuery Mistakes
I have listed down 10 common jQuery mistakes from my personal experience and their fixes that you might be also doing while writing jQuery code.
1. Be courageous to remove jQuery
Sometimes things can be done easily via CSS without even thinking about jQuery but we don’t realize it. Plain CSS is far better than jQuery. So be open and courageous to remove jQuery whenever needed.
2. Not using latest version of jQuery
jQuery team is keep on updating the jQuery library and the newer version comes with lots of bug fixes and performance enhancement. I understand that it is not always possible for you to use the latest version for your old projects but I suggest for your new projects, you can use latest version of jQuery.
Read “How to always reference latest version of jQuery”
3. Not using minified version of jQuery library
The jQuery library (when you download) comes in two versions.
1. Production (Compressed Version)
2. Development (Uncompressed Version)
For development purpose, you can choose the development version of .js file as if you want to make some changes then that can be easily done. But ensure that when your software or product goes on production, always use the production version of .js file as its size is 5 times lesser than the development version. This can save some amount of bandwidth.
4. Not loading jQuery from Google CDN
Google is sea of free services. Do you know that Google is also hosting jQuery libraries on its CDN(Content delivery network) and allows any website to use it for free.
Why to use Google CDN?
- Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded again.
- Reduce Load: It reduces the load on your web server as it downloads from Google server’s.
- Serves fast : You will be also benefitted from speed point of view. As Google has dozen’s of different servers around the web and it will download the jQuery from whichever server is closer to the user. Google’s CDN has a very low latency, it can serve a resource faster than your webserver can.
- Parellel Downloading: As the js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.
Read “Why to use Google hosted jQuery CDN”
5. Not loading jQuery locally when CDN fails
It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.
I always recommend that write the code, if jQuery library is not loaded properly then it should use your local copy of jQuery.
1 |
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> |
2 |
<script type="text/javascript"> |
3 |
if (typeof jQuery == 'undefined') |
4 |
{ |
5 |
document.write(unescape("%3Cscript src='Scripts/jquery.1.9.0.min.js' type='text/javascript'%3E%3C/script%3E")); |
6 |
} |
7 |
</script> |
It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.
6. Not using selectors efficiently
Be smart while using selectors. As there are many ways to select element using selectors but that doesn’t mean that all are equal. Always try to use ID and Element as selector as they are very fast. Even the class selectors are slower than ID selector.
When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element.
When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.
7. Using jQuery selectors repeatedly
Take a look at below jQuery code. The selectors are used thrice for 3 different operation.
1 |
$("#myID").css("color", "red"); |
2 |
$("#myID").css("font", "Arial"); |
3 |
$("#myID").text("Error occurred!"); |
The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.
1 |
$("#myID").css({ "color": "red", "font": "Arial"}).text("Error occurred!"); |
This will ensure that jQuery traverse only once through DOM while selecting the element.
8. Not knowing how selectors are executed
Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class “.myCssClass” and after that it will reject all the other elements which are not in “p#elmID”.
1 |
$("p#elmID .myCssClass"); |
9. By not caching the stuff
Caching is an area which can give you awesome performance, if used properly and at the right place. While using jQuery, you should also think about caching. For example, if you are using any element in jQuery more than one time, then you must cache it. See below code.
1 |
$("#myID").css("color", "red"); |
2 |
//Doing some other stuff...... |
3 |
$("#myID").text("Error occurred!"); |
Now in above jQuery code, the element with #myID is used twice but without caching. So both the times jQuery had to traverse through DOM and get the element. But if you have saved this in a variable then you just need to reference the variable. So the better way would be,
1 |
var $myElement = $("#myID").css("color", "red"); |
2 |
//Doing some other stuff...... |
3 |
$myElement.text("Error occurred!"); |
So now in this case, jQuery won’t need to traverse through the whole DOM tree when it is used second time. So in jQuery, Caching is like saving the jQuery selector in a variable. And using the variable reference when required instead of searching through DOM again.
10. Not checking while using various plugins
One of the great feature of jQuery is various plugins available created using jQuery are available for free. You like a jQuery plugin and start using it in your project. But while using plugins do you really consider,
- File size
- Performance of plugin
- Browser Compatibility
Before using any plugin, always ensure that it must not hit performance of your page and it should not conflict with other plugins that you are using already.
