jQueryのfind()を利用した高速化

最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。

アンチパターン

最近、見かけたパターンとしては以下の様なものがあります。

$('.foo #bar')

このセレクタをfind()を使って高速化する為に以下のように書きなおす。

$('.foo').find('#bar')

というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。

また、以下の様なパターンも見かけました。

var $ul = $('ul'),
	$a = $ul.find('.a'),
	$b = $ul.find('.b');
$a.css('color', 'red');
$b.css('color', 'green').text('Hello');

こちらも、多くのケースでは低速化されてしまいます。

では、もう少し具体的なパターンでどういったケースでfind()で高速化を図ることができ、どういったケースで低速化するか見ていきましょう。

ケーススタディー

次のようなHTMLがあったとします。

<ul>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
	<li><a href="#">bar</a></li>
</ul>

これに対して以下の4つのセレクタを利用してパフォーマンスを比較してみましょう。

$("ul").find("a")//find1
$("li").find("a")//find2
$("ul a")//not find1
$("li a")//not find2

jsPerfを作成したので以下のページでRun testsをクリックするとパフォーマンス比較が可能です。

比較結果

実行結果は以下のようになります。

jQueryのfind()を利用した高速化

ラインが長いほど処理が速いことを表しています。

ブラウザにより結果はマチマチですが「$("li").find("a")」が最も遅くなります。

このようにfind()を行う際に、基準となるjQueryオブジェクトの要素数が増加するとfind()のパフォーマンスはどんどん損なわれていきます。

個人的にはfind()を使ったほうが高速化が見込めるケースがあるものの、利用しないほうが安定したパフォーマンスがでるので、無理にfind()は利用しないほうがよいかと考えています。

どのようなケースで高速化され低速化されるか理解してるのでしたら話は別ですが、単純にfind()使えば高速化されるは間違いなので気をつけてください。

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

スポンサードリンク

«2013年のto-R人気エントリーTOP20 | メイン | [書評]HTML5マークアップ 現場で使える最短攻略ガイド»