动态绘制HTML表时如何“暂停”刷新页面

I am creating a large table dynamically using Javascript. I have realised the time taken to add a new row grows exponentially as the number of rows increase.

我正在使用Javascript动态创建一个大表。我已经意识到添加新行所花费的时间随着行数的增加呈指数增长。

I suspect the Page is getting refreshed in each loop per row (I am also adding input elements of type text on each cell)

我怀疑每行每个循环都会刷新页面(我还在每个单元格上添加了text类型的输入元素)

Is there a way to stop the page "refreshing" until I am done with the whole table?

有没有办法阻止页面“刷新”,直到我完成整个表?

Any suggestion on how to do this or go around it?

有关如何做到这一点或绕过它的任何建议?

I have tried all the suggestions above, but I am still getting the performance bottlenecks.

我已经尝试了上面的所有建议,但我仍然遇到了性能瓶颈。

I tried to analyse line after line, and I have noted that document.getElementById() is one of the lines taking a lot of time to execute when the table is very large. I am using getElementById() to dynamically access an HTML input of type text loaded on each cell of the table.

我尝试逐行分析,并且我注意到document.getElementById()是表格非常大时需要花费大量时间才能执行的行之一。我正在使用getElementById()来动态访问在表的每个单元格上加载的文本类型的HTML输入。

Any ideas on which DOM method I should use instead of getElementById()?

我应该使用哪种DOM方法而不是getElementById()的任何想法?

5 个解决方案

#1

You can create the table object without adding it to the document tree, add all the rows and then append the table object to the document tree.

您可以创建表对象而不将其添加到文档树,添加所有行,然后将表对象附加到文档树。

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

#2

Maybe build your table as a big string of HTML, and then set the .innerHTML of a container div to that string when you've finished?

也许将您的表构建为一个大的HTML字符串,然后在完成后将容器div的.innerHTML设置为该字符串?

#3

Did you try the <tbody> tag when you create the table? It is possible browsers optimize that and don't "refresh" the table while populating it.

在创建表时是否尝试了标记?有可能浏览器优化它,并且在填充表时不“刷新”表。

#4

If your cells sizes are the same for each row then you will be able to specify style table-layout:fixed - this will give you the greatest performance gain as the browser won't have to recalculate cells sizes each time a row is added

如果每行的单元格大小相同,那么您将能够指定样式表格布局:固定 - 这将为您提供最大的性能提升,因为每次添加行时浏览器都不必重新计算单元格大小

#5

Use the table DOM to loop trough the rows and cells to populate them, instead of using document.getElementByID() to get each individual cell.

使用表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
}

Hope that helps someone else... Cheers.

希望能帮助别人......干杯。

#1