Проблема: `table.innerHTML += ...` в цикле вызывает много последовательных чтений/записей DOM и перерисовок, плюс вычисления `computeCell` выполняются в основном потоке. Предложения по улучшению и компромиссы:
Ключевые идеи
- Не делать `innerHTML +=` в цикле — это дорого.
- Батчинг DOM-операций: собрать раз и вставить один раз (или вставлять пачками).
- Вынести тяжёлые вычисления из основного потока (веб-воркер) или выполнять их по частям, чтобы UI не блокировался.
- Для очень больших таблиц — виртуализация (рендерить только видимую часть).
Конкретные варианты и компромиссы
1) Построить один HTML и назначить один раз
- Быстро и просто; минимизирует рефлоу.
- Компромисс: требует память для строки и может быть тяжело, если таблица огромная.
Пример:
let html = '';
for (let i = 0; i < rows.length; i++) {
html += '';
for (let j = 0; j < cols; j++) {
html += `${computeCell(i, j)}`;
}
html += '';
}
table.tBodies[0].innerHTML = html;
(в тексте: исходный цикл был с $i=0$, $i<\text{rows.length}$, и т.д.)
2) Использовать DocumentFragment / createElement + одна вставка
- Более «DOM-правильный» подход, позволяет создавать узлы без перерисовок.
- Чуть медленнее по строкотворчеству, чем единый innerHTML, но безопаснее при необходимости ссылок на элементы.
Пример:
const frag = document.createDocumentFragment();
for (let i = 0; i < rows.length; i++) {
const tr = document.createElement('tr');
for (let j = 0; j < cols; j++) {
const td = document.createElement('td');
td.textContent = computeCell(i, j);
tr.appendChild(td);
}
frag.appendChild(tr);
}
table.tBodies[0].appendChild(frag);
3) Батчинг / прогрессивный рендер (не блокировать UI)
- Делать пачками по $N$ строк (напр., $N=50$–$200$) с использованием requestIdleCallback / requestAnimationFrame / setTimeout. Позволяет оставаться отзывчивым.
- Компромисс: общая задержка до полной загрузки таблицы увеличивается, но интерфейс остаётся отзывчивым.
Схема: обработать $N$ строк, вставить их одним фрагментом, вызвать следующий тик.
Пример (псевдо):
const batchSize = 100; // или настроить адаптивно
let i = 0;
function renderBatch(deadline) {
const frag = document.createDocumentFragment();
let count = 0;
while (i < rows.length && count < batchSize) {
const tr = document.createElement('tr');
for (let j = 0; j < cols; j++) {
const td = document.createElement('td');
td.textContent = computeCell(i, j);
tr.appendChild(td);
}
frag.appendChild(tr);
i++; count++;
if (deadline && deadline.timeRemaining && deadline.timeRemaining() < 1) break;
}
table.tBodies[0].appendChild(frag);
if (i < rows.length) {
if (window.requestIdleCallback) requestIdleCallback(renderBatch);
else setTimeout(renderBatch, 0);
}
}
requestIdleCallback(renderBatch);
4) Вынести тяжёлые вычисления в Web Worker
- Если `computeCell(i,j)` CPU‑интенсивна, вычислять значения в воркере, возвращать массивы результатов и только потом обновлять DOM пачками.
- Компромисс: сложнее код (серилизация сообщений), нельзя изменять DOM в воркере, задержка передачи данных на главную страницу.
5) Виртуализация (windowing) для огромных таблиц
- Рендерить только видимые строки/столбцы; при скролле менять DOM. Используется в больших таблицах и списках.
- Компромисс: сложнее реализовать (позиционирование, высота строк), но масштабируемо и часто единственный способ рендерить миллионы ячеек.
Дополнительные оптимизации (малый эффект, но полезны)
- Установить CSS: `table { table-layout: fixed; }` и фиксированные ширины столбцов — уменьшит перерасчёты макета.
- Использовать `tbody` и заменять целиком `tbody` (вместо множества изменений внутри).
- Кэшировать результаты `computeCell` если значения не меняются (мемоизация).
- Уменьшить количество сложных стилей в ячейках (тяжёлые селекторы/теневые DOM-эффекты тормозят рендер).
Резюме (рекомендации)
- Если таблица умеренная: соберите строковую HTML и назначьте один раз (`innerHTML = html`) — самый простой и быстрый.
- Если нужно отзывчивость при большой таблице: батчинг + DocumentFragment или requestIdleCallback.
- Если `computeCell` тяжёлая: вычисления в Web Worker + пакетное обновление DOM.
- Для огромных объёмов — реализовать виртуализацию.