高速化：jQuery と CSS のセレクタは書き方を変えること

• jQuery

『jQuery クックブック』レシピ 5.10　より高速なセレクタを作成する (P.109) には以下の記述があります。

<table id="log">
  <tr><td>Client X:</td><td class="clientX"></td></tr>
  ...
</table>

// クラス .clientX を取得する jQuery セレクタ
$('.clientX')              // 遅い
$('td.clientX')           // 速いかもしれない
$('#log .clientX')      // かなり速いかもしれない
$('#log td.clientX')   // ブラウザによっては速い可能性がある

jQuery のセレクタは、#id や tag.class 等の限定されたルールで条件を絞り込むほど高速になる傾向があるようです。
詳しい解説がこちらにあります。
また、jQuery の高速化についてのまとめがこちらにあります。

• CSS

一方、『続・ハイパフォーマンスWebサイト』14.2　CSSセレクタを効率的にするためのポイント (P.201) には次のような記述があります。

CSSセレクタは右から左へと照合されるのです。

よって、スタイルシートでは上記の jQuery セレクタと異なり、目的のクラス .clientX だけを記述したほうが無駄な照合をしなくて済みます。

.clientX { ... }              # 効率的
td.clientX { ... }           # 無駄
#log .clientX { ... }      # 無駄
#log td.clientX { ... }   # 無駄

これらの結果はクラス .clientX が数多く存在する DOM システムに対して成り立つものです。
実際、スタイルシートの高速化は、複雑なセレクタを使用して照合に時間がかかっても、平均 30 ミリ秒程度しかかからなかったという報告もあります。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス