Developer News, More

Tips to improve performance in Jquery – jQuery Tips


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:

jquery tips


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.

See More: 15 Amazing jQuery Plugins Every Developer Should Use

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:

jquery tips1


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.

jquery tips2

In case of performance, using a simple for (or a while) loop instead of $.each(), can make your code several times faster.


See More: Awesome JQuery Plugins For Navigation And Menus

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

jquery tips3

You will run into a problem – the button will disappear, not the container. With $.proxy, you can write it like this:

jquery tips4


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:

jquery tips5

The smaller the number, the faster the website is rendered. You can optimize it by removing redundant markup and unnecessary wrapping elements.


See More: Image Hover Effect Tutorial For jQuery and CSS3 2

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:

jquery tips6

To access the data attributes of this div, you would use code like the one below:

jquery tips7


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.

jquery tips8

You Might Also Like


  1. 1

    1. It’s faster to load file from localhost, so you should download compressed jQuery and use it from localhost

    2. As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()

    3. add ID attribute to your tag, so you can work with it later

    4. agree

    5. or simply create a variable like $this = $(this) or parentThis = this and you can use it in inner function, so you are not calling another function => should be faster and better readable

    6. I’m not sure about “The smaller the number, the faster the website is rendered”… when there are wrappers or empty elements, it shouldn’t slow down loading or rendering… can you provide some metrics or proofs?

    7. Use $(el).attr(“data-something”) instead of $(el).data(“something”), because “.data()” often cause bugs and errors

    8. agree, but you didn’t write details about this “method” and for people who are not familiar with it, it’s unclear

    • 2

      1. Agree with that. Include from CDN always not a good solution.
      2. Agree
      3. You can work with ID or Class.
      4. 🙂
      5. That can be different method
      6. its my real experience. Just try it
      7. Agree
      8. Did not write details will clear it in future 🙂

Leave a Reply