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 行で 1 行あたり 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 を実行したのを見たところです。これは 100 万個のセルであり、何があっても遅くなります。百万のテーブルセルが実際のユースケースではないことを本当に願っています. ;-)

于 2013-08-06T06:51:59.470 に答える