jQueryで多数の要素を生成して追加する場合のパフォーマンスについて

jQuery で多数の要素を生成して別の要素に追加する場合、どんな書き方が速いのかなーと思って試してみました。

今回は、3,000回ループを回して既存の要素に追加していくというのを、パッと思いつく感じの6パターンで試してみました。

さて、HTMLのソースは次の通り単純です。

<ul id="result">
    <li>このリストに結果を追記する</li>
</ul>

また、次の1文は最初に定義しておきます。

var $result = $("#result"), n = 3000;

1 : 毎回要素を生成して append() していく

for (var i = -1; ++i < n;) {
    var $li = $("<li></li>").text(i).attr("id","id_" + i).addClass("class_" + i);
    $result.append($li);
}

2-1 : 要素を文字列として結合して最後に append() する

var li = "";
for (var i = -1; ++i < n;) {
    li += "<li id='id_" + i + "' class='class_" + i + "'>" + i + "</li>";
}
$result.append(li);

2-2 : 要素を文字列として結合して最後に innerHTML する

var li = "";
for (var i = -1; ++i < n;) {
    li += "<li id='id_" + i + "' class='class_" + i + "'>" + i + "</li>";
}
$result[0].innerHTML = li;

3-1 : 要素を文字列として配列に push() して最後に join() して append() する

var li = [];
for (var i = -1; ++i < n;) {
    li.push("<li id='id_" + i + "' class='class_" + i + "'>" + i + "</li>");
}
$result.append(li.join(""));

3-2 : 要素を文字列として配列に push() して最後に join() して innerHTML する

var li = [];
for (var i = -1; ++i < n;) {
    li.push("<li id='id_" + i + "' class='class_" + i + "'>" + i + "</li>");
}
$result[0].innerHTML = li.join("");

4 : jQuery オブジェクトに HTML を push() して最後に append() する

var $li = $();
for (var i = -1; ++i < n;) {
    $li.push($("<li></li>").text(i).attr("id","id_" + i).addClass("class_" + i)[0]);
}
$result.append($li);

結果

これらのパターンをそれぞれ5回計測してみました(単位 : ミリ秒)。

1   : 1286, 1354, 1322, 1318, 1294 [平均 : 1314]
2-1 :  663,  659,  654,  644,  647 [平均 :  653]
2-2 :  300,  301,  297,  295,  297 [平均 :  298]
3-1 :  662,  641,  649,  658,  649 [平均 :  652]
3-2 :  297,  294,  290,  294,  293 [平均 :  294]
4   : 1004, 1003, 1024, 1002, 1027 [平均 : 1012]

結果を見ると、文字列で要素を作っておいて、最後にまとめてDOMに追加する方法が速いですね。単純に文字列を連結するか、一度配列にして join() するかは好みですね。

DOMに追加するところは、append() よりも innerHTML の方が圧倒的に速いですね。これについては、激しくお勧めの『jQueryクックブック』の「レシピ 5.14」を参照してください。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...