DocumentFragment и производительность

Как только элемент попал в документ, он живой: браузер должен знать, где он лежит, какого он размера и что от этого поехало. Сам по себе append дёшев — браузер ленив и откладывает пересчёт раскладки до конца текущей задачи. Дорого становится, когда между вставками кто-то спрашивает геометрию: offsetHeight, getBoundingClientRect, scrollTop. На такой вопрос нельзя ответить старыми данными, и раскладка считается заново — столько раз, сколько витков в цикле.

const menu = document.querySelector("#menu");
const heights = [];

for (const name of ["Дом", "Работа", "Сад"]) {
  const li = document.createElement("li");
  li.textContent = name;
  menu.append(li);
  // вопрос о высоте прямо здесь заставляет браузер пересчитать раскладку
  heights.push(menu.offsetHeight);
}

console.log(heights.length);
console.log(heights[2] > heights[0]);

Три вставки — три вынужденных пересчёта. С тремя пунктами это незаметно, с тремя сотнями строк таблицы страница ощутимо замирает. Лечится это двумя независимыми способами: убрать измерения из цикла и уменьшить число правок живого дерева. Второй способ и есть фрагмент.

DocumentFragment — узел без тега. У него есть дети, но нет родителя, он не участвует в раскладке и ничего не рисует. Когда фрагмент вставляют в документ, внутрь уезжают его дети, а сам он остаётся пустой оболочкой: это перемещение, а не копирование.

const frag = document.createDocumentFragment();
frag.append(document.createElement("li"), document.createElement("li"));

console.log(frag.children.length);
console.log(frag.parentNode);

const box = document.querySelector("#box");
box.append(frag);

console.log(box.children.length);
console.log(frag.children.length);

const frag = document.createDocumentFragment();
const p = document.createElement("p");
p.id = "hint";
p.textContent = "Черновик";
frag.append(p);

console.log(frag.querySelector("#hint").textContent);
console.log(document.getElementById("hint"));
console.log(frag.innerHTML);
console.log(frag.nodeType === Node.DOCUMENT_FRAGMENT_NODE);

Рецепт всегда один: создаём фрагмент, набиваем его в цикле, а живое дерево трогаем ровно один раз — последней строкой. Внутри цикла ни одного обращения к документу, значит браузеру нечего пересчитывать.

const data = ["Купить хлеб", "Позвонить маме", "Сдать отчёт"];
const frag = document.createDocumentFragment();

for (const text of data) {
  const li = document.createElement("li");
  li.textContent = text;
  frag.append(li); // правок документа пока ноль
}

const list = document.querySelector("#tasks");
list.append(frag); // единственная правка живого дерева

console.log(list.children.length);
console.log(list.firstElementChild.textContent);

Приятный побочный эффект: ссылки на созданные элементы остаются у вас в руках. Можно навешивать обработчики и складывать узлы в Map ещё до вставки — в отличие от сборки страницы через строку разметки, где элементы приходится потом искать заново.

Фрагмент не спасёт от чтения offsetHeight внутри цикла. Сначала уберите измерения, и только потом сокращайте число вставок — порядок именно такой.

Когда узел сложнее одного тега, собирать его руками утомительно. Тег <template> хранит разметку в спящем виде: содержимое не рисуется, картинки не грузятся, скрипты не выполняются. А свойство content — это ровно наш DocumentFragment, который можно клонировать сколько угодно раз.

const tpl = document.querySelector("#row");
console.log(tpl.content instanceof DocumentFragment);

const out = document.querySelector("#out");
const frag = document.createDocumentFragment();

for (const name of ["Анна", "Борис"]) {
  const item = tpl.content.cloneNode(true); // копия, оригинал не трогаем
  item.querySelector("span").textContent = name;
  frag.append(item);
}

out.append(frag);

console.log(out.children.length);
console.log(out.lastElementChild.textContent);

Важно клонировать tpl.content, а не вставлять его напрямую: прямая вставка опустошит шаблон, и на второй итерации копировать будет нечего. И обязательно с аргументом true — иначе скопируется пустая оболочка без потомков.

Фрагмент — инструмент против количества, а не ритуал. Для трёх пунктов меню выигрыш неизмерим, а лишняя переменная в коде вполне заметна. Часто задачу закрывает replaceChildren: он и чистит контейнер, и вставляет новое содержимое одной операцией.

const feed = document.querySelector("#feed");

const items = ["Новое 1", "Новое 2", "Новое 3"].map((text) => {
  const li = document.createElement("li");
  li.textContent = text;
  return li;
});

feed.replaceChildren(...items);

console.log(feed.children.length);
console.log(feed.firstElementChild.textContent);

Правило простое: сначала измерьте, потом оптимизируйте. Если список рисуется на каждое нажатие клавиши и в нём триста строк — фрагмент или replaceChildren окупятся сразу. Если он строится один раз при загрузке и состоит из пяти пунктов — берите то, что понятнее читать.