Как «приостановить» обновление страницы при динамическом рисовании HTML-таблицы

Question

Я создаю большую таблицу динамически, используя Javascript. Я понял, что время, затрачиваемое на добавление новой строки, растет по экспоненте по мере увеличения числа строк.

Я подозреваю, что страница обновляется в каждом цикле в строке (я также добавляю элементы ввода типа text в каждую ячейку)

Есть ли способ остановить "обновление" страницы, пока я не закончу со всей таблицей?

Любое предложение о том, как это сделать или обойти?

---

Я перепробовал все вышеизложенные предложения, но я все еще вижу узкие места в производительности.

Я пытался анализировать строку за строкой, и я заметил, что document.getElementById () - одна из строк, выполнение которой занимает много времени, когда таблица очень большая. Я использую getElementById () для динамического доступа к вводу HTML типа text, загруженного в каждую ячейку таблицы.

Есть идеи, какой метод DOM следует использовать вместо getElementById ()?

Answer 1

Вы можете создать объект таблицы, не добавляя его в дерево документа, добавить все строки и затем добавить объект таблицы в дерево документа.

var theTable = document.createElement("table");
// ... 
// add all the rows to theTable
// ...
document.body.appendChild(theTable);

Answer 2

Может быть, построить вашу таблицу как большую строку HTML, а затем установить .innerHTML контейнера div в эту строку, когда вы закончите?

Answer 3

Используйте таблицу DOM для циклического перемещения по строкам и ячейкам, чтобы заполнить их, вместо использования document.getElementByID () для получения каждой отдельной ячейки.

E.g.
thisTable = document.getElementByID('mytable');//get the table
oneRow = thisTable.rows[0].cells; //for instance the first row
for (var colCount = 0; colCount <totalCols; colCount ++)
{
   oneCell =oneRow[colCount];
   oneCell.childNodes[0].value = 'test';//if your cell contains an input element
   oneCell.innerHTML = 'test'; // simply write on the cell directly
}

Надеюсь, это поможет кому-то еще ... Приветствия.

Answer 4

Если ваши размеры ячеек одинаковы для каждой строки, вы сможете указать стиль table-layout:fixed - это даст вам наибольший прирост производительности, поскольку браузеру не придется пересчитывать размеры ячеек при каждом добавлении строки

Answer 5

Пробовали ли вы тег

при создании таблицы? Возможно, браузеры оптимизируют это и не обновляют таблицу во время ее заполнения.