يأتي الوصول إلى عناصر DOM بتكلفة ، وتعديل عناصر DOM أكثر تكلفة لأنه يتسبب في إعادة حساب المتصفح في التغييرات الهندسية للصفحة.
بطبيعة الحال ، فإن أسوأ حالة تتمثل في الوصول إلى العنصر المعدل في الحلقة ، وخاصة عمليات الحلقة على مجموعات عناصر HTML.
على سبيل المثال:
نسخة الكود كما يلي:
<!-قبل التحسين->
<script type = "text/javaScript">
وظيفة innerhtmlloop () {
لـ (var count = 0 ؛ count <15000 ؛ count ++) {
document.getElementById ('هنا'). innerhtml+= 'a' ؛
}
}
</script>
حلقات هذه الوظيفة لتعديل محتوى عنصر الصفحة. تكمن المشكلة في هذا الرمز في أن كل تكرار حلقة ، يتم الوصول إلى العنصر مرتين: بمجرد قراءة خاصية InnerHTML وإعادة كتابتها بمجرد إعادة كتابتها.
تتمثل النهج الأكثر كفاءة في استخدام المتغيرات المحلية لتخزين المحتوى المحدث ثم كتابته في وقت واحد بعد انتهاء الحلقة:
نسخة الكود كما يلي:
<!-بعد التحسين->
<script type = "text/javaScript">
وظيفة innerhtmlloop () {
var content = '' ؛
لـ (var count = 0 ؛ count <15000 ؛ count ++) {
المحتوى+= 'a' ؛
}
document.getElementById ('هنا'). innerhtml+= content ؛
}
</script>
كلما زاد عدد المرات التي تصل فيها إلى DOM ، كلما تم تشغيل الرمز البطيء. لذلك ، عندما تكون هناك حلول أخرى لاستبدالها ، يجب أن نحاول تقليل عدد الزيارات إلى DOM.