jQueryのセレクタにおいてidとclassでなぜ速度が違うのか

jQueryのセレクタでは、$("#hoge")(idによる指定)のほうが$(".hoge")(classによる指定)よりも高速です。
なぜでしょうか?どちらも似ているのになーと疑問に思う人、意外と多いと思います。
実は、このふたつには大きな違いがあるのです。

その違いとは、「ページ内に1つしかないことが前提」であるかどうかです。
みていきましょう。

クラスとは?

classには、「1つしかない」という前提がありません。
そのため、1つ以上ある可能性があります。

例えば、button(ボタン)というクラス名をつけるとしましょう。
こちらは、ボタン(というクラスの要素)を複数作る事ができます。

idとは?

idは、「1つしかないこと」が前提です。
header(ヘッダ)というid名は、同じページ内に1つしか配置できない事が前提です。
a要素のhrefに、"#top"のように指定して「トップに戻る」を作っているサイトをみた事があるでしょう。
これは、idが同じページ内に1つしかないという前提にもとづいています。

なぜ速度が違うのか

前置きが長かったですね。
ではここまでの話をふまえて話します。

• 1.idはページ内に1つしかないことが前提である(書き間違いの可能性もありますが)。
• 2.classはページ内に1つしかないことが前提でない。

この2つより、次の事が言えます。

• 1.idでは、1つしかないので、1つ発見したらそこで終わりです(さらに、javascriptにはネイティブでid検索をかけることができることも要因のひとつらしいです　)。
• 2.classでは、1つ見つけても複数ある可能性があります。そのため、すべての要素を調べる必要があります(jQueryではすべてを調べているようです)。

この違いが、速度の違いです。
というわけでした。意外とわからなかったりします。
私もidが早いという魔法におどらされて、classをかたっぱしからidに変えた時期がありました。
それはあまりのぞましくないので、やっていたようなら変えましょう。