Некоторые преимущества использования DocumentFragment вместо appendChild при массовой вставке элементов:

• Уменьшение количества взаимодействий с реальным DOM-деревом. 3 Вместо того чтобы добавлять каждый элемент списка отдельно, вызывая множество перерисовок и пересчётов стилей, DocumentFragment позволяет вносить все изменения одновременно. 3
• Улучшение производительности. 34 Когда элементы добавляются по очереди, браузеру приходится производить множество вычислений, что может привести к ощутимому «подвисанию» для пользователя. 4 DocumentFragment не вызывает таких вычислений, потому что фрагмент не является частью активного DOM-дерева. 4
• Снижение потребления ресурсов. 2 Минимизация пересчётов макетов и перерисовок позволяет веб-приложению потреблять меньше ресурсов, что, в частности, продлевает срок работы батарей мобильных устройств. 2
• Отсутствие блокировки основного потока JavaScript. 2 Это означает, что во время процесса страница остаётся отзывчивой и не зависает, обеспечивая лучший пользовательский опыт. 2