Optimizing JavaScript Code – 1

There is an excellent article named
Optimizing JavaScript Code. The authors are software engineers on Gmail
and Google chrome.

I appreciate the knowledge described in this article and try to repeat it in my
own words.

Faster string concatenation

I have described this rule in my article
JavaScript Tips and Tricks - 5.

    // BAD    var longStr = "This is a very long " +        "long long " +        "long string."    // GOOD    var longStr = ["This is a very long ",        "long long ",        "long string."].join("");

Notice: the original article use join() to concat string is incorrect,
which is the same as join(”,”).

Avoid create too many temporary strings

Build up long strings by pass array into functions, to avoid create too many temporary
strings.

Remeber in my last article -
Reference and array clone, i describe how an array is passing by reference.

    // BAD    function createMenu(index) {        return "<li>Menu " + index + "</div>";    }     var arr = ["<ul>"];    for (var i = 0; i < 100; i++) {        arr.push(createMenu(i));    }    arr.push("</ul>");    var menu = arr.join("");     // GOOD    function createMenu(index, arr) {        arr.push("<li>Menu " + index + "</div>");    }     var arr = ["<ul>"];    for (var i = 0; i < 100; i++) {        createMenu(i, arr);    }    arr.push("</ul>");    var menu = arr.join("");

Define class method in prototype

    // BAD    function Person(name) {        this.name = name;        this.getName = function() {            return this.name;        };    }     // GOOD    function Person(name) {        this.name = name;    }    Person.prototype.getName = function() {        return this.name;    };

The first method is inefficient, as each time a instance of Person is constructed,
a new function and closure is created.

I also mention the prototype property in this article -
Prototype/Constructor that i have known

Don’t define reference type in prototype

I have describe this rule in my article -
Athena JavaScript Questions - 2.

You can also refer to that article to discover why we should not define reference
type in prototype.

But this google article suggest define value type variables in prototype (such as
Number, Boolean, String, null, undefined).

The purpose is to avoid unnecessarily running the initialization code each time
the constructor is called.

For example：

    // Google prefered way:    function Person(name) {        if (name) {            this.name = name;        }    }    Person.prototype.name = "Unknown";    Person.prototype.getName = function() {        return this.name;    };     var p1 = new Person();    console.log(p1.getName());  // "Unknown"     var p2 = new Person("ZhangSan");    console.log(p2.getName());  // "ZhangSan"

Notice：We don’t have to initialize the name property when the p1 is under construction.

This may speed up the initialization and save some memory storage.

But the effects is very little if the variable is not a very very long string.

Therefore, i perfer writing the previous example in this way:

    // I prefered way:    function Person(name) {        this.name = name || "Unknown";    }    Person.prototype.getName = function() {        return this.name;    };     var p1 = new Person();    console.log(p1.getName());     var p2 = new Person("ZhangSan");    console.log(p2.getName());