javascript

Chapter 20: Best Practices
list.innerHTML = html;
This code constructs an HTML string and then assigns it to list.innerHTML , which creates the
appropriate DOM structure. Although there is always a small performance hit for string concatenation,
this technique still performs faster than performing multiple DOM manipulations.
The key to using innerHTML , as with other DOM operations, is to minimize the number of times it is
called. For instance, the following code uses innerHTML too much for this operation:
var list = document.getElementById(“myList”);
for (var i=0; i < 10; i++) {
list.innerHTML += “ < li > Item “ + i + “ < /li > ”;
}
//AVOID!!!
The problem with this code is that innerHTML is called each time through the loop, which is incredibly
inefficient. A call to innerHTML is, in fact, a live update and should be treated as such. It ’ s far faster to
build up a string and call innerHTML once than it is to call innerHTML multiple times.
Use Event Delegation
Most web applications make extensive use of event handlers for user interaction. There is a direct
relationship between the number of event handlers on a page and the speed with which the page
responds to user interaction. To mitigate these penalties, it ’ s best to use event delegation whenever
possible.
Event delegation, as discussed in Chapter 12 , takes advantage of events that bubble. Any event that
bubbles can be handled not just at the event target, but also at any of the target ’ s ancestors. Using this
knowledge, it ’ s possible to attach event handlers at a high level that are responsible for handling events
for multiple targets. Whenever possible, attach an event handler at the document level that can handle
events for the entire page.
Beware of NodeLists
The pitfalls of NodeList objects have been discussed throughout this book, because they are a big
performance sink for web applications. Keep in mind that any time you access a NodeList , whether it be a
property or a method, you are performing a query on the document, and that querying is quite expensive.
Minimizing the number of times you access a NodeList can greatly improve the performance of a script.
Perhaps the most important area in which to optimize NodeList access is loops. Moving the length
calculation into the initialization portion of a for loop was discussed previously. Now consider this example:
var images = document.getElementsByTagName(“img”);
for (var i=0, len=images.length; i < len; i++){
//process
}
659