ما مدى تكلفة استدعاءات وظائف JS (مقارنة بتخصيص الذاكرة للمتغير)؟

Question

بالنظر إلى بعض رموز JS مثل تلك الموجودة هنا:

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

هل سيكون الكود أسرع إذا وضعنا نتيجة getElementsByName في متغير قبل الحلقة ثم استخدمنا المتغير بعد ذلك؟

لست متأكدًا من حجم التأثير في الحياة الواقعية، مع النتيجة getElementsByName تحتوي عادةً على أقل من 10 عناصر.أود أن أفهم الآليات الأساسية على أي حال.

وأيضًا، إذا كان هناك أي شيء آخر جدير بالملاحظة حول الخيارين، فيرجى إخباري.

Answer 1

قطعاً.الذاكرة المطلوبة لتخزين ذلك ستكون مجرد مؤشر لكائن DOM وهذا بشكل كبير أقل إيلامًا من إجراء بحث DOM في كل مرة تحتاج فيها إلى استخدام شيء ما!

الكود المثالي:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

Answer 2

التخزين المؤقت للبحث عن الممتلكات قد يساعد البعض، ولكن جثبت أن الضغط على طول المصفوفة قبل بدء الحلقة يكون أسرع.

لذا فإن الإعلان عن متغير في الحلقة يحمل قيمة المقياس_select.length سيؤدي إلى تسريع الحلقة بأكملها بعض الشيء.

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;

Answer 3

قد يؤدي التنفيذ الذكي لـ DOM إلى التخزين المؤقت الخاص به، مما يؤدي إلى إبطال ذاكرة التخزين المؤقت عندما يتغير شيء ما.ولكن لا يمكن الاعتماد على جميع DOMs اليوم لتكون بهذا الذكاء (سعال أي سعال) لذا فمن الأفضل أن تفعل ذلك بنفسك.

Answer 4

من حيث المبدأ، هل سيكون الكود أسرع إذا وضعنا نتيجة getElementsByName في متغير قبل الحلقة ثم استخدمنا المتغير بعد ذلك؟

نعم.

Answer 5

استخدم المتغيرات.إنها ليست باهظة الثمن في JavaScript ومن المؤكد أن استدعاءات الوظائف أبطأ.إذا قمت بالتكرار 5 مرات على الأقل عبر document.getElementById() فاستخدم متغيرًا.الفكرة هنا ليست فقط أن استدعاء الوظيفة بطيء، ولكن هذه الوظيفة المحددة بطيئة جدًا لأنها تحاول تحديد موقع العنصر بالمعرف المحدد في DOM.

Answer 6

@ أولي

يعد التخزين المؤقت لخاصية الطول للعناصر التي تم جلبها في متغير فكرة جيدة أيضًا:

var scaleSelect = document.getElementsByName('scale_select');
var scaleSelectLength = scaleSelect.length;

for (var i = 0; i < scaleSelectLength; i += 1)
{
    // scaleSelect[i]
}

Answer 7

ليس هناك أي فائدة من تخزين ScaleSelect.length في متغير منفصل؛إنه في الواقع موجود بالفعل في واحد - ScaleSelect.length هو مجرد سمة من سمات مصفوفة ScaleSelect، وعلى هذا النحو، فهو سريع الوصول إليه مثل أي متغير ثابت آخر.

Answer 8

أعتقد ذلك.في كل مرة يتم تكرارها، يحتاج المحرك إلى إعادة تقييم عبارة document.getElementsByName.

ومن ناحية أخرى، إذا تم حفظ القيمة في متغير، فستكون لها القيمة بالفعل.