هل هناك فرق في الأداء بين محدد jQuery أو متغير

Question

في الآونة الأخيرة ، كنت أتساءل عما إذا كان هناك فرق في الأداء بين تكرار المحدد مرارًا وتكرارًا أو فقط باستخدام VAR وتخزين المحدد في ذلك ويرجع إليه فقط.

$('#Element').dothis();

$('#Element').dothat();

$('#Element').find('a').dothat();

أو فقط

var Object = $('#Element');

Object.dothis();

Object.dothat();

$('a', Object).dothat();

أنا أفضل الطريقة الثانية لأنها تبدو أنظف وأفضل قابلة للصيانة.

Answer 1

من المؤكد أن هناك فرقًا في الأداء ، حيث لا يجب تنفيذ Sizzle في كل مرة ، ومع ذلك ، هناك أيضًا فرق في الوظيفة. إذا حدث أن يتغير DOM بين المكالمات الأولى والثالثة ، فسيظل كائن jQuery المخطط مؤقتًا يحتوي على مجموعة من العناصر القديمة. يمكن أن يحدث هذا في كثير من الأحيان إذا قمت بتخزين Cache مجموعة ثم استخدامه في رد الاتصال.

Answer 2

أنا أفضل الطريقة الثانية. سيكون ذلك أسهل في الحفاظ على الكود حتى لو تغير معرف العنصر أو الفصل.

Answer 3

هناك طريقة سريعة أخرى. إنه سريع مثل الرمز الثاني.

$('#Element')
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Answer 4

تنفق على طريقة غومي

var Object = $('#Element');

Object
   .dothis()
   .dothat()
   .find('a')
      .dothat();

أسرع ، ويخزن الكائن للاستخدام لاحقًا.

Answer 5

الطريقة الثانية لديها فائدة الأداء. قد يكون أو لا يكون رائعًا ولكنه أفضل. في الإصدار الأول ، تقوم بعمل DOM TRAVERSAL 4 مرات ، في الثانية التي تقوم بها فقط 2.

مقالة جيدة جدًا حول تسريع jQuery هنا: http://net.tutsplus.com/tutorialles

Answer 6

يعد تخزين نتائج اختيار jQuery إلى متغير أسرع. وذلك لأن jQuery لا تحتاج إلى البحث عن النتائج في كل مرة تحاول الوصول إليها.

وضعت بعض مقاييس الأداء: http://jsperf.com/jquery-selectors-vs-stored-varable

على Chrome 26.0.1410.63 على Mac OS X 10.8.2:
الاختيار: 40،276 OPS/sec
تخزين المتغير: 594،031،358 ops/sec