Как работает Document Fragment и зачем его использовать?

DocumentFragment — лёгкий контейнер для DOM-узлов, который существует только в памяти и не является частью DOM-дерева. Ты собираешь в нём множество элементов, а потом вставляешь одной операцией. Браузер делает один reflow вместо сотни. При вставке фрагмент «растворяется» — в DOM попадают только его дочерние узлы, без обёртки.