裏紙に書く程度の内容

class指定よりid指定の方が早い

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

可能な限りclassでは無く、IDを使いましょう

についてです。

class指定よりid指定の方が早いらしい

これは大体みんな知っているはず。

class指定(#(.class))より、IDで指定($(#id))したほうが早いから、可能ならそうしましょう、ということですね。

念のため試してみます。

class指定の場合

以下htmlを使います。

<li>は全部で1000個準備してます。

<ul class="mylist">
    <li class="item-0">list 0</li>
    <li class="item-1">list 1</li>
    <li class="item-2">list 2</li>
    <li class="item-3">list 3</li>
    <li class="item-4">list 4</li>
    <li class="item-5">list 5</li>
    <li class="item-6">list 6</li>
    <li class="item-7">list 7</li>
    <li class="item-8">list 8</li>
    ( 以下略 )

使用するjsは以下。
1000個の要素すべてを一回ずつ取得します。

console.time('test')
for (i = 0; i < 1000; i++) {
  var selectedItem = $('.item-' + i);
}
console.timeEnd('test')

結果は 約 28 ms

id指定の場合

今度はclassの代わりにIDを使って同じことをしてみます。

<ul class="mylist">
    <li id="item-0">list 0</li>
    <li id="item-1">list 1</li>
    <li id="item-2">list 2</li>
    <li id="item-3">list 3</li>
    <li id="item-4">list 4</li>
    <li id="item-5">list 5</li>
    <li id="item-6">list 6</li>
    <li id="item-7">list 7</li>
    <li id="item-8">list 8</li>
    <li id="item-9">list 9</li>
    ( 以下略 )
console.time('test')
for (i = 0; i < 1000; i++) {
  var selectedItem = $('#item-' + i);
}
console.timeEnd('test')

結果は 約 3 ms

やっぱり早かった!

“可能な限り”とはどれくらいか?

結果は前述のとおり、class指定よりID指定が早かったです。

その差は 25ms

但し、1000回の実行結果なので、1回あたりは 0.025 ms

今回使ったHTMLはごくシンプルなものなのでほとんど差が出なかったのかもしれませんが、はたして気にするほどのことでしょうか?

id class の本来の使い分け

Tipsには”可能な限り”とありますが、どの重きを置けばいいのか検討してみます。
まず、本来の使い方について。

HTML5仕様を確認

HTML5仕様では以下のようになっています。

id属性

id属性はその要素の固有識別子(ID)を指定する。[DOM]
値は、要素のホームサブツリーですべてのIDに共通して固有でなければならず、少なくとも1つの文字を含まなければならない。値は一切の空白文字を含んではならない。

(http://momdo.github.io/html5/dom.html#the-id-attribute)

class属性

それぞれのHTML要素は、特定のclass属性を持ってもよい。
属性が指定される場合、属性は、要素が属する様々なクラスを表すスペース区切りトークンの組の値を持たなければならない。

(http://momdo.github.io/html5/dom.html#classes)

違いとしては、idはユニークじゃなきゃいけないことと、classは1つの要素に対して複数指定してもいいよってことだけです。

用途の違いについては触れられていません。

つまり、最速を目指してjsで使うところはすべてidを指定する、ということも仕様的には問題ありません。

あとは設計思想をどう考えるかってところでしょう。

問題になるのはどういうときか

仕様上は極力idを使ってもよさそうなので、別の側面から検討してみます。

このTipsの要点はidを使ったら”速く”なるよってことです。

したがってこのTipsが効果を発揮するのは表示しているページが”重い”と感じたときです。

この時、1か所だけのクラス指定を、id指定に変えたところで意味はありませんね。

jQueryによるクラス指定による要素検索が数千回あるようなページに限り、効果があると見込めます。

ただ、そういう状況って滅多にないのではないでしょうか?

あっても、苦労してリファクタリングしたところで得られる効果は 数ミリ~数百ミリ秒だけです。

こう考えると、わざわざリファクタリングしてまでid指定になおそうとは思いません。

あくまで、設計思想的等により、あらかじめidが指定されているならば、クラスよりもidを指定しようよ、程度でよいのではないでしょうか。

結論

自分としてはこのTipsもさほど重要ではないと考えます。豆知識として知っておけばいいレベル。

ブラウザが進化してきたため無視してもいいレベルまでになっているんだと思います。

Index