jQueryでも高速化!メソッドチェーン/連想配列で値を設定

先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。
somegoro.hatenablog.com

今回はその高速化についての記事です。


jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています。確かにそのとおりなのですが、書き方を少し工夫するだけでjQueryの処理は飛躍的に速くなるのです。


今回の記事では、高速化するための書き方を2点ご紹介します。
それではご紹介していきます。

高速化1 メソッドチェーンでつなぐ

普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "500px");
$(this).css("height", "300px");


それをこのように書くことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px");

この書き方ですと $(this) へのアクセスが一度で済みます。
ですので、その分の処理が少なくなるので結果として処理時間が短くなる(=高速で処理できる)と言うことになります。


さらに.cssだけでなく、他のプロパティでもメソッドチェーンで繋ぐことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px")
       .text("設定しました");

記述量も少なくなる上に処理も速くなって一石二鳥ですね。これを使わない手はないです。


高速化2 連想配列で設定

さて次は連想配列を使って値を設定する方法をご紹介します。
普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "300px");
$(this).css("height", "300px");

それをこのように書くことが出来ます。

$(this).css({
  width: "300px",
  height: "300px"
});

この書き方は高速化1の方法よりも個人的に見た目が好きなので、私はよく使います。
処理速度としてはどうでしょう、こちらの方が体感的には少々速い気がしますがあまり気になる程の差はないように感じます。


今回ご紹介した書き方は、変数でもこのように設定することが出来ます。

var variable_width = 300;
$(this).css("width", variable_width)
       .css("height", "300px");

$(this).css({
  width: variable_width,
  height: "300px"
});

便利で簡単ですね。


以上、jQueryでも処理を高速化する方法2点でした。メソッドチェーンや連想配列はこの他にも様々な場所で活躍しますので、この機会にぜひ覚えていってください。


それではこの辺で。

jQueryクックブック

jQueryクックブック