jQueryの優先順位

1. jQueryの最新バージョン

セレクタの使用。
   2.1 jQueryのIDは、最速のオプションセレクタである：getElementByIdを（）メソッドからJS

   注：必要な複数の要素を選択すること、およびDOMトラバーサルサイクルを伴う必要があり、パフォーマンスを提出するためには、最寄りのIDからの継承を開始することをお勧めします
   例：<DIV ID = "DIV" > 1 </ LI> <LIクラス= "オフ"> <ulのID = "UL"> < "上"のliクラス=> 2 </ LI> </ UL> </ div> VAR UL = $（ "＃UL"）

    2.2第2の速度セレクタは、タグ（タグ）ネイティブgetElementsByTagNameの（）メソッドに由来するセレクタ、ある
    変数：一例として= $ライト（ "ULの＃のinput.on"）

    2.3セレクタ遅くクラスセレクタ
    $（ 'className'の）パフォーマンス、WebKitのサファリOブラウザMOZブラウザによってネイティブメソッドを持っている：getElementByClassNameを（）ので、速度が遅いではありません
    が、IE5-IE8は非常に遅くなることはない

    2.4最も遅いセレクター：擬似クラスセレクタと属性セレクタ：理由：自分のネイティブメソッドの敬意がないため、新しいブラウザのバージョンのいくつかは、次のとおりです。 querySelector（）と

の放電性能向上するquerySelectorAll（）
     擬似クラスセレクタを：$（「：隠されました」）
     属性セレクタ：$（ '属性=値' ）属性：属性名：ID、名前、クラス...値の値の例：ID = 'SS'という
3.関係でその親要素と子要素感謝
   するvar一覧= $（ "＃リストを"）;
。[1 $（ '子'、 $親）2. $のparent.find 3. $親を（ '子を。'） .children（ '子供'）。4. $（ '＃親> .child'）。5. $（ '親.childの＃'）。6.

$（'。子供'、$（ '＃親'））]
   声明：$（「子」、 $親）
   説明：このステートメントは、DOMオブジェクトを指定して、その後、サブ要素を選択することを意味します。jQueryのは、自動的にいくつかになります$の.parent.find（「子」）、にこの文をオンにします

         パフォーマンスの低下。これは、最速のフォームより5％-10％遅くなります。
   変換：$（ '子供'、 = $（ '子供'、$親）$（）親のSS '。）[子供が.SSと同じレベルである。]
    $（ '子供'、$親） = $（ '子'、リスト）

   声明：$のparent.find（ '子' ）
   説明：これは最速の文です。。

       見つける（）メソッドは、ブラウザのネイティブメソッド（getElementByIdを、getElementByName、getElementByTagNameなど）、そのスピード呼び出す速いの。
   変換：$のparent.find（ '子供' ）= $（リスト）.find（ 'テスト'）;

   声明：$ parent.children（ '子供' ）
   説明：jQueryの内部のこの文は、.sibling $（）とJavaScript nextSibling（）メソッド、1つのトラバースノードを使用します。これは、約50％の最速フォームより遅いです。
   変換：$ parent.children（ '子供' ）= $テスト= $（リスト）.children（ 'テスト'）;

   声明：$（ '＃親> .child '）
   説明：内部はjQueryのシズルエンジンを使用し、処理さまざまなセレクタ。シズルエンジンの選択順序は、右から左にあるので、このステートメントは、最初の選挙の.childあり、その後、一つ一つが親フィルタリングするため

       の最速のフォームより遅い約70％にそれを原因となる要素#parentを、。
   変換：$（ '＃親は> .child '）のvar $テストを= = $（ '＃一覧> .TEST'）;

   声明：$（ '＃親.child' ）
   説明：この文は、前のものと類似しています状況。しかし、（マルチレベルの子要素を選択することであってもよい選択肢のみ直接の子要素、）、それはおそらく、ほとんどのよりも、遅くですので、

77％高速化の形で遅くなります。
   変換：変数$テスト= $（ ' ＃リスト.TEST'）;

   声明：$（ '子'、 $（ '＃親は'））
   について説明し、jQueryの$（ '＃の親'に変換内側にこの文は次のようになります）.find（ '子供'）、最速のフォームより23％遅くなります。
   変換：変数$テスト= $（ '

      同時に、マルチレベルとchidrenの使用も大きな影響が発生します

。4.過剰使用jQueryのではないですか
、少なくとも$（約10倍）の簡単な声明JS比

