JavaScript

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

2010-11-14
3分で読了
更新: 2025-12-14

目次

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

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

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

    
 
  • このリストに結果を追記する
    •

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

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

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

for (var i = -1; ++i < n;) {
 var $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 += "
  • " + i + "
    • ";
}
$result.append(li);

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

    var li = "";
for (var i = -1; ++i < n;) {
 li += "
  • " + i + "
    • ";
}
$result[0].innerHTML = li;

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

    var li = [];
for (var i = -1; ++i < n;) {
 li.push("
  • " + i + "
    • ");
}
$result.append(li.join(""));

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

    var li = [];
for (var i = -1; ++i < n;) {
 li.push("
  • " + i + "
    • ");
}
$result[0].innerHTML = li.join("");

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

    var $li = $();
for (var i = -1; ++i < n;) {
 $li.push($("
  • ").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」を参照してください。

    以上です。

    この記事をシェア

    関連記事