3

所以我必须渲染一个有 1000 行和 1000 列的表。因此，这个 链接，似乎最好的方法是在 javascript 中构建 HTML 字符串，然后一次性将其插入到 DOM 中。我为此做了一个简单的例子，并将其与其他几种方法进行比较。最后，这真的是我想出来的最快的方法。但这仍然不够令人满意。所以我的问题是，有没有比下面的例子更快的方法。

var startTime = new Date().getTime(),
    tableString = "<table>",
    body = document.getElementsByTagName('body')[0],
    div = document.createElement('div'),
    finalResult = 0,
    endTime = 0,
    result = 0;

for (row = 0; row < 1000; row += 1) {

    tableString += "<tr>";

    for (col = 0; col < 1000; col += 1) {

        tableString += "<td>" + "testing" + "</td>";
    }
    tableString += "</tr";
}

tableString += "</table>";
div.innerHTML = tableString;
body.appendChild(div);

endTime  = new Date().getTime();
console.log(endTime - startTime);
4

1 回答 1

3

不管是什么语言，大量的字符串连接都会给你带来运行时的麻烦。最快的方法是通过原生 JavaScript DOM API，同时在文档片段中构建表格。在函数结束时，将该文档片段插入文档中所需的位置。

像这样的东西将创建一个包含 1000 行和每行 20 个单元格的表：

function makeTable() {
    var fragment = document.createDocumentFragment();

    for (var i = 0; i < 1000; i++) {
        var row = document.createElement('tr');
        fragment.appendChild(row);

        for (var j = 0; j < 20; j++) {
            var cell = document.createElement('td');
            cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString()));
            row.appendChild(cell);
        }
    }

    var target = document.getElementById('target');
    target.appendChild(fragment);
}

JSFiddle：http: //jsfiddle.net/KbNLb/4/

编辑刚刚看到你做了 1000x1000 - 那是一百万个单元格，无论如何都会很慢。我真的希望百万表格单元格不是您的实际用例。;-)

于 2013-08-06T06:51:59.470 回答