（非常に重要）キャッシュをチェック5.
   varが= jQueryのをキャッシュされました（「#topトップ」）
   試験によれば、キャッシュが速くより2〜3倍のキャッシュしない
      まで5.1 jQueryオブジェクトキャッシュを：同じセレクタがあなたのコード内で複数回出現しましょう決して
      間違った言葉遣い：
      例えば：$（ "#traffic_light input.on"）バインド（ "クリック"、機能（）{...}）;.
      $（ "＃のtraffic_lightのinput.on"）CSS（ "ボーダー"、 "黄色い破線1ピクセル"）;.
      右言葉遣い：
      例えば：$ active_light VAR = $（ "＃のtraffic_lightのinput.on"）;
      $のactive_light.bind（ "クリック"、機能（）{...}）;
      $のactive_light.css（ "ボーダー"、「1ピクセル";）、黄色の点線の
      連鎖書き込み、より効率的な書き込みを
      （「をクリックし、機能の$ active_light.bindを" （）{...}）。CSS（ "境界"、 "1ピクセル破線黄色"）
      あなたが他の関数でのjQueryオブジェクトを使用する予定の場合、それらは、地球環境にキャッシュされなければならない
      例：ウィンドウは$私= {ウィンドウ$私= {頭：.. $（「ヘッド」）、traffic_light：$（「＃1 traffic_light」）、traffic_button：

$（ "traffic_button位"）;}（）{}関数をdo_something
            内部関数、クエリ$ my.cool_results = $（ "＃1 some_ulの中に堆積し続けることができるリチウム" グローバルオブジェクト）。
            通常JQオブジェクトなどのグローバル関数が使用する
            $ my.other_results.css（「ボーダー-色」、「赤」）;

6.チェーン文言の使用
$（「DIV」）を見つける（「H3」）EQを.. （2）の.html（「こんにちは」）;
鎖の文言を使用する場合、jQueryのは自動的に非書き込まより速い鎖各ステップの結果をキャッシュし、そう。テストによると、チェーン（キャッシュなし）よりも言葉遣いは約25％速く、非連鎖書かれています。

7.デリゲートのイベント処理（バブル）
プライマリ：各各グリッドは、クリックイベントをバインドする
$（ "TD"）（ "クリック"、機能（）{ON。
      アラート（ "ローカル正義"）
   }）;
仕組み：：プライマリ最適化このイベントは大幅にパフォーマンスが向上し、サブ要素で100回をバインドする必要がなく、親要素1缶に結合されます。これは、それは、イベントの「手数料・プロセス」と呼ばれている

                 親要素は、このイベントの扱う「信頼」の子である
$（「表」）を。デリゲート（「TD」、「クリック」、機能（）{
       アラート（「スティーブンソンが飛びます散水「）
   }）;
よりよい表現は、それが上記の文書オブジェクトにおける結合事象です。
$（文書）.on（ "クリック "、 "TD"、関数（）{$（この）.toggleClass（） "クリック";}）;ドキュメント= ID指定またはクラス

の変更を8以下DOM構造
（1） DOM構造の変更が頻繁に、そのようなアプローチのinsertBefore（）と.insetAfter（））（.append使用していないので、多くの費用。
    複数の要素を挿入するには、まずそれらを結合して、使い捨てを挿入します。試験によれば、約10倍の速さ、合わせ挿入される挿入比率をマージしません。
あなたはDOM要素の多数に対処したい場合は、.detach（）メソッドを使用する必要があります（2）、この要素は、DOMから取り出した後に処理され、その後、戻っ文書でそれをプラグインしています。試験によると、

   使用しないときは、60％より速くより（）メソッドを使用して.detach。
（3）あなたはDOM内のデータ要素を保存したい場合は、代わりに書き込みの次の：
    するvar elemは= $（ '＃のELEMを'）;
    elem.data（キー、値）;

9.正しい処理サイクル
あなたが1で要素1を識別するために、サイクルを使用しない、直接の要素を選択し、複雑なセレクタを使うことができれば循環は、常に時間のかかる作業です。
リサイクルしばらくネイティブJavaScriptの方法、jQueryの.eachより（）メソッドは、高速で、優先順位は、ネイティブメソッドを使用して与えられるべきです。

ウェブサイト：http://www.jb51.net/article/25530.htm
      http://caibaojian.com/jquery-performance-optimization.html
      http://www.2cto.com/kf/201308/238441.html

おすすめ