Document createDocumentFragment() method

When updating a small number of nodes you can add them directly to the document.body node, but when adding a large number of new nodes to the document, the process is very slow because the appendChild() method of the parent node is called for each node. To solve this problem, You can create a document shard, attach all the new nodes to it, and then add the document shard to the document all at once.

for (var i = 0; i < 10; i++) { var p = document.createElement("p"); Var oTxt = document.createTextNode(" textNode "+ I); p.appendChild(oTxt); document.body.appendChild(p); } / / he calls for ten times the document. The body. The appendChild (), to produce every time a page rendering var oFragment = document. CreateDocumentFragment (); console.log(Object.prototype.toString.call(oFragment)); for (var i = 0; i < 10; i++) { var p = document.createElement("p"); Var oTxt = document.createTextNode(" textNode "+ I); p.appendChild(oTxt); oFragment.appendChild(p); } document.body.appendChild(oFragment); // Each new <p /> element is added to the document fragment, which is then passed as a parameter to appendChild(). AppendChild () does not actually append the document fragment to the body element, but only appends the child nodes in the fragment, and then you see a significant performance improvement. Document.body.appenchild () replaces it ten times at a time, This means that only one content render refresh is required.Copy the code