Clever Geek Handbook

jQueryスクリプトの速度を上げる方法

11のルール。これに従って、jQueryを使用して記述されたスクリプトのパフォーマンスを向上させることができます。



以下は、例に基づいたマークアップです。 



 <div id = "content">
	 <form method = "post" action = "/">
		 <h2>信号</ h2>
		 <ul id = "traffic_light">
			 <li> <input type = "radio" class = "on" name = "light" value = "red" />赤</ li>
			 <li> <input type = "radio" class = "off" name = "light" value = "yellow" />黄色</ li>
			 <li> <input type = "radio" class = "off" name = "light" value = "green" />緑</ li>
		 </ ul>
		 <input class = "button" id = "traffic_button" type = "submit" value = "Go" />
	 </ form>
 </ div>




  1. id属性で要素を検索する必要があります。 要素にidがない場合は、idで最も近い要素を指定する必要があります。



    var active_light = $('#traffic_light .on');







    idを使用して要素を検索する場合、DOM getElementByIdメソッドが使用されるため、これはすぐに発生します。



  2. クラス名の前にタグ名を使用します。



    var active_light = $('#traffic_light input.on');







    次に、DOM getElementsByTagNameメソッドが使用され、選択された要素の中からクラス「on」を持つメソッドが検索されます。

    クラス名による要素の選択は、jQueryで最も遅い選択の1つです。



    ただし、idの前にタグ名を配置しないでください。

    var active_light = $('div#traffic_light');







    タグ「div」を持つすべての要素が選択され、その中から目的のIDを持つ要素が見つかります。

  3. キャッシュjQueryオブジェクト：

    オブジェクトを複数回使用する場合、選択範囲を数回回転させる代わりに：

    $('#traffic_light input.on).bind('click', function(){...});

    $('#traffic_light input.on).css('border', '3px dashed yellow');

    $('#traffic_light input.on).css('background-color', 'orange');

    $('#traffic_light input.on).fadeIn('slow');







    ローカル変数に保存します：

    var $active_light = $('#traffic_light input.on');

    $active_light.bind('click', function(){...});

    $active_light.css('border', '3px dashed yellow');

    $active_light.css('background-color', 'orange');

    $active_light.fadeIn('slow');







    jQueryオブジェクトが変数名に格納されていることを示すために、変数名の前に「$」を置くことができます。



  4. コードを並べる：

    ほとんどのjQueryメソッドは実行後にjQueryオブジェクトを返すため、前の例は次のように記述できます。 

     var $ active_light = $（ '＃traffic_light input.on'）;
 $ active_light.bind（ 'クリック'、 
  function（）{falseを返す;}）
	 .css（「境界線」、「3ピクセルの破線の黄色」）
	 .css（「背景色」、「オレンジ」）
	 .fadeIn（ 'slow'）;




    これにより、コードサイズを削減できます。

  5. サブクエリを使用します。 

     var $ traffic_light = $（ '＃traffic_light'）、
	 $ active_light = $ traffic_light.find（ 'input.on'）、
	 $ inactive_lights = $ traffic_light.find（ 'input.off'）;




    オブジェクトを変数に保存したため、次の選択は保存されたオブジェクトでのみ行われ、要素のツリー全体では行われません。



  6. DOMツリーでの作業を最小限に抑える

    DOMツリーでの操作（新しい要素の削除、移動、挿入）は、各要素をDOMに挿入するのではなく、かなり遅いため： 

     var top_100_list = [...]、 
 $ mylist = $（ '＃mylist'）; 

 for（var i = 0、l = top_100_list.length; i <l; i ++）
 {
	 $ mylist.append（ '<li>' + top_100_list [i] + '</ li>'）;
 }




    最初に変数に一連の要素を作成してから、1つのステップでDOMに挿入する方が適切です。 

     var top_100_list = [...]、 
 $ mylist = $（ '＃mylist'）、 
 top_100_li = ""; 

 for（var i = 0、l = top_100_list.length; i <l; i ++）
 {
	 top_100_li + = '<li>' + top_100_list [i] + '</ li>';
 }

 $ mylist.html（top_100_li）;


  7. イベントの委任を使用する：

    各イベントは、DOMツリーで先祖要素に「ポップアップ」します。 これは、同じイベントの複数の要素が同じ機能を実行する必要がある場合に使用できます。



    イベントをこれらの各要素にバインドする代わりに： 

     $（ '＃entryform input）.bind（' focus '、function（）{
	 $（this）.addClass（ 'selected'）;
 }）。bind（ 'blur'、function（）{
	 $（これ）.removeClass（ 'selected'）;
 }）;




    イベントを親要素にバインドできます。 

     $（ '＃entryform）.bind（' focus '、function（e）{
	 var cell = $（e.target）;  

	 cell.addClass（ 'selected'）;
 }）。bind（ 'blur'、function（e）{
	 var cell = $（e.target）;
	 cell.removeClass（ 'selected'）;
 }）;


  8. 関連するスクリプトのみをページにバインドします。

    通常、すべてが1つの大きなスクリプトにまとめられ、サイトのすべてのページに挿入され、$（ドキュメント）.ready（）イベントで実行されます。 ただし、この特定のページで関数が機能しない場合でも、この関数が関連付けられている要素を検索するには時間がかかります。



    したがって、スクリプトをいくつかの部分に分割したり、次のように構成したりできます。 

     var mylib =
 {
	 article_page：
	 {
		 init：関数（）
		 {
			 ...
		 }
	 }、
	 traffic_light：
	 {
		 init：関数（）
		 {
			 ...
		 }
	 }
 }




    そして、例えば</ body>を閉じる前にtraffic_lightに関連する関数を使用したいページで、以下を挿入します： 

     <script type = "text / javascript">
     mylib.article.init（）;
 </ script>
 </ body>


  9. $（window）.loadへの読み込みを遅らせる

    ほとんどの場合、jQuery開発者はスクリプト実行を$（ドキュメント）.ready（）イベントに添付します。 イベントは、オブジェクトがまだロードされている間にページがレンダリングされている間に発生します。 読み込み中にページがフリーズすることがあります。 この理由は、正確には$（ドキュメント）.ready（）に関連付けられている関数である可能性があります。



    これを取り除くために、ページのすべてのコンテンツ（iframeのコンテンツを含む）が既にロードされた後に発生する$（window）.load（）イベントにいくつかの関数をバインドできます。 

     $（window）.load（function（）{
	 //ページの読み込み後に初期化されたjQuery関数
 }）;


  10. JSコードを圧縮する

    ただし、これはjQueryとは関係がなく、特に関係していません。

    これは、 YUICompressor 、 Dojo ShrinkSafe 、またはGoogle Closure Compilerを使用して実行できます。

  11. jQueryを学ぶ

    ドキュメントを読むと、多くの興味深いものを見つけることができます。

    jQuery 1.3のチートシートをダウンロードして、機能がすぐに利用できるようにすることができます。




これは、この記事のかなり自由な翻訳であり、私の目に留まりました。 私はこれらのポイントのほとんどを知っていて使用しましたが、私は自分自身のためにもう少し見つけました。


More articles:


All Articles