Using the DOM efficiently

Document Object Model (DOM) manipulations remain amongst the costliest operations to do in JavaScript. Indeed, repaints or reflows should be kept to a bare minimum in order to avoid performance issues in general.

This being said though, there are other pitfalls that must be avoided in order to maintain the speed of a script when DOM operations are required and lead to repaints or reflows. These pitfalls concern how to modify the document tree, how to update an invisible element, how to make style changes, how to search for nodes, how to manage references from one document to another and what to do when inspecting a large number of nodes.

Modifying the document tree

It is important to know that making modifications while traversing the tree is very expensive. It is best to create a temporary collection to work on rather than modifying the tree directly while looping over all of its nodes.

Indeed, the best approach is to use a non-displayed DOM tree fragment, to make...