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