DOM操作を避けてjQueryのパフォーマンスを改善する掟です。
こんなコードがあるとしましょう。
パフォーマンスの悪い例
var list = [....]; // 長さ100の配列とする
for (var i in list) {
var li = document.createElement("li");
$(li)
.attr("id", "li" + i)
.text(list[i]);
$("ul").append(li);
}
改善したコード
var list = [....]; // 長さ100の配列とする
var li = "";
for (var i in list) {
li += "<li id='li" + i "'>" + list[i] + "</li>";
}
$("ul").html(li);
まとめ
- document.createElementの代わりにHTMLの文字列を作る
- jQueryオブジェクトに属性やテキストを設定するのではなく、直接HTML文字列に書く
- for文内毎回appendの代わりにhtml()を使う
実際のプロジェクトでやってみたら10倍以上は速くなりました。
とは言ってもこれはIE6でのパフォーマンスで、
FirefoxやIE8だと悪い例のコードても遅いとは実感できないくらいでした。
ちなみに
$(li).attr(…).val(…).text(…)の方は読みやすいので結構気に入ったんですけど。。。
Tags: jQuery, Performance, Tips
You can leave a response, or trackback from your own site.