Are you also doing these jQuery mistakes

There is no doubt that jQuery is awesome. But there are some good things and bad things. Believe me, jQuery can make you crazy if it is not used properly and efficiently. It can hit performance of your page and you don't even realize it. And as a developer, do you really think about performance at the time of writingjQuery code or else you have to care about when your client shouts.

I have listed down common mistakes and their fixes that you might be doing while writing jQuery code.

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"

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.

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"

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	//Code Starts

2	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

3	<script type="text/javascript">

4	if (typeof jQuery == 'undefined')

5

{

6	document.write(unescape("%3Cscript src='Scripts/jquery.1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));

7

}

8

</script>

9	//Code Ends

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.

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.

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.

Not knowing how your 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");

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.