javascript

Chapter 20: Best Practices
In this code, an array and an object are created and initialized. Each requires four statements: one to call
the constructor and three to assign data. These can easily be converted to use literals as follows:
//one statement to create and initialize array
var values = [123, 456, 789];
//one statement to create and initialize object
var person = {
name : “Nicholas”,
age : 29,
sayName : function(){
alert(this.name);
}
};
This rewritten code contains only two statements: one to create and initialize the array, and one to create
and initialize the object. What previously took eight statements now takes only two, reducing the
statement count by 75%. The value of these optimizations is even greater in codebases that contain
thousands of lines of JavaScript.
Whenever possible, replace your array and object declarations with their literal representation to
eliminate unnecessary statements.
There is a slight performance penalty for using literals in IE 6 and earlier. These
issues were resolved in IE 7.
Optimize DOM Interactions
Of all the parts of JavaScript, the DOM is without a doubt the slowest part. DOM manipulations and
interactions take a large amount of time because they often require re - rendering all or part of the page.
Further, seemingly trivial operations can take longer to execute because the DOM manages so much
information. Understanding how to optimize interactions with the DOM can greatly increase the speed
with which scripts complete.
Minimize Live Updates
Whenever you access part of the DOM that is part of the displayed page, you are performing a live
update . Live updates are so called because they involve immediate (live) updates of the page ’ s display to
the user. Every change, whether it be inserting a single character or removing an entire section, incurs a
performance penalty as the browser recalculates thousands of measurements to perform the update. The
more live updates you perform, the longer it will take for the code to completely execute. The fewer live
updates necessary to complete an operation, the faster the code will be. Consider the following example:
var list = document.getElementById(“myList”);
for (var i=0; i < 10; i++) {
var item = document.createElement(“li”);
list.appendChild(item);
item.appendChild(document.createTextNode(“Item “ + i));
}
657