- 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:
- document.write() method
- element.innerHTML attribute
- DOM manipulations
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');
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.
One Response to Front End Optimization – Part 2