jQueryのclassセレクタに要素名を付ける

このエントリーはjQuery Advent Calendar 2014の1日目のエントリーです。
(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

数日前に「JavaScript・jQueryの改修・高速化のためのメモ - Qiita」という記事が発表されました。

拙著「JavaScriptコーディングベストプラクティス」で紹介した内容を勉強がてら引用しているという内容です。

その一項目である「classセレクタに要素名を付ける」にコメント欄などでツッコミが入っていたので著者としてフォローというか言い訳をしておきたかったので、この機会にフォローというか言い訳を書いておきます。

書籍ではサンプルで書かれていたコード2つを比較してパフォーマンスチェックを行なっています。

//Before
for(var i=0; i<100; i++){
  $('.hoge')
}
//After
for(var i=0; i<100; i++){
  $('ul.hoge')
}

結果は次のように掲載されています(Before、Afterの数値が小さいほど高速)。

ブラウザバージョンBeforeAfter
iOS(iPad)3.2.2170153
iOS(iPhone)4.2.1151147
Android1.6396318
Chrome8/02943
Firefox3.68979
IE6839344
IE7552321
IE8107113
Opera104525

そして結論として以下のように書いております。

このようにIE8やGoogle Chromeなどでは数ミリ秒遅くなってしまうがIE6やIE7に対応する場合にはclass属性への要素の付加は必須のパフォーマンス対策である。

つまり、「jQueryのclassセレクタに要素名を付ける」というはIE6やIE7でjQueryのセレクタを高速化するテクニックとして紹介しています。本が発売された当時はIE8が最新ブラウザでIE6やIE7が必須という案件は非常に多かった時代なのでしかたなかったわけです。

とうぜんコメント欄で指摘されているようにIE9以降ではgetElementsByClassNameが採用される「要素名を付けない」パターンのほうが高速化されますし、書籍に書いてあるとおりquerySelectorAllが採用されるIE8においても「要素名を付けない」パターンのほうが高速化されます。

「JavaScriptコーディングベストプラクティス」は非常に良い本なのですが、歴史的な事実としてIE6,7などにフォーカスされた高速化テクニックも多数掲載されいますが、IE6,7向けのテクニックである旨は記載されていますので読み落として間違った知識を身につけるのは辞めましょう。

明日のjQuery Advent Calendar 2014は@maeponさんです。

スポンサードリンク

«【イベント情報】スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう! | メイン | スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!が終了しました。»