JavaScript Tips Use DocumentFragment to speed up DOM rendering_javascript tips

When everyone uses JavaScript, DOM operations are the most common. With the development of Web front-end technology, we are increasingly using JS to operate DOM elements, such as obtaining data through ajax requests, and then updating the content on the page. Element, generally, we will use a method similar to node.appendChild() to complete this operation. This method is unbuffered, which means that every time we call the appendChild method, the browser will re-render the page. Of course, there is nothing wrong with using this method, because we usually update a small number of DOM nodes, which does not bring much performance problems. However, if a large number of DOM nodes are updated, the performance will suffer. The gap will become more and more obvious. Because the browser has to constantly render the page, especially some complex tags, a large number of re-rendering consumes performance and affects the user experience. So is there any good way to improve the efficiency of this type of DOM operation?

Although we don’t often encounter this situation in development, it is still necessary to understand that JS provides a DocumentFragment mechanism. I believe everyone is familiar with this. It can provide a The buffering mechanism first puts the DOM nodes into the memory. After the nodes are constructed, the DocumentFragment object is added to the page. At this time, all the nodes will be rendered at once, which can reduce a lot of burden on the browser. Obviously Improve page rendering speed. For example, the following code:

Copy code The code is as follows:

function CreateNodes() {
for(var i = 0;i < 10000;i ){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" i "
";
document.body.appendChild(tmpNode);
}
}
function CreateFragments(){
var fragment = document.createDocumentFragment();
for(var i = 0;i < 10000;i ){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" i "
";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}

The above code gives two functions, respectively It uses the ordinary DOM method and DocumentFragment to add 10,000 div nodes to the page. You can experiment it yourself. The second method is much faster than the first. This is just a simple tiled addition of div tags. If it is a more complex HTML tag or a multi-layer nested tag, the performance gap will be more obvious.
Through the above example, when you develop JavaScript applications, if you encounter such a large number of nodes, you may wish to use DocumentFragment as an alternative solution.