تاريخ النشر: 8 أكتوبر 2025
يمكن أن يؤدي حجم DOM الكبير إلى زيادة مدة عمليات احتساب الأنماط والتنسيقات، ما يؤثر في سرعة استجابة الصفحة. ويزيد حجم DOM الكبير أيضًا من استخدام الذاكرة.
لا يمثّل عمق شجرة DOM مشكلة في الأداء بحد ذاته، ولكنّه أحد أعراض أنماط التصميم التي تستخدم تداخل العناصر غير الضروري.
تأخذ هذه الإحصاءات في الاعتبار DOM بالكامل، بما في ذلك داخل جذور الظل. يتجاهل عُقد DOM التي ليست عناصر أيضًا. ويتجاهل أيضًا محتوى <iframe>.
ما يجب عليك فعله:
- إجمالي العناصر: العدد الإجمالي للعناصر في نموذج DOM الخاص بصفحتك.
- الحد الأقصى للعناصر المضمّنة في DOM: الحد الأقصى لعمق شجرة نموذج العناصر في المستند.
- الحد الأقصى للعناصر الفرعية: العنصر الذي يتضمّن أكبر عدد من العناصر الفرعية
كيفية اجتياز هذه الرسالة المتضمّنة إحصاءات
لا ينجح هذا الإجراء إلا إذا كانت هناك إعادة احتساب كبيرة للتصميم أو النمط تتجاوز مدتها 40 ملي ثانية.
- يتضمّن تحديث التنسيق الكبير أكثر من 100 عنصر من عناصر التنسيق (وهي العناصر تقريبًا).
- تؤثّر عملية إعادة احتساب الأنماط الكبيرة في أكثر من 300 عنصر.
في حال حدوث خطأ، يبرز هذا التحليل هذه الأحداث في الرسم البياني المفصّل ضمن لوحة الأداء.
لتقليل تكلفة هذه الأحداث، اتّبِع الخطوات التالية:
- كيفية قياس تكلفة أدوات اختيار لغة CSS وتقليل تعقيد الأنماط
- قلِّل عمق DOM من خلال تقليل التداخل غير الضروري.
- ننصحك باستخدام مكوّنات الويب لاستخدام Shadow DOM، مع العلم أنّ ذلك لن يقلّل من حجم DOM، ولكنّه سيقلّل من تكلفة إعادة احتساب الأنماط.
إرشادات خاصة بكل حزمة
تقدّم هذه الإحصاءات أيضًا إرشادات خاصة بالحزمة للصفحات التي تستخدم التقنيات التالية:
Angular
في حال عرض قوائم كبيرة، استخدِم التمرير الافتراضي مع مجموعة تطوير المكوّنات (CDK).
React
- استخدِم مكتبة "عرض المحتوى في النافذة الحالية" مثل
react-windowلتقليل عدد عُقَد DOM التي يتم إنشاؤها في حال عرض العديد من العناصر المتكررة على الصفحة. - يمكنك تقليل عمليات إعادة العرض غير الضرورية باستخدام
shouldComponentUpdateأوPureComponentأوReact.memo. - تخطّي التأثيرات
فقط حتى يتم تغيير تبعيات معيّنة في حال استخدام موضع الإدراج
Effectلتحسين مستوى أداء وقت التشغيل.