Click here to Skip to main content
Click here to Skip to main content

Tagged as

JavaScript Performance Tips

, 23 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Some useful tips on JavaScript code performance

Introduction

In this tip, I have tried to capture the common design and coding mistakes JavaScript developers tend to make. The intended audience for this article is JavaScript beginners with a few years of programming experience.

Background

Over the years, I have observed how web based Enterprise/Consumer software is designed, developed and tested. One common trait in all of these applications is the usage of JavaScript. More often than not, developers either overlook or are ignorant about JavaScript performance. This is partly because these days, the machines are mostly high end and the browsers with their ever improving script engines have to some extent camouflaged the performance aspect. So developers are not penalized for writing bad JavaScript. Nevertheless if developers follow certain discipline while coding JavaScript, they'll definitely notice that their app will improve in terms of performance and maintainability.

Tips on Performance

  1. Always prefer the Single var pattern. JavaScript Engine hosts all the vars to the top of the function. So even if we declare our var at the bottom of the function, it doesn’t matter. Remember JS isn’t compiled into a binary! In the example below, both functions are the same but the second one is optimal.
  2. function foo() {
        var c = 1;
        //lots of logic
        //and then
        var d = 0;
    var e;
    }
     
    function foo() {
        var c = 1, d = 0, e;
    
    }
  3. Do not use for-in loop to iterate over arrays. Use for loop instead. for-in loops should be used to iterate user defined object literals. The example below takes more time to execute in comparison with a simple for loop.
  4. //Takes more time
    var i, b, c;
    for (i in c=[1,2,3]) {
        b = c[i];
        if(b === "x")
            DoSomething();
    }

    For-in loop iterates over every property, even the prototype! So in the example above, it loops through all properties of c.prototype and in case c.prototype has a property called ‘prop’, it also iterates over c.prototype.prop.prototype, etc. This clearly is not necessary if all we want is to loop through an array.

  5. Avoid returning undeclared variables from a function.
  6. function foo(a, b) {
        r = a + b;
        return r; //creates a variable r in global scope!
    }
  7. Cache your objects whenever possible.
  8. //Good
    for (var i = 0, x = p.length; i<x; i+=1) {
        
    }
    //Better
    for (var i = 0, x; x= p[i]; i += 1) {
     
    }

    Even when you use libraries like jQuery, YUI, MooTools, etc., ensure that you cache the selector. Remember DOM Traversal is costly!

    function foo() {
        var d = $("#myDiv"), c = $("#myDiv:firstchild");
        //.....
        //Use d and c later whenever needed!
    }
  9. Return this from your initializer to facilitate chaining. In the below example, we are able to call doAjax on init because we induced chaining by returning this.
  10. var MyApp = {};
    MyApp.Utilities = (function () {
      
        return {
            init: function (a,b,c) {
                //initialize your stuff
                return this;
            },
            doAjax: function() {
                
            }
        };
    })();
     
    MyApp.Utilities.init().doAjax();

    Note: If you have a constructor for your class, you don’t have to return this explicitly. Constructors always return this.

  11. Avoid nesting deep inside a function. Well, this applies to any programming language.
  12. //Not recommended
    function successCbk(r) {
        if (r) {
            if (r.data) {
                if (r.data.myProp) {
    //Do something
                } else {
                    
                }
            }
        }
    }
     
    //Better!!
    function successCbk(r) {
        if (!r) return;
        if (!r.data) return;
        
        if (r.data.myProp) {
    //Do something
        } else {
     
        }
    }
  13. Avoid memory leaks and circular references in your closures. Developers typically tend to write the code below:
  14. //Classic case for circular references
    function foo(e,d) {
        $(e).on("click", function() {
            //Do something with d
        });
    }

    The problem with the code above is that the click callback closure for the element e keeps a reference to both e and d even though it just uses d. Similarly, e also keeps a reference to the closure thus creating a circular reference. These functions will never be garbage collected. The trick is to break this chain!

    //Break the cycle!
    function foo(e, d) {
        $(e).on("click", cbk(d));
    }
    
    function cbk (d) {
    } 

Parting Note

If you find this tip useful, please share it with the developer community. I haven't executed every line of code in this tip, so in case you find discrepancies, please comment on the post. I'll incorporate the changes as soon as possible.

Happy learning. Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rajesh Udupi
Web Developer
India India
I'm a Software Developer with extensive programming experience on front end apps.

Comments and Discussions

 
Question#7 would not work PinmemberAlan_caozy25-Jul-13 20:26 
AnswerRe: #7 would not work PinmemberRajesh Udupi25-Jul-13 21:25 
GeneralRe: #7 would not work PinmemberAlan_caozy26-Jul-13 15:10 
QuestionA few jsPerf tests PinmemberMember 1017235224-Jul-13 23:46 
AnswerRe: A few jsPerf tests PinmemberRajesh Udupi25-Jul-13 21:26 
SuggestionGreat Article! :) Pinprofessionaldigi0ps24-Jul-13 1:42 
GeneralRe: Great Article! :) PinmemberRajesh Udupi24-Jul-13 1:59 
QuestionPerformance? PinmemberHaBiX23-Jul-13 19:45 
AnswerRe: Performance? PinmemberRajesh Udupi23-Jul-13 20:00 
GeneralMy vote of 5 PinmemberKarthik. A23-Jul-13 3:40 
GeneralMy vote of 5 PinprofessionalMaimonides22-Jul-13 23:32 
GeneralRe: My vote of 5 PinmemberRajesh Udupi23-Jul-13 0:02 
GeneralMy vote of 3 Pinmemberranjjeet19-Jul-13 8:32 
GeneralRe: My vote of 3 PinmemberRajesh Udupi22-Jul-13 22:35 
GeneralRe: My vote of 3 PinprofessionalMaimonides22-Jul-13 23:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 23 Jul 2013
Article Copyright 2013 by Rajesh Udupi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid