Я работаю с динамической таблицей HTML, максимальное число строк которой составляет около 7000.Код ниже показывает, как текущий дизайн заполняет таблицу строками данных.Производительность в Chrome отличная, но IE и Edge ужасно медленные.Как вы можете видеть, приведенный ниже код в основном присваивает таблицу строковой переменной «mTable».Затем внутри полученного объекта вызывается innerHTML.Цикл while предназначен только для вставки пустых строк в случае, если возвращается несколько записей.Стол перетаскиваемый, сортируемый и может быть открыт в новом окне.Все три из этих функций становятся невероятно медленными в IE, когда размер таблицы увеличивается.На самом деле, я могу наблюдать за заполнением таблицы в новой оконной функции - это очень медленно.Edge обладает лучшими показателями в этих трех областях, но для его заполнения все равно требуется слишком много времени.Я много читал об этом, хотя большая часть литературы просто описывает проблему.Было несколько идей, в которых говорилось о том, чтобы установить макет таблицы на фиксированный и чтобы каждая строка занимала равное количество места, но это, похоже, не помогло.Я также видел некоторые старые решения, которые включали запуск Chrome внутри IE, но это больше не похоже на вариант.Когда я поделился своим кодом, я подумал, что, возможно, кто-то может дать некоторое представление о лучшем подходе.Заранее благодарю за любые полезные ответы.
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();}
}