Click here to Skip to main content
13,199,571 members (26,567 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


23 bookmarked
Posted 19 Jul 2013

JavaScript Performance Tips

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


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.


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")

    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) {
    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() {

    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 ( {
                if ( {
    //Do something
                } else {
    function successCbk(r) {
        if (!r) return;
        if (! return;
        if ( {
    //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. :)


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


About the Author

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

You may also be interested in...

Comments and Discussions

Question#7 would not work Pin
Alan_caozy25-Jul-13 20:26
memberAlan_caozy25-Jul-13 20:26 
AnswerRe: #7 would not work Pin
Rajesh Udupi25-Jul-13 21:25
memberRajesh Udupi25-Jul-13 21:25 
GeneralRe: #7 would not work Pin
Alan_caozy26-Jul-13 15:10
memberAlan_caozy26-Jul-13 15:10 
QuestionA few jsPerf tests Pin
Member 1017235224-Jul-13 23:46
memberMember 1017235224-Jul-13 23:46 
AnswerRe: A few jsPerf tests Pin
Rajesh Udupi25-Jul-13 21:26
memberRajesh Udupi25-Jul-13 21:26 
SuggestionGreat Article! :) Pin
digi0ps24-Jul-13 1:42
professionaldigi0ps24-Jul-13 1:42 
GeneralRe: Great Article! :) Pin
Rajesh Udupi24-Jul-13 1:59
memberRajesh Udupi24-Jul-13 1:59 
QuestionPerformance? Pin
HaBiX23-Jul-13 19:45
memberHaBiX23-Jul-13 19:45 
AnswerRe: Performance? Pin
Rajesh Udupi23-Jul-13 20:00
memberRajesh Udupi23-Jul-13 20:00 
GeneralMy vote of 5 Pin
Karthik. A23-Jul-13 3:40
memberKarthik. A23-Jul-13 3:40 
GeneralMy vote of 5 Pin
Maimonides22-Jul-13 23:32
professionalMaimonides22-Jul-13 23:32 
GeneralRe: My vote of 5 Pin
Rajesh Udupi23-Jul-13 0:02
memberRajesh Udupi23-Jul-13 0:02 
GeneralMy vote of 3 Pin
ranjjeet19-Jul-13 8:32
memberranjjeet19-Jul-13 8:32 
GeneralRe: My vote of 3 Pin
Rajesh Udupi22-Jul-13 22:35
memberRajesh Udupi22-Jul-13 22:35 
GeneralRe: My vote of 3 Pin
Maimonides22-Jul-13 23:28
professionalMaimonides22-Jul-13 23:28 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171020.1 | Last Updated 23 Jul 2013
Article Copyright 2013 by Rajesh Udupi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid