When using DocumentFragments add a large number of elements

We often use the `appendChild` method to Add new element:

const li = document.createElement('li');li.innerHTML = 'List item';// Append to given listul.appendChild(li);

When a new element is inserted into the page, the browser must recalculate the dimensions of its parent node and the parent node's children.This process is called reflux.Also, changing the style of an element may cause a repaint.

Adding a large number of elements to the document can affect the performance of the page because it triggers reflows multiple times:

for (let i = 0; i < 100; i++) {const li = document.createElement('li');li.innerHTML = `List item ${i}`;ul.appendChild(li);}

Despite many optimizations in modern browsers, including batch updates, it is recommended to use `DocumentFragment` in this case.We create a minimal document with no parent and attach our element to it.It doesn't trigger any reflow or repaint because the document fragment hasn't been added to the page yet:

const fragment = document.createDocumentFragment();for (let i = 0; i < 100; i++) {const li = document.createElement('li');li.innerHTML = `List item ${i}`;fragment.appendChild(li);}

Finally, insert the document fragment into the page:

ul.appendChild(fragment);

Reflow triggers once!