It is an object, which is ready to have nodes inserted into it.
let fragment = document.createDocumentFragment();
When you need to add a lot of nodes to
Adding them one by one in sequence may result in a lot of calculations, such as adjusting the position of the screen each time(reflow)
For example, when you will add a lot of
Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry)