为什么使用 insertCell 创建单元格这么慢？答案

【问题标题】：Why is creating cells using insertCell so slow?为什么使用 insertCell 创建单元格这么慢？
【发布时间】：2015-05-21 01:08:07
【问题描述】：

我正在尝试动态创建 1500 行，每行有 4 个单元格。在 Internet Explorer 11 中，它花费了太多时间 - 36 秒。我使用了浏览器的分析器，发现insertCell 函数本身花费了 30 秒（总共，对于所有 1500×4 调用）。

如何提高建表功能的性能？ insertCell 有什么替代品吗？

function createRow(tableObj, newRowIndex, rowData, rowId) {
    var newCell, colID, newRow, i;

    newRow = tableObj.insertRow(newRowIndex);
    newRow.id = tableObj.id.replace(/DATATABLE/, "R" + rowId);
    colID = newRow.id + "C";
    for (i in rowData.Cells) { // rowData.Cells = 4
        if (rowData.Cells.hasOwnProperty(i)) {
            newCell = newRow.insertCell(i);
            newCell.id = colID + i;
            newCell.className = "c" + rowData.Cells[i].id;
            newCell.innerHTML = rowData.Cells[i].data;
        }
    }
}

【问题讨论】：

在插入页面之前尝试构建整个 dom？

标签： javascript html dom internet-explorer-11

【解决方案1】：

每次您对 DOM 进行更改时，浏览器都有很多工作要做。您应该尝试在更大的块中进行这些更改以避免重复该工作。

例如，如果您的代码通过设置 innerHTML 创建元素，那么最好构建整个 HTML 字符串并设置它（如果可能）。 Javascript 很快……但浏览器 HTML 解析器是手动优化的 C++ 代码，实现者在其上投入了大量资金以使其尽可能快。

如果您通过创建元素并将事件处理程序连接到闭包来工作（通过设置 HTML 无法完成的事情），那么最好在 DOM 之外构建整个东西并使用 appendChild 仅在结束。

【讨论】：

【解决方案2】：

我意识到这是一个老问题。您是否尝试过创建单个 TR，然后使用 cloneNode() 并重复附加它。我猜克隆操作至少会在一次操作中创建单元格。

【讨论】：