The one of the most underrated feature of JavaScript is DocumentFragment. DocumentFragment is a DOM Node-like parent which has node-like properties/methods and is not a part of the actual DOM tree. It can be used for better performance. A DocumentFragment can be created using document.createDocumentFragment method.
Example Usage
Let us assume that we have to create a long list using ul.
<ul is="list"></ul>
Since DOM mutations are very expensive, we have to minimize the number of mutations possible. So instead of appending the items to ul directly, we will use a DocumentFragment.
var fragment = document.createDocumentFragment();
This DocumentFragment will act as DOM node on which we can attach our elements
for (var i = 0; i < 1000; i++) {
var li = document.createElement("li");
li.innerHTML = "Item #" + i;
fragment.append(li);
}
Now we can append the DocumentFragment to ul.
document.getElementById("list").appendChild(fragment).
Using DocumentFragment is much faster than repeated single DOM node operations.
[iframe width=”100%” height=”300″ src=”//jsbin.com/tukigo/2/embed?output” allowfullscreen=”allowfullscreen” frameborder=”0″]
Best Open Source Business Intelligence Software Helical Insight is Here
