どうも。
フロント向けの記事になります。
今回はみなさん大好きjQueryの処理をなるべく短くする書き方について書こうと思います。
セレクターの変数化
まずはセレクターの変数化からですが、animateとかでよくいじる要素があったとして、皆さんどのように弄ってますか？
|
1 2 3 4 5 6 7 |
$(function(){ $("div#hogehoge").animate({"left":"100px"},1000,function(){ $("div#hogehoge").animate({"left":"0px"},1000,function(){ $("div#hogehoge").animate({"top":"100px"},1000); }); }); }); |
こんな感じに書いたりしてませんでしょうか。
実はこのコードすごく遅いです。
|
1 |
$("#hogehoge") |
コードのここの部分。
この書き方で呼ばれると毎回jQueryさんはDOMを検索します。
同じ要素を使うだけなのに何度も検索して重たくなってしまいます。
そこで、何度も使う要素は変数化してしまいましょう。
さっきのコードを今書いた方法で書き直すと
|
1 2 3 4 5 6 7 8 9 |
var $hogehoge; $(function(){ $hogehoge = $("div#hogehoge"); $hogehoge.animate({"left":"100px"},1000,function(){ $hogehoge.animate({"left":"0px"},1000,function(){ $hogehoge.animate({"top":"100px"},1000); }); }); }); |
こんな感じに。
$(function(){})の外で変数宣言して、中で代入しているのは外の状態ではまだDOMの生成が終わってない可能性があるので$(document).ready()してから要素を代入してます。
さて、これで検索の手間が省けて１つ処理が短くなりました。
次にいきましょう。
セレクターの書き方
次にセレクターの書き方です。
さきほどのコードをみてみましょう。
|
1 2 3 4 5 6 7 8 9 |
var $hogehoge; $(function(){ $hogehoge = $("div#hogehoge"); $hogehoge.animate({"left":"100px"},1000,function(){ $hogehoge.animate({"left":"0px"},1000,function(){ $hogehoge.animate({"top":"100px"},1000); }); }); }); |
実はこのままの書き方だと少し遅くなります。
DOMの検索の順番がセレクターで変わってきます。
この書き方だと
全部のDIVをまず検索
その中に#hogehogeがあるか検索
という形になります。
IDは1つしかDOMの中にはありません。(そうじゃないといけない)
なので、最初のdiv部分を消せば１ステップ検索を早くできます。
ちなみにclassよりidの方が検索は早いです。
子要素と孫要素の選択については
|
1 2 |
$("#hogehoge a") $("#hogehoge > a") |
よりも
|
1 2 |
$("#hogehoge").find("a") $("#hogehoge").children("a") |
の方が早いです。
DOM操作の書き方
そして最後にDOMをいじるところに行きましょう。
ここまでいろいろ最適化してきましたが、最後のここが結構重要です。
最後は箇条書きに。
- なるべくいじる回数は減らす
- 同じ要素をいじるときはなるべく「.」でつなぐ
- いじるときは内容をまとめる
この３点に気をつけましょう。
まず１つめ、「なるべくいじる回数は減らす」ですが
|
1 2 3 |
for(var i=0;i<10;i++){ $("#hoge").append("hoge"); } |
よりも
|
1 2 3 4 5 |
var temp_html=""; for(var i=0;i<10;i++){ temp_html+="hoge"; } $("#hoge").append(temp_html); |
みたいにまとめていじれ！ってことですね。
２つめの「同じ要素をいじるときはなるべく「.」でつなぐ」ですが
|
1 2 3 4 |
var $hoge = $("#hoge"); $hoge.css("width","200px"); $hoge.attr("onClick","hoge_fire(1)"); $hoge.animate({"left":"200px"},1000); |
よりも
|
1 |
$("#hoge").css("width","200px").attr("onClick","hoge_fire(1)").animate({"left":"200px"},1000); |
の方が早い！ということです。
いちいち要素を設定しなおさない分早い感じです。
最後に「いじるときは内容をまとめる」ですが上とちょっと似てるんですが、
|
1 |
$("#hoge").css("width","100px").css("height","200px").css("background","#fff"); |
よりも
|
1 |
$("#hoge").css({"width":"100px","height":"200px","background":"#fff"}); |
のほうが早いということです。
以上でいろいろな方法で短くしました。
もっとjQueryの高速化はありますが、今回はこのぐらいにしておきます。
全体に言えることは「なるべくコンパクトに」って事ですね！
大規模なprojectになるとこういったチューニングが大切らしいです（経験したことはないです）
でも小規模からでもこういった事は意識して書いて損は無いので意識することをオススメします！
ではまた次の記事で。
みかみ
