jQueryでDOM要素にアクセスする最も効率的な方法は何ですか？

Question

jQueryプラグインを作成していますが、私は最適化段階にいます。私は一般的に速くスクリプトにこれらのリードの、および軽減要因がどんなものなのか疑問に思う

が重要である：

1. ので、DOMで要素を見つけるスクリプトは起動時にクラスやIDの多くを生成させます後でもっと簡単です（早くも？）。
2. クラスとIDを最小限に抑えておくことで（作成しないことで時間を節約できます）、後でより複雑な方法で要素を探します（オブジェクトのn番目の項目など）。id /クラス。

Answer 1

質問は、私はあなたのコードに直接関連するあなたの助言を与えることができるように十分に本当に固有のものではないが、ここで私のお気に入りのjQueryの最適化のヒントのいくつかである：

1. 可能な限り、コンテキストを指定します！ jQueryを必要としない場所に見せないでください。 #container div内に何かがあることがわかっている場合は、$(something, '#container');
2. .myclassはslowです。内部的には、jQueryは少なくとも要素をに渡して、少なくとも、getElementsByClassNameをサポートしていないブラウザでは、検索するクラスがあるかどうかを確認する必要があります。あなたはクラスのみ、特定の要素に適用されることがわかっている場合はjQueryのは、その後ネイティブgetElementsByTagNameを使用してのみを検索することができますよう、tag.myclassを行うことが方法高速です。
3. 複雑なセレクタを1つのバンで実行しないでください。確かに、jQueryは必要なものを見つけ出すことができますが、文字列を解析して、必要なロジックを適用するには時間がかかります。そのため、私はいつも「クエリ」をパッチに分割したいと思っています。ほとんどの人は$('#myform input:eq(2)');などをやっているかもしれませんが、私は$('input','#myform').eq(2);を使ってjQueryを助けています。
4. オブジェクトのセットで複数のことを行う予定がある場合は、DOMに再クエリしないでください。エクスチェンジ・チェーンを利用し、何らかの理由でチェーンを使用することができない場合は、クエリの結果を変数にキャッシュし、そのコールを実行します。

Answer 2

私はあなた自身の疑問に答えると思います：「畳み込みの方法」は、「それは壊れます」と同義語です.HTML構造を変更するとコードが損なわれます。

たとえば、あなたがmyDivを取得しようとしているとあなたはそれがchildの最後の兄弟だと仮定想像：あなたは後で構造を決定した場合に起こる

<div>parent 
    <div>child</div> 
    <div>myDiv</div> 
</div> 

本当にこのようにすべきですか？あなたのコードは本当に脆くなる構造についての仮定に依存することによって

<div>parent 
    <div>child</div> 
    <div>myDiv</div> 
    <div>child</div> 
</div> 

。クラスとIDをノードに追加すると、そのようなシナリオが防止されます。

私はあなたが最初の選択肢に行くべきだと思います。クラスごとにノードを取得することは、IDで取得するよりも常に遅いことを忘れないでください。

Answer 3

私のプラグインでは、できる限りドキュメントに挿入するフックの量を制限しようとします。 「フック」とはIDやクラスを意味します。

完全に回避する最も良い方法は、プラグインのクロージャ内に作成された要素への参照を保持することです。たとえば、

このリストは、HTMLにフックを入れずにJavaScript関数（複数の場所で参照および使用されています）で持ち運ぶことができます。できるだけ邪魔にならないようにしてください！

フックの回避/制限は、どこで使用されるのかわからないため、プラグインの開発において特に重要です。

Answer 4

ブラウザが動作する方法は、負荷時に、それは次のように見えますメモリ内のDOMツリーを作成することです：

           P 
           _______________|______________ 
           |        | 
          childNodes     attributes 
       ______________|___________     | 
       |    |   |   title = 'Test paragraph' 
     'Sample of text ' DIV 'in your document' 
           | 
          childNodes 
        __________|_______ 
        |   |  | 
      'HTML you might' B  'have' 

あなたがP > DIV > Bを検索するときので、ルックアップはすべてPの要素を見つけることがあり、 P内のすべてのDIV要素を見つけて、DIV内のすべてのB要素を見つけます。ネスティングを深くすればするほど、より多くのルックアップが必要になります。さらに、すべてP > DIVにはBが含まれていないことがわかり、すべてがP > DIVに一致するまで無駄になります。 IDはDOMは非常に高速な検索を持っている、ハッシュテーブルのエントリとして保存することができますので、一意であることが保証されているので、IDによって

ルックアップが高速です。しかし、jQueryの実装はわずかに異なるかもしれませんが、document.getElementByIdは検索時間が最も速いので、$('#my_node_id')もかなり速くなければなりません。

その結果、あなたのノードがIDを持っていない場合、あなたはありません最寄りの祖先を見つけることができますし、見た目アップが唯一のサブの下で発生する必要があるため、その祖先

#my_node_id > div > b 

にあなたのノードの相対を見つけます-tree of #my_node_idそれは速くなりますp > div > b