blog post

jQuery performance issues are more common than they should be, causing dreadful load times and a poor user experience. Here are some quick tips that can help you optimize jQuery code like a pro and, in turn, your website’s performance.


Depending on the pages your jQuery is on, these tips may only save a few milliseconds here and there, but in a world where you can lose 50% of your viewers with a five second load time those milliseconds add up quickly.


1. Use the proper selector. jQuery selectors aren't all equal. The ID and Tag selectors map directly to their JavaScript method counterparts, which makes them naturally fast. As for the Class selector, this also maps to its JavaScript method but only in newer browsers. This mostly pertains to Internet Explorer as 9 is the first version to have this method. As for the selectors that don’t have JavaScript methods, if these must be used try to use the “.find()” method on one of the faster selectors. In fact, anytime you can limit the search field by using a faster selector this will help with page speeds.


2. Cache your selectors.In addition to using the proper selector, you should not repeat selectors. If a selector is going to be used any more than once you should store the results into a variable. Doing this keeps jQuery from having to search the entire DOM every time you call the selector. Say you have an unordered list that has hide/show button. Instead of using a selector inside the click function, which will cause jQuery to search the entire DOM each click, you can save the results of the selector you want to be hidden or shown in a variable and use the variable in the click function. Now jQuery only has to search the DOM once but can use the variable as many times as it wants without having to search.


3. Chain jQuery methods. This can link back to tip #2. Instead of selecting the same thing multiple times for multiple methods, just have one selector with all the methods you needs chained onto it. Almost every jQuery method returns the object it was using. This allows what allows you chain methods. Doing this keeps searches and variable accesses to a minimum.


4. DOM Manipulation. This is trickier than using the correct selectors. This is more about how you do the manipulation. Say you have a loop that will create and add the needed amount of

  • ’s to a list. Instead of adding the
  • to the list with each iteration, which would involve you calling a method and using a selector (or tip #2) with every iteration, you should save the
  • ’s into a variable and after they have all been created use one selection and one method to do the work.


    I hope that these jQuery performance tips help. If you’re experience slow load times and have questions on how to optimize jQuery code or other aspects of your site.

  • Quick Tips to Help You Optimize jQuery Code
    • Share This Story


    Pleas give your valuable comments to improve the contents.

    about author

    Atul kumar shukla


    I'm Atul Kumar Shukla, working as a web developer.
    Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

    Visit Profile

    Leave a comment

    Name
    E-mail
    Url
    Message

    Get More Stuff
    Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
    Your Email

     

    Style Switcher

    Change Color

    ×! We use cookies to improve your user experience. More information