为什么 HTML 表格在资源管理器和边缘中呈现如此缓慢

Question

我正在使用一个动态HTML表，最大行数约为7,000。 下面的代码显示了当前设计如何使用数据行填充表。 Chrome的性能很好，但IE和Edge非常慢。 如您所见，下面的代码基本上是将表分配给字符串变量"mTable"。然后在生成的对象上调用 innerHTML。 while 循环只是在返回很少记录的情况下插入空行。 该表是可拖动、可排序的，并且可以在新窗口中打开。 一旦表的大小增加，所有这三个函数在IE中都会变得非常慢。 事实上，我实际上可以看到表格被填充到新的窗口函数中 - 它就是这么慢。 Edge 在这三个方面具有更好的性能，但填充仍然需要太多时间。 我已经做了很多关于这个问题的阅读，尽管大多数文献只是描述了这个问题。 有一些想法提到将表格的布局设置为固定并让每行占用相等的空间，但这似乎没有帮助。 我还看到一些涉及在IE中运行chrome的旧解决方案，但这似乎不再是一种选择。 我想通过分享我的代码，也许有人可能会提供一些关于更好方法的见解。 提前感谢您的任何有用回复。

function makeTable(param1){

paramJ = JSON.parse(param1);
mTable="<table id='myTable' class='Table1 tablesorter rbody' style='color:RGB(255,255,255);'><thead><tr>"+
"<th id='topRC' class='td1 tr1' onclick='resetHighlight();' style='width:20px;'></th>"+
"<th class='td1 tr1' >OBJECTID</th>"+
"<th class='td1 tr1' >Locomotive ID</th>"+
"<th class='td1 tr1' >Signal ID</th>"+
"<th class='td1 tr1' >Avg RSSI</th>"+
"<th class='td1 tr1' >Signal Strength</th>"+
"<th class='td1 tr1' >Count</th></tr></thead>";  
iterTable=1;
mTable+="<tbody id='tbodyID'>";
for(i=0;i<paramJ.features.length;i++){
mTable+="<tr class='rHighlight rbody' style='background-color:RGB(75,75,75);'><td class='td1 tdClick' style='width:20px;' ondblclick='resetHighlight();funGeom(this);'></td><td class='td1'>"+iterTable+"</td>";
mTable+="<td class='td1'>"+paramJ.features[i].attributes.VAL1+"</td>";
mTable+="<td class='td1'>"+paramJ.features[i].attributes.VAL2+"</td>";
mTable+="<td class='td1'>"+paramJ.features[i].attributes.VAL3.toFixed(0)+"</td>";
mTable+="<td class='td1'>"+paramJ.features[i].attributes.VAL4+"</td>";
mTable+="<td class='td1'>"+paramJ.features[i].attributes.VAL6+"</td>";
mTable+="</tr>";
iterTable+=1;
}
while(iterTable<100){
mTable+="<tr class='rbody' style='background-color:RGB(75,75,75);'><td class='td1' style='width:20px;'></td><td class='td1'></td>";
mTable+="<td class='td1'></td>";
mTable+="<td class='td1'></td>";
mTable+="<td class='td1'></td>";
mTable+="<td class='td1'></td>";
mTable+="<td class='td1'></td>";
mTable+="</tr>";
iterTable+=1;
}
mTable+="</tbody></table>";
document.getElementById("containerR2").innerHTML=mTable;
//below is for sorting and opening table in new window
$("#myTable").tablesorter( { headers: { 0: { sorter: false} }} ); 
if(winOpen=="yes"){newTable();}        
}

Answer 1

我建议采用某种类型的主键，例如如果我猜对了OBJECTID，并将其用作字典的键。然后使用document.createElement用 DOM 元素填充字典。每当您获取数据(初始加载、AJAX 等(时，这将只执行一次。现在，当您执行任何其他操作时，只需一遍又一遍地myTable.appendChild(tableDict[key])即可将节点添加到表中。可以排序，也可以不排序，具体取决于运行超过keys 的 for 循环。

如果您想要更快的速度，或者如果我的建议没有帮助，请使用异步将内容添加到tableDict并逐步将它们放在 myTable 上。不过我认为没有必要。