createDocumentFragment()createDocumentFragment() создаёт лёгкий, находящийся в памяти DOM-узел, который существует вне основного дерева документа. Это действует как временный контейнер, где ты можешь собрать и организовать DOM-элементы перед вставкой их на живую страницу.
Каждый раз, когда ты добавляешь элемент прямо в DOM, браузер запускает reflow (пересчитывает вёрстку) и repaint. Повторение этого в цикле — это крайне затратно для производительности:
// Плохая практика — вызывает reflow на каждой итерации
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
document.querySelector('ul').appendChild(li); // reflow каждый раз
}
DocumentFragment улучшает производительностьСобирая элементы сначала внутри фрагмента, ты держишь все изменения вне живого DOM. Только один reflow происходит, когда готовый фрагмент добавляется:
// Хорошая практика — вызывает только один reflow
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li); // reflow ещё не происходит
}
document.querySelector('ul').appendChild(fragment); // один reflow
Используй createDocumentFragment(), когда нужно вставить множество элементов за раз, особенно внутри циклов — это позволит сохранить приложение производительным и отзывчивым.
DocumentFragment существует в памяти вне основного дерева документа и не вызывает reflow до момента, когда его дочерние элементы будут добавлены в живой DOM.
Новый — ещё не проверен сообществом
Вы