Front End Optimization – Part 2

One fairly common thing in javascript programming is the need to add/edit the html contents of an element on the page. It turns out that there’s actually a pretty significant performance impact on how quickly this update renders depending on how you do the actual edit. The main 5 ways to add/edit html via javascript are the following:

• Document.write() method
• element.innerHTML (before element is in the DOM)
• element.innerHTML (after element is in the DOM)
• DOM manipulations on the element (before element is in the DOM)
• DOM manipulations on the element (after the element is in the DOM)

So the first thing to note is that whenever you’re faced with the question of adding/editing html before or after adding it to the DOM you should always make any changes BEFORE adding it to the DOM. The performance difference of this is pretty significant as if the element is in the DOM the browser must immediately render the changes as the edits are taking place. If you modify the html before attaching the element to the DOM, however, the updates stay only in memory and don’t get rendered until the edits are in place.

This is the single most important factor for performance in this task. In fact, the difference is often so drastic (particularly in IE browsers) that in many cases it’s actually better to remove the element from the DOM, edit the contents, and re-attach it instead of editing it directly. This also allows you to sidestep odd inconsistencies in IE with the innerHTML method (in some cases editing the innerHTML attribut7e of an object can cause a browser cache in IE – in particular when the element is a child of a table element).

Now that we know to edit contents before attaching elements to the DOM, which method should we use? In general, the order of speeds of the methods is as follows:

1. document.write() method
2. element.innerHTML attribute
3. DOM manipulations

Document.write is consistently the fastest across browsers and is often the best method to use when it’s possible. The main drawback of this method, however, is that it can only be used during initial browser load/rendering. If the method is used after the page has been initially rendered it will have the undesirable effect of either crashing the browser or clearing the current page and replacing the entire page contents with the write statement instead. This makes it unusable for adding elements after initial page load or editing the contents of an element after page load, but the pure speed/flexibility (it basically allows you to write any html to the page including inline css and javascript – though javascript tags must be written as a combined string instead a standard script tag [for example “<scr”+”ipt>”]) make it an option worth using when possible.

The next fastest method is the element.innerHTML method. This method is very readable and easy to construct quickly in general. One other suggestion is when concatenating strings to form the innerHTML use a temporary variable and apply it to the element only once. For example:
var innerHTML = "<div>";
innerHTML += "Inner Contents";
innerHTML += "</div>";
element.innerHTML = innerHTML;

This speeds up rendering (since it only has to update the DOM/render the change once) and prevents some inconsistencies when using the concatenation/assignment operators in certain browsers.

The last, and by far the slowest, method is to do direct DOM manipulations. This is a broad categorization of using methods like the following:
var element = document.createElement('DIV');
var element2 = document.createElement('DIV');
element.appendChild(element2);
This technique has many disadvantages. It renders slowly as each element is added and styled as it is appended to the DOM. Although you can improve this drastically by waiting to attach the top level element to the DOM until all the inner elements are completed, it still doesn’t compare with the previous methods described above. This code is also much harder to read (in general) than the above methods as each style, class, and attribute of the element must be assigned individually. This also leads to much larger code than the previous methods which adds to download time and parsing time. This method is really only suitable when you’re editing specific attributes or doing very minor manipulations.

And that wraps up the 5 different methods. Hopefully someone out there finds this helpful.