I have to build a table with +450 row / +90 columns dynamically and show it in Internet Explorer. I've been heavily optimizing for the last two days, and ended up creating a collection of table rows as a very long string and assigning it to the innerHTML of the tBody of the table.
it works just fine in Chrome/Mozilla, a reflow takes about .2 seconds, but it's very slow in Internet Explorer. it takes about 4 seconds to render (i say "about" because if the console is open (for time measurement) it takes 19 seconds to render). Another problem is that innerHTML is not even supported in IE9 and below. So the question is: What's the fastest way to render a whole lot of HTML as fast as possible in IE9?
HTML Sample:
<tr class="data-row" ><td class="hidden" style="width: -21px; padding:
10px;">"1"</td><tdclass="structureCatagory" style="width: 119px; padding:
10px;">"0381"</td><td class="structureCatagory" style="width: 139px;
padding: 10px;">"Some text"</td><td class="structureCatagory"
style="width: 139px; padding: 0px;"><img src="/Content/Images/info.png"
onclick="Interface.OnImageClicked($(this))" ></td>...
And so forth for a total of 4178521 characters.
Javascript:
function Update() {
var displayData = Model.GetData();
if (displayData == undefined || displayData.length == 0)
return false;
var rows = "", len = displayData.length;
for (var i = 0; i < len; i++) rows += GetRow(displayData[i]);
//until here it's very fast
GlobalQueries.dataTableBody[0].innerHTML = rows;
//^ this line takes alot of time
return true;
}
Thanks in advance!
Edit: The table itself:
<div class="grid">
<table class="fixed">
<tbody></tbody>
</table>
</div>
<style>
.grid { margin-top: 240px; margin-left: 10px; }
.grid td, .header-row td { border: 1px solid black; }
table.fixed { table-layout: fixed; }
</style>
I think only lazy rendering will help you here. This way you will reduce the amount of HTML nodes on the page and make it lighter. You don't need to render rows that are not visible on the screen...
There are examples with jQuery, React, Polymer ... and so on.
To make the paint look faster you can batch the inserts and not insert the entire table at once but in chunks with methods like requestAnimationFrame.