jQueryを高速に動作させるためのポイント５つ

よっしー

2013.02.28

最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！

そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！

jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！

っというわけで、jQueryを使う上で気をつけたいポイントを挙げていこうではないか。

jQueryはホスティングされているものを使う

jQueryを使うときにはjQuery本体を読み込まねばなりません。あたりまえだ。jQueryはJavaScriptの拡張であり、ライブラリの読み込みなしには動作できないのである。

そのjQueryの本体を読み込まねばならないわけだが、方法は大きく２つあって、jQueryの本家サイトからダウンロードしてきて、サイトローカルにjQueryのライブラリをもつ方法と、jQueryをホスティングしている外部サイトにリンクをはるといった方法がある。

ダウンロードして設置する側の方が一般的な考えなのだろうが、jQueryはもはやJavaScriptのデファクトスタンダードであり、他のサイトでも当然ながら多く使用されているわけだ。そのとき、サイトローカルでjQueryをもつより、ホスティングされているライブラリを読み込めば、ブラウザ側のキャッシュがきく可能性が高いのだ。

jQueryはたかだか10kbyte程度の軽いものなのだが、されど10kbyte。ここはキャッシュのきく可能性の高いホスティングされているライブラリを使おうではないか。わざわざダウンロードしてくるより、タグをぽこっと書いてしまった方が楽だしね。

ホスティングされているのでメジャーなホストは、本家、Google、Microsoftがあるのだが、以下はGoogleでホスティングされているコードをロードした例である！Google様の偉大なリソースを拝借しようではないか。

※下記はjQuery v1.8.3を読み込む場合

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

セレクタの指定ではIDを使う

セレクタで指定する値はCSSチックに何でもかけてしまうわけであるが、jQueryとは言えど、中身はJavaScript。内部的にはJavaScriptの関数を使ってHTMLのDOMをさがしているのである。JavaScriptで一発でDOMを探す方法は「document.getElementById()」でIDを指定して検索するか、「document.getElementsByTagName()」でタグ名を指定して検索するか、「document.getElementsByName()」でname属性を指定して検索するかなのですが、一発で１要素を取得できるのはID指定だけ。便利だからといって、クラス属性とかで検索しまくってると、実はjQueryのなかではいろいろと大変なことをしなければならないのだ。

今までクラス属性を使ってた人は、積極的にID属性で指定するようにしようね！クラス指定はjQueryの最も遅いセレクタの一つだから、クラス指定ばっかしてると、jQueryに嫌われちゃうよ！

$("#target").css({'color':'red'});

ちなみにID指定でもこんな書き方は遅いよ！

$("div#target").css({'color':'red'});

なぜならば、target属性をもつdivタグをさがすために、divタグ全てをループするから。IDは基本的にページ一意だから、よけいなものはつけない方がよい。jQueryは律儀だから、結局無駄な処理がはしってしまうのだ。

ちなみに２番目に早いのはタグ指定。あんまセレクタでタグのみを指定するパターンも少ないと思うのだが、JavaScriptの関数で一撃取得できるのはIDとタグ名とname属性だ。

ちなみに、どうしてもクラス指定しないといけない場合はタグ名を書いてやるとちょっとjQuery的に助かる。なぜなら、全タグをループして探さなくてすむからだ。きみはjQueryから感謝される。ちょっとお仕事減ったと。

$(div.target).css({'color':'red'});

ちなみにモダンブラウザだと「document.getElementsByClassName()」というJavaScriptのメソッドがあるので、JavaScriptでぐりぐりやるのに比べれば早いが、JavaScriptで全ノードのクラスを探すか、ブラウザ内部で全ノードのクラスを探すかの違いなので、大変なことには変わりないのだ。

同じセレクタは変数化する

jQueryといえど、中身はJavaScript。つまりはインタプリタ言語。同じ処理をまとめて最適化などしてくれないのだ。つまりは、以下のように連続して同じセレクタを書いてしまうと、その都度、セレクタを解析して、HTMLのDOMをさぐって、対象のノードを探すという処理がはしってしまうわけだ。これはなんとももったいない。

$('.target').css({'background-color':'red'});
$('.target').show();

こういったDOMの探索の重複を防ぐためには、検索結果を変数に格納して使い回すのがよいです。

var target = $('.target p');
target.css({'background-color':'red'});
target.show();

こう書くことによって、毎度のセレクタの解析やDOMの探索がなくなって、そこらへんのオーバヘッドがなくなる。簡単なことだが、これが積み重なるとパフォーマンスはかなりちがう。

連続した処理はメソッドチェーンを使う

jQueryの各種メソッドは、returnに自分自身のDOMを返す。ので、同じ要素に対して連続して処理したい場合は、以下のように、返り値に対してさらにメソッドを記述するといったメソッドチェーンを積極的に使っていきましょう。

$('div.target p')
  .css({'background-color':'red'})
  .show();

この方が記述もすっきりしてわかりやすいよね！ひびきもいいじゃない！メソッドチェーン！ギューン！スバーン！って感じだよね！振り回してる感がいい！メソッドチェーン！あ、なんか必殺技みたい！聖闘士星矢のピンク色のやつがつかうやつ！なんだっけ！忘れた！ってか、もうこのくだりいいよね。

セレクタはできるだけシンプルに書く

こんなコードを書いてやしないか。

$('div.wrapper div.range #target').css({'background-color':'red'})

きっとあなたは親切心でやっているのだと思う。このタグの下の、このタグのさらに下の、このタグよろしくねと。しかし、jQuery的にはいい迷惑なのだ。なぜなら、jQueryはセレクタを解析して、その順番通りに処理を進めるから。本来であれば、targetのid属性一発でひけるところを、divタグを全ループしてクラス属性探して、さらにまたdivタグを全ループしてクラス属性探して、そしてtargetのIDタグで検索してって、IDで一発で引けるのかよ！その前の記述なんなの！ってなっちゃうわけだ。ありがた迷惑とはまさにことのことだ。jQueryはセレクタに書かれたままに律儀に前から順番に処理を実行するので、目的のタグを最小限のセレクタで書くようにしましょう。