jQueryのパフォーマンスを落とさないための注意点

タイトルの通りです。セレクタを使う際の注意点やDOM操作をする場合に気をつけることを書いています。

idセレクタを使いましょう

jQueryでのセレクタは次の順番で速いようです：

1. id で指定する
2. タグ名で指定する
3. class で指定する
4. 属性で指定する
5. jQuery 独自拡張セレクタで指定する

特別な理由がなければ id をセレクタに使ってください。

id で取得するときにタグ名を指定しないように

var $hoge = $('div#hoge'); のような指定の仕方は NG です。なぜなら hoge という id を見つけるために div 要素をすべて探す必要があるからです。単に var $hoge = $('#hoge'); のようにしてください。これで jQuery は JavaScript のネイティブ関数である getElementById を使ってオブジェクトを取得します。

クラスセレクタよりも要素セレクタを使いましょう

クラスセレクタよりも要素セレクタの方が速いようです。これは要素セレクタを使うと JavaScript のネイティブ関数である getElementsByTagName を使えるからです。セレクタを使用する際の優先度としては id > 要素 > class の順番です。

クラスセレクタでは要素名を指定しましょう

クラスでオブジェクトを取得するときは var $hoge = $('.hoge'); ではなくて var $hoge = $('div.hoge'); のように要素名を "." の前に書く、ということです。

複数の要素を並べるときは id を先頭にしましょう

var $hoge = $('div #hoge') は NG です。正解は var $hoge = $('#hoge div') です。

複数の id を並べてオブジェクトを取得しないように

var $hoges = $('#hoge #hogehoge') はすごく遅くなるそうです。id セレクタを使うときは一つの id を使うようにしましょう。

コンテクストを直接指定するよりも find() を使いましょう

var $hoge = $('#hogeid').find('.hogeclass');
var $hoge = $('.hogeclass', '#hogeid');
var $hoge = $('#hogeid', '.hogeclass');

は上から順番に実行速度が速いようです。ですので id でオブジェクトを取得した後に find メソッドを使う、というのが最も効率的になります。

jQuery オブジェクトのキャッシュを使いましょう

// ダメな例
$('#hoge').css('border','1px solid #000');
$('#hoge').css('background-color','#333');
$('#hoge').fadeIn('slow');

// 正解例
var $hoge = $('#hoge');
$hoge.css('border','1px solid #000');
$hoge.css('background-color','#333');
$hoge.fadeIn('slow');

になります。ダメな例では $('#hoge') が出てくるたびに getElementById でオブジェクトを取得しようとするから、それだけ遅くなります。何度も使うオブジェクトはキャッシュしてください。

サブクエリを使いましょう

ある要素の子要素を取得するときは、まず親要素をキャッシュした上で子要素を取得しましょう。つまり

// 正解例1
var $parent = $('#parent');
var $child = $parent.find('.child');

// 正解例2
var $parent = $('#parent');
var $child = $('child', $parent);

が正解です。

メソッドチェインを使いましょう

先ほどの正解例はメソッドチェインを使っていないので NG です。

// ダメな例
var $hoge = $('#hoge');
$hoge.css('border','1px solid #000');
$hoge.css('background-color','#333');
$hoge.fadeIn('slow');

// 正解例
var $hoge = $('#hoge');
$hoge.css('border','1px solid #000')
     .css('background-color','#333')
     .fadeIn('slow');

上の正解例のようにメソッドチェインで一気に処理させましょう。

DOM操作は最小限に抑えましょう

例えば 100 個の li 要素を jQuery で追加する場合を考えましょう。このときのダメな例と正解例はこのようになります：

// ダメな例
$('#hoge').prepend('<ul id="new-list"></ul>');
for (var i = 1; i < 100; i++) {
    $('#hoge').append('<li>' + i + '</li>');
}

// 正解例
var newList = '<ul id="new-list">';
for (var i = 1; i < 100; i++) {
    newList += '<li>' + i + '</li>';
}
newList += '</ul>';
$('#hoge').prepend(newList);

ダメな例では append メソッドで DOM 操作を 100 回行っています。prepend を含めると合計 101 回です。このような場合は正解例のように一旦 newList のような変数にすべての要素を詰め込んだ上で prepend で DOM 操作を行いましょう。これだと DOM 操作はたった一回だけということになります。

15個以上の要素にスタイルを適用する場合は css メソッドではなくて style タグを追加しましょう

例えば hoge クラスをもった div 要素に "color: red" を追加するとしましょう。そのとき、hoge クラスをもった div 要素が15個以上ある場合は $('div.hoge').css('color','red'); ではなくて $('<style> div.class { color: red; } </style>').appendTo('head'); のように head 要素内に style タグを追加しましょう。

jQuery(document).ready(function) の代わりに jQuery(function) を使いましょう

以下の二つは同じです：

$(document).ready(function() {
    // 関数内部
});

$(function() {
    // 関数内部
});

これでほんのごくわずかですがjsファイルの容量を減らすことができます。

jQuery(window).load と jQuery(document).ready を使い分けましょう

この二つは実行されるタイミングが異なります。$(document).ready は DOM が構築された時点で実行されますが、$(window).load は画像を含めてページの読み込みがすべて完了した後で実行されます。実行されるタイミングが違うわけですから、$(window).load でできることはそちらに任せましょう。

Google CDN から jQuery を読み込みましょう

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

これが一番速く jQuery を読み込めます。

参考サイト

jQuery Performance Tips Cheat Sheet | Dumitru Glavan