JavaScript DocumentFragment — вставка без зайвих перемальовувань

DocumentFragment — легкий контейнер поза документом: у ньому збирають вузли, а потім вставляють у сторінку одним рухом.

правити

Загальний опис

Кожна вставка в живий DOM може змусити браузер перерахувати макет. Додаєш сотню рядків у цикл — платиш за це сто разів.

Фрагмент існує поза документом, тож жодна операція в ньому нічого не перемальовує. А коли він вставляється у сторінку, всередину переїжджають лише його діти — сам фрагмент зникає, зайвої обгортки в розмітці не з'являється.

Отже: один перерахунок замість ста.

Його ж повертає <template>: template.content — це і є DocumentFragment із готовою розміткою, яку лишається клонувати.

правити

Порада

Сучасні браузери й самі непогано групують зміни, тож на десятку вузлів різниці не побачиш. А от на сотнях і тисячах — побачиш добре.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const frag = document.createDocumentFragment();

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
DocumentFragment	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
DocumentFragment	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="list"></ul>

const fragment = document.createDocumentFragment();

for (let i = 1; i <= 100; i++) {
    const item = document.createElement('li');
    item.textContent = 'Рядок ' + i;
    // це поза документом — жодного перемальовування
    fragment.append(item);
}

// одна вставка — один перерахунок
document.getElementById('list').append(fragment);

// після вставки фрагмент порожній: діти переїхали
console.log(fragment.childNodes.length); // 0