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」を参照してください。

以上です。

Recent Entries