Improving performance in JQuery is really easy and simple. Mostly the users want to improve the JQuery for the obvious reasons. Therefore they search in a lot of places for tips and tricks and end up in vain. However, most users haven’t realized or used the effective ways to do it. The following tips will help you to enhance the performance in jQuery very effectively
Tips to improve performance in Jquery
1. Try to use latest jquery and compressed library file
In order to increase performance of the jQuery in the site, we should use latest jquery version and use the compressed js file i.e. minified js. For eg: jquery-1.10.2.min.js Google provides number of ways to use loadjquery. Let us see an example:
2. Try to Use live() not click():
jQuery’s new event handler live() is a much faster and a better event handler than click(). It comes with a benefit of the selector, it works even with dynamic content which means no more reattaching click events every time you change a piece of content. Live is faster and better for all click events and various other jQuery event handling.
3. Add style tags when styling more elements:
When styling a few elements it is best to simply use jQuery’s css() method, however when styling 15 or more elements it is more efficient to append a style tag to the DOM:
4. Jquery Objects as Arrays:
The result of running a selector is a jQuery object. However, the library will make it appear as if you are working with an array by defining index elements and a length.
In case of performance, using a simple for (or a while) loop instead of $.each(), can make your code several times faster.
5. The $.proxy:
One of the drawbacks of using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup
You will run into a problem – the button will disappear, not the container. With $.proxy, you can write it like this:
6. Determine the weight of the page:
You can get a quick count of the number of DOM elements on your page by running this in your console:
The smaller the number, the faster the website is rendered. You can optimize it by removing redundant markup and unnecessary wrapping elements.
7. Make Use of HTML5 data attributes:
HTML5 data attributes are a simple means to embed data in a webpage. It is useful for exchanging data between the server and the front end, something that used to require outputting <script> blocks or hidden markup.
With the recent updates to the jQuery data() method, HTML5 data attributes are pulled automatically and are available as entries, as you can see from the example below:
To access the data attributes of this div, you would use code like the one below:
8. Use CSS Hooks:
The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties.