JavaScript Performance Tips Limit DOM Updates
Example
A common mistake seen in JavaScript when run in a browser environment is updating the DOM more often than necessary.
The issue here is that every update in the DOM interface causes the browser to re-render the screen. If an update changes the layout of an element in the page, the entire page layout needs to be re-computed, and this is very performance-heavy even in the simplest of cases. The process of re-drawing a page is known as reflow and can cause a browser to run slowly or even become unresponsive.
The consequence of updating the document too frequently is illustrated with the following example of adding items to a list.
Consider the following document containing a <ul> element:
<!DOCTYPE html>
<html>
<body>
<ul id="list"></ul>
</body>
</html>
We add 5000 items to the list looping 5000 times (you can try this with a larger number on a powerful computer to increase the effect).
var list = document.getElementById("list");
for(var i = 1; i <= 5000; i++) {
list.innerHTML += `<li>item ${i}</li>`; // update 5000 times
}
In this case, the performance can be improved by batching all 5000 changes in one single DOM update.
var list = document.getElementById("list");
var html = "";
for(var i = 1; i <= 5000; i++) {
html += `<li>item ${i}</li>`;
}
list.innerHTML = html; // update once
The function document.createDocumentFragment() can be used as a lightweight container for the HTML created by the loop. This method is slightly faster than modifying the container element's innerHTML property (as shown below).
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();
for(var i = 1; i <= 5000; i++) {
li = document.createElement("li");
li.innerHTML = "item " + i;
fragment.appendChild(li);
i++;
}
list.appendChild(fragment);
