InnerHTML нам поможет

Чтобы уменьшить отрисовку отдельных частей документа в процессе добавления какого‑либо большого фрагмента, мы можем сохранять HTML‑код в виде текста и лишь на финальном этапе вставлять его в DOM‑дерево. Давайте рассмотрим следующий пример:

var i, j, el, table, tbody, row, cell;

el = document.createElement("div");

document.body.appendChild(el);

table = document.createElement("table");

el.appendChild(table);

tbody = document.createElement("tbody");

table.appendChild(tbody);

for (i = 0; i < 1000; i++) {

row = document.createElement("tr");

for (j = 0; j < 5; j++) {

cell = document.createElement("td");

row.appendChild(cell);

}

tbody.appendChild(row);

}

Его можно значительно ускорить, если добавлять узлы не последовательно один за другим, а сначала создав HTML‑строку со всем необходимым кодом, которая будет вставлена через innerHTML в конце всех операций.

В данном примере кроме уже указанного ускорения еще используется первоначальное создание массива элементов, которые можно объединить через свойство join в строку. Для больших строк это работает быстрее, чем последовательная конкатенация отдельных частей.

var i, j, el, idx, html;

idx = 0;

html = [];

html[idx++] = "<table>";

for (i = 0; i < 1000; i++) {

html[idx++] = "<tr>";

for (j = 0; j < 5; j++) {

html[idx++] = "<td></td>";

}

html[idx++] = "</tr>";

}

html[idx++] = "</table>";

el = document.createElement("div");

document.body.appendChild(el);

el.innerHTML = html.join("");