jQueryでパフォーマンスを意識しないといけない場合、いくつか高速化するための例をあげます。
・セレクタはid属性を指定する
$(“a”)より$(“#a”)の方が処理が早いです。セレクタがid属性を指定することが可能であればid属性を指定するようにした方が良いです。
・jQueryオブジェクトはJavaScript変数に格納する
$(“#id”)を何度も使う場合があると思います。
例えば以下のようなソースです。
|
1 2 3 |
$("id").attr(～) $("id").append(～) $("id").html(～) |
このようなソースの場合は、$(“id”)を変数に格納して使うようにします。
|
1 2 3 4 |
var id = $("id"); id.attr(～) id.append(～) id.html(～) |
・ループ内にメソッドを使用する場合は違う方法でできるか考える
例えば、ulタグにliタグを複数追加したいとします。
ソースは以下のような感じです。
|
1 2 3 |
for(var i = 0;i < 10;i++){ $("ul").append("<li>" + i + "</li>"); } |
基本的にjQueryのメソッドは重いので多用は避けるべきです。
JavaScriptでできるように以下のようにコーディングすべきです。
|
1 2 3 4 5 6 |
var ul = $("ul"); var li; for(var i = 0;i < 10;i++){ li = li + "<li>" + i + "</li>"; } ul.append(li); |
・メソッドチェーンする
メソッドチェーンすることによってセレクタの捜査処理が軽減されるため、なるべくメソッドチェーンするようにします。
|
1 2 3 |
$("id").attr(～) $("id").append(～) $("id").html(～) |
上記のソースなら以下のように書き換えます。
|
1 |
$("id").attr(～).append(～).html(～) |
・セレクタを単純に書く
セレクタは要素を探す処理なので複雑だと処理が重くなります。
$(“#ul a”)というセレクタがあるとします。この場合はfindメソッドを使用してセレクタの書き方はid属性だけにします。
$(“id”).find(“a”)とする方が早くなります。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級
