عندما نقوم بتطوير تطبيقات الإنترنت الغنية (RIA)، غالبًا ما نكتب بعض نصوص جافا سكريبت لتعديل أو إضافة عناصر الصفحة. يتم إكمال هذه المهام في النهاية بواسطة DOM - أو نموذج كائن المستند - وستؤثر طريقة التنفيذ لدينا على سرعة استجابة التطبيق.
ستؤدي عمليات DOM إلى إعادة تحليل المتصفح (إعادة التدفق)، وهي عملية حسابية للمتصفح تحدد كيفية عرض عناصر الصفحة. سيؤدي تعديل DOM مباشرةً، أو تعديل نمط CSS لعنصر ما، أو تعديل حجم نافذة المتصفح إلى إعادة التحليل. قراءة خصائص تخطيط العنصر مثل offsetHeithe أو offsetWidth ستؤدي أيضًا إلى إعادة التحليل. تستغرق إعادة التحليل وقتًا حسابيًا، لذا كلما قل تشغيل عملية إعادة التحليل، أصبح التطبيق أسرع.
عادةً ما تقوم عمليات DOM إما بتعديل عناصر الصفحة الموجودة أو إنشاء عناصر صفحة جديدة. تغطي حلول التحسين الأربعة التالية طريقتين لتعديل وإنشاء عقد DOM، مما يساعدك على تقليل عدد المرات التي تؤدي إلى إعادة تحليل المتصفح.
الحل 1: تعديل DOM عن طريق تبديل أسماء فئات CSS
يتيح لنا هذا الحل تعديل سمات نمط متعددة لعنصر وعناصره الفرعية مرة واحدة وتشغيل إعادة تحليل واحدة فقط.
يحتاج:
( ملاحظة emu : من الواضح أن مؤلف المقال الأصلي كان يعاني من ماس كهربائي في دماغه عندما كتب هذا، ووضع المشكلات التي يتعين حلها في وضع معالجة DOM اللاحق خارج التدفق هنا. ومع ذلك، فهو كذلك من السهل فهم المؤلف من خلال رمز العرض التوضيحي. المشكلة التي أريد حقًا وصفها، لذلك لن يقوم الاتحاد الاقتصادي والنقدي بإعادة إنتاج النص الأصلي)
نحتاج الآن إلى كتابة دالة لتعديل العديد من قواعد أنماط الارتباط التشعبي. من السهل جدًا تنفيذه، فقط قم بتغيير السمات المقابلة لهذه القواعد واحدة تلو الأخرى. لكن المشكلة هي أنه في كل مرة يتم فيها تعديل سمة النمط، سيؤدي ذلك إلى إعادة تحليل الصفحة.
وظيفة تحديد مرساة (عنصر) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
حل:
لحل هذه المشكلة، يمكننا أولاً إنشاء اسم نمط ووضع جميع قواعد النمط المراد تعديلها على اسم الفئة هذا، ثم نضيف اسم الفئة الجديد هذا إلى الارتباط التشعبي، حتى نتمكن من إضافة عدة قواعد نمطية فقط أثار. ميزة أخرى لهذا النموذج هي أنه يحقق أيضًا الفصل بين الأداء والمنطق.
.selectedAnchor {
وزن الخط: غامق؛
زخرفة النص: لا شيء؛
اللون: #000؛
}
وظيفة تحديد مرساة (عنصر) {
element.className = 'selectedAnchor';
}