jQueryは元々、高速に動作するように設計されているJavascriptライブラリーですが、ちょっとした工夫でコードを記述していくことで、さらにスクリプトの実行速度を上げることができたりします。

idセレクタの使用

jQueryのセレクタでは、id名で指定するセレクタが常に最速に動くようになっています。例えば、以下のようなソースがあったとします。

<div id="photo-area">
<img src="photo.jpg" id="photo" class="photo" />
</div>

このとき、img要素をセレクタとして指定をする際の方法としては、「#photo-area img」「img#photo」「img.photo」「#photo」「.photo」などがありますが、1番速く目的の要素に辿り着ける指定方法は「#photo」になります。

メソッドチェーンを使う

メソッドチェーンとは、1つのセレクタに対して2つ以上の命令を連続して指定をすることができる記述方法です。同一の要素に対して複数の命令を指定する場合は、なるべくメソッドチェーンを利用することで目的の要素を探し直す処理を省略することができ、実行速度の向上につながります。
メソッドチェーンの記述方法は、ドットで繋げて記述していきます。

$("img:first-child").fadeOut("slow").next("img").fadeIn("slow");

セレクタのキャッシュ化

セレクタのキャッシュ化とは、セレクタの要素を予め変数として格納しておいて、それ以降の要素の検索処理を省略する方法です。例えば、「#btn」というセレクタの要素に命令を記述していくとします。

var btn = $("#btn");
btn.html();
～中略～
btn.click();
～中略～

1行目の「var btn = $(“#btn”);」で変数「btn」にセレクタの要素である「#btn」を格納します。あとは、使用したい箇所で変数「btn」を呼び出してあげれば使うことができます。同じ要素に指定をする場合にメソッドチェーンを利用することもありますが、場合によっては、同じ要素でもメソッドチェーンが使えない処理動作があります。その場合に、このように1度、変数に要素を格納しておくことで処理速度の向上につなげることができます。

以上が、jQueryの高速化に関する基本的な記述方法となります。

おすすめの記事