Friday, 27 October, 2017 UTC


Summary

Well, The public makes mistakes and the best part would be not to rerun them again. You should “Always make new mistakes” :). jQuery is an awesome library. But believe me, it can make you insane if it is not used accordingly and efficiently.

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.

Using jQuery selectors repeatedly

Take a look at below jQuery code. The selectors are used thrice for 3 different operations.
The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into one statement.

Not using latest version of jQuery

jQuery team keeps on amend the jQuery library and the newer version appear with lots of bug fixes and work enhancement. I understand that it is not always available for you to use the latest version for your old task but I suggest for your new deal, you can use the 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 function, you can choose the evolution version of .js file as if you want to make some development then that can be easily done. But ensure that when your software or product goes on the manufacture, always use the construction version of .js file as its size is 5 times lesser than the expansion version. This can save some amount of bandwidth.

Not loading jQuery locally when CDN fails

It is a good access to always use CDN but frequently what if the CDN is down (rare possibility though) but you at no time know in this world as everything 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.

By not caching the stuff

Caching is an area which can give you awesome work, if used accordingly and at the right place. While using jQuery, you should also think about caching. For example, if you are working any element in jQuery more than one time, then you must cache it. See below code.
Now in above jQuery code, the element with #myID is used double but without caching. So both the times jQuery had to traverse over DOM and get the element. But if you have saved this in a shifting then you just need to hint the variable. So the improved way would be,

Not knowing how selectors are executed

Do you know how the selectors are executed? Your last selectors are regularly 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”.

Not loading jQuery from Google CDN

Google is a sea of free utility. Do you know that Google is also hosting jQuery libraries on its CDN(Content delivery network) and confess any website to use it for free.
Why use Google CDN?
  • Caching: The most decisive benefit is caching. If any already visited site by the user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded repeated.
  • Reduce Load: It weakens the load on your web server as it load from Google server’s.
  • Serves fast: You will be also benefitted from a speed point of view. As Google has dozen’s of dissimilar servers about the web and it will download the jQuery from whatever server is closer to the user. Google’s CDN has a very low latency, it can serve a resource faster than your web server can.

Not using selectors efficiently

Be smart while working with selectors. As there are many ways to select aspect using selectors but that doesn’t mean that all are same. Always try to use ID and Element as selector as they are very rapid. Even the class selectors are passive than ID selector.
When IDs are used as selector then jQuery internally makes a call to getElementById() method of Javascript which directly maps to the element.
See more:
jQuery Cheat Sheet – All in one
Learn animation using CSS3, Javascript, and HTML5
The post jQuery Mistakes appeared first on I'm Programmer.