在 Internet Explorer 中非常慢 reflow/layout

Question

我必须动态构建一个具有 +450 行/+90 列的 table 并在 Internet Explorer 中显示它。在过去的两天里，我一直在大力优化，最终创建了一个 table 行的集合作为一个非常长的字符串，并将其分配给 [=30= 的 tBody 的内部 HTML ].

它在 Chrome/Mozilla 中工作得很好，回流大约需要 0.2 秒，但在 Internet Explorer 中非常慢。渲染大约需要 4 秒（我说 "about" 因为如果控制台打开（用于时间测量）则渲染需要 19 秒）。另一个问题是 innerHTML 在 IE9 及以下版本中甚至不被支持。所以问题是：在 IE9 中尽可能快地呈现大量 HTML 的最快方法是什么？
HTML 样本：

<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>...

以此类推，共4178521个字符。
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;
}

提前致谢！
编辑：table 本身：

<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>

Answer 1

我认为只有惰性渲染才能帮到你。这样您将减少页面上 HTML 节点的数量并使其更轻。您不需要渲染屏幕上不可见的行...

有jQuery、React、Polymer...等例子。

为了使绘画看起来更快，您可以批量插入而不是一次插入整个 table，而是使用 requestAnimationFrame 等方法分块插入。

在 Internet Explorer 中非常慢 reflow/layout

Very slow reflow/layout in Internet Explorer

html

javascript

internet-explorer

reflow

internet-explorer-9