1

クラスを持つすべての要素に関数を適用するか、各関数を介してそれを行うことに違いはありますか? ばかげた質問かもしれませんが、私の場合、コードを 2 つの異なる方法で実行できるため、次の間にパフォーマンスの違いがあるかどうかを知りたいです。

$('.my_class').hide(); //for example

と

$('.my_class').each(function(){
    $(this).hide();
});
4

2 に答える 2

4

これらは効果的には同じですが、最初の方法の方がクリーンなので優れています。コードの目標は、次の順序である必要があります。

  1. 正しい
  2. クリア
  3. 簡潔
  4. 速い

一般に、何らかの問題に気付くまで速度について心配する必要はありません。速度を上げるために最初の 3 つの考慮事項のいずれかに影響を与える場合がありますが、パフォーマンスの問題があることに気付く前にそうするのは、インターネット全体の「時期尚早の最適化」警告に違反します。コードがパフォーマンスの最後のフェムト秒を絞り出すことよりも、コードが簡潔で理解しやすいものであることが重要です。

jQuery 1.10.1 のソース コードを調べると、1 つの関数呼び出しからすべての要素を隠すのではなく、すべて独自の内部ループ内にあるためhide()、一度に 1 つ呼び出すのは遅くなければならないことが舞台裏でわかるでしょう。要素ごとに関数を 1 回呼び出す外側のループ。

いくつかの疑似コードを比較してください:

/*elements.hide()*/

function hide() {
   for (i = 0; i < l; i += 1) {
      // hide them
   }
}

/*elements.each(function() {element.hide();}*/

function each() {
   for (i = 0; i < l; i += 1) {
      element[i].hide() { // only one element each time, now
         for (i = 0; i < l; i += 1) {
            //hide item
         }
      }
   }
}

2 番目の方法を使用することで、それ自体が多くの要素を処理する効率的な関数を取得し、毎回 1 つの要素のみを処理するために何度も実行するように強制しました。

一般に、最もクリーンなコードを選択する必要があります。jQuery を使用する最大の理由の 1 つは、クリーンなコードを取得することです。コンピューターが理解できるコードは誰でも書けますが、優れたプログラマーは人間が理解できるコードを書きます。あなたのコードが簡単に理解できることには、大きな価値があります。明日のあなた、来年の誰か、あるいは 5 年後のあなたでさえもです。複雑さを増やさないでください。

参考までに、関数の定義を次に示しますhide(これは短いスタブから呼び出されます)。

function showHide( elements, show ) {
   var display, elem, hidden,
      values = [],
      index = 0,
      length = elements.length;

   for ( ; index < length; index++ ) {
      elem = elements[ index ];
      if ( !elem.style ) {
         continue;
      }

      values[ index ] = jQuery._data( elem, "olddisplay" );
      display = elem.style.display;
      if ( show ) {
         // Reset the inline display of this element to learn if it is
         // being hidden by cascaded rules or not
         if ( !values[ index ] && display === "none" ) {
            elem.style.display = "";
         }

         // Set elements which have been overridden with display: none
         // in a stylesheet to whatever the default browser style is
         // for such an element
         if ( elem.style.display === "" && isHidden( elem ) ) {
            values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
         }
      } else {

         if ( !values[ index ] ) {
            hidden = isHidden( elem );

            if ( display && display !== "none" || !hidden ) {
               jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
            }
         }
      }
   }

   // Set the display of most of the elements in a second loop
   // to avoid the constant reflow
   for ( index = 0; index < length; index++ ) {
      elem = elements[ index ];
      if ( !elem.style ) {
         continue;
      }
      if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
         elem.style.display = show ? values[ index ] || "" : "none";
      }
   }

   return elements;
}

そしてeach：

each: function( obj, callback, args ) {
   var value,
      i = 0,
      length = obj.length,
      isArray = isArraylike( obj );

   if ( args ) {
      if ( isArray ) {
         for ( ; i < length; i++ ) {
            value = callback.apply( obj[ i ], args );

            if ( value === false ) {
               break;
            }
         }
      } else {
         for ( i in obj ) {
            value = callback.apply( obj[ i ], args );

            if ( value === false ) {
               break;
            }
         }
      }

   // A special, fast, case for the most common use of each
   } else {
      if ( isArray ) {
         for ( ; i < length; i++ ) {
            value = callback.call( obj[ i ], i, obj[ i ] );

            if ( value === false ) {
               break;
            }
         }
      } else {
         for ( i in obj ) {
            value = callback.call( obj[ i ], i, obj[ i ] );

            if ( value === false ) {
               break;
            }
         }
      }
   }

   return obj;
},
于 2013-06-18T04:25:57.000 に答える
1

直通の$('.my_class').hide();方が早いらしい

このテストを見る

また、最初のアプローチはより明確で理解しやすいです

于 2013-06-18T04:26:59.223 に答える