Question

我正在尝试动态创建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;
        }
    }
}

Answer 1

每当你对DOM进行更改时，borwser都有很多工作要做。你应该尝试在更大的块中进行这些更改，以避免重复这项工作。

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

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

Answer 2

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

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

2 个答案: