Question

我必须动态构建一个包含+450行/ +90列的表，并在Internet Explorer中显示它。我在过去的两天里一直在大力优化，最后创建了一个表行的集合作为一个很长的字符串，并将其分配给表的tBody的innerHTML。

它在Chrome / Mozilla中工作正常，重排需要大约0.2秒，但在Internet Explorer中它很慢。渲染需要大约4秒钟（我说“约”因为如果控制台打开（用于时间测量），渲染需要19秒）。另一个问题是IE9及以下版本甚至不支持innerHTML。所以问题是：在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;
}

提前致谢！
编辑：表格本身：

<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等等的例子。

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

Internet Explorer

1 个答案: