コーディングガイドライン

jQuery は便利な半面、特にパフォーマンス上問題となるコードを記述してしまいがちです。

本章では jQuery を書く上で気をつけるべきポイントを紹介します。

jQuery オブジェクトの変数名には $ を付ける

jQuery オブジェクトが格納される変数名には必ず $ を付けましょう。

// NG
var exec = function(element) {
  $(element).data('xxx', null);
}

// OK
var exec = function($element) {
  $element.data('xxx', null);
}

セレクタを必要以上に実行しない

セレクタの実行にはそれなりのコストがかかります。 余計な処理が走らないよう、変数定義するかチェーンメソッドを活用しましょう。

// NG
$('div').css();
$('div').attr();
...

// OK、変数宣言する
var $div = $('div');
$div.css().attr();

// OK、チェーンメソッドを使う
$('div').css().attr();

高速なセレクタを使用する

セレクタの指定の仕方によっては処理が重くなります。

• ID or クラスセレクタを基本とする
• あまり複雑なセレクタにしない

DOM 操作を減らす

DOM を変更する処理は最もパフォーマンスに影響します。

• for ループ内で .append を繰り返す
• for ループ内で要素位置を変更しつつ .position を取得する
  • position の再計算が毎回走って重い

アニメーション API は利用しない

jQuery のアニメーション API は CSS を動的に書き換えていくため、非常に重い処理となります。 現在では CSS3 アニメーションが利用可能なため、なるべく利用しないようにしましょう。