Как «приостановить» обновление страницы при динамическом рисовании HTML-таблицы
Я создаю большую таблицу динамически с помощью Javascript. Я понял, что время, необходимое для добавления новой строки, растет экспоненциально по мере увеличения количества строк.
Я подозреваю, что страница обновляется в каждом цикле для каждой строки (я также добавляю элементы ввода текста типа в каждую ячейку)
Есть ли способ остановить "обновление" страницы до тех пор, пока я не закончу работу со всей таблицей?
Любые предложения о том, как это сделать или обойти это?
Я испробовал все вышеперечисленные предложения, но у меня все еще возникают проблемы с производительностью.
Я пытался анализировать строку за строкой и заметил, что document.getElementById () - одна из строк, выполнение которых требует много времени, когда таблица очень большая. Я использую getElementById () для динамического доступа к вводу HTML типа текста, загруженного в каждую ячейку таблицы.
Есть идеи, какой метод DOM я должен использовать вместо getElementById ()?
Я использую только IE. Не пробовал в других ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Может быть, вы создадите свою таблицу как большую строку HTML, а затем установите .innerHTML контейнера div на эту строку, когда закончите?
Вы можете создать объект таблицы, не добавляя его в дерево документа, добавить все строки, а затем добавить объект таблицы в дерево документа.
var theTable = document.createElement("table");
// ...
// add all the rows to theTable
// ...
document.body.appendChild(theTable);
Тогда предположение, что задержка вызвана обновлением страницы, может быть неверным. Я видел, что некоторые люди создают большую строку и напрямую устанавливают html. Возможно, это не очень чистый подход, но он может быть лучшим с точки зрения скорости.
Да, моя проблема, похоже, в другом - на самом деле, когда я перебираю ячейки таблицы для их заполнения. Поэтому я согласен, что представленное здесь решение работает при создании пустой таблицы. Пожалуйста, посмотрите мой пост ниже.
Вы пробовали использовать тег <tbody> при создании таблицы? Возможно, браузеры оптимизируют это и не «обновляют» таблицу при ее заполнении.
Если размеры ваших ячеек одинаковы для каждой строки, вы сможете указать стиль table-layout:fixed - это даст вам наибольший прирост производительности, поскольку браузеру не придется пересчитывать размеры ячеек каждый раз, когда добавляется строка.
Используйте 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
}
Надеюсь, это поможет кому-то другому ... Ваше здоровье.
Какой браузер вы используете? Воспроизводится ли он в других браузерах?