jQueryのパフォーマンス改善

2015/10/4 jQuery

jQueryでパフォーマンスを意識しないといけない場合、いくつか高速化するための例をあげます。

・セレクタはid属性を指定する

$(“a”)より$(“#a”)の方が処理が早いです。セレクタがid属性を指定することが可能であればid属性を指定するようにした方が良いです。

・jQueryオブジェクトはJavaScript変数に格納する

$(“#id”)を何度も使う場合があると思います。

例えば以下のようなソースです。

$("id").attr(～)
$("id").append(～)
$("id").html(～)

$("id").attr(～)

$("id").append(～)

$("id").html(～)

このようなソースの場合は、$(“id”)を変数に格納して使うようにします。

var id = $("id");
id.attr(～)
id.append(～)
id.html(～)

var id = $("id");

id.attr(～)

id.append(～)

id.html(～)

・ループ内にメソッドを使用する場合は違う方法でできるか考える

例えば、ulタグにliタグを複数追加したいとします。

ソースは以下のような感じです。

for(var i = 0;i < 10;i++){
  $("ul").append("<li>" + i + "</li>");
}

for(var i = 0;i < 10;i++){

$("ul").append("<li>" + i + "</li>");

}

基本的にjQueryのメソッドは重いので多用は避けるべきです。

JavaScriptでできるように以下のようにコーディングすべきです。

var ul = $("ul");
var li;
for(var i = 0;i < 10;i++){
  li = li + "<li>" + i + "</li>";
}
ul.append(li);

var ul = $("ul");

var li;

for(var i = 0;i < 10;i++){

li = li + "<li>" + i + "</li>";

}

ul.append(li);

・メソッドチェーンする

メソッドチェーンすることによってセレクタの捜査処理が軽減されるため、なるべくメソッドチェーンするようにします。

$("id").attr(～)
$("id").append(～)
$("id").html(～)

$("id").attr(～)

$("id").append(～)

$("id").html(～)

上記のソースなら以下のように書き換えます。

$("id").attr(～).append(～).html(～)

1	$("id").attr(～).append(～).html(～)

・セレクタを単純に書く

セレクタは要素を探す処理なので複雑だと処理が重くなります。

$(“#ul a”)というセレクタがあるとします。この場合はfindメソッドを使用してセレクタの書き方はid属性だけにします。

$(“id”).find(“a”)とする方が早くなります。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^