يمكن أن تؤدي شجرة DOM كبيرة إلى إبطاء أداء صفحتك بعدة طرق:
كفاءة الشبكة وأداء التحميل
غالبًا ما تتضمّن شجرة DOM كبيرة العديد من العقد التي لا تظهر عندما يُحمِّل المستخدِم الصفحة لأول مرة، ما يؤدي إلى زيادة تكاليف البيانات للمستخدمين بدون داعٍ ويبطئ وقت التحميل.
أداء بيئة التشغيل
عندما يتفاعل المستخدمون والنصوص البرمجية مع صفحتك، يجب أن يعيد المتصفّح حساب موضع العُقد وتصميمها باستمرار. يمكن أن تؤدي شجرة DOM الكبيرة إلى جانب قواعد الأنماط المعقّدة إلى إبطاء العرض والتفاعل بشكل كبير.
أداء الذاكرة
إذا كان JavaScript يستخدم أدوات اختيار طلبات بحث عامة مثل
document.querySelectorAll('li')، قد يتم تخزين إحالات إلى عدد كبير جدًا من العقد بدون علمك، ما قد يؤدي إلى زيادة عبء الذاكرة على أجهزة المستخدمين.
أسباب تعذُّر إكمال عملية تدقيق حجم DOM في Lighthouse
يُبلغ Lighthouse عن إجمالي عناصر DOM للصفحة والحد الأقصى لعمق DOM للصفحة والحد الأقصى للعناصر الفرعية:
تُبلغ أداة Lighthouse عن الصفحات التي تتضمّن أشجار DOM معيّنة:
- يتم التحذير عندما يحتوي العنصر الأساسي على أكثر من 800 عقدة تقريبًا.
- يشير ذلك المصطلح إلى أخطاء عندما يحتوي العنصر الأساسي على أكثر من 1,400 عقدة تقريبًا.
كيفية تحسين حجم نموذج العناصر في المستند (DOM)
بشكل عام، ابحث عن طرق لإنشاء عُقد DOM عند الحاجة فقط، وتدمير العُقد عندما لا تكون هناك حاجة إليها.
إذا كنت بصدد إرسال شجرة DOM كبيرة، جرِّب تحميل صفحتك وتدوين العقد التي يتم عرضها يدويًا. يمكنك ربما إزالة العقد غير المعروضة من المستند الذي تم تحميله في البداية وإنشاءها فقط بعد تفاعل المستخدِم ذي الصلة، مثل التمرير أو النقر على زر.
إذا كنت تنشئ عقد DOM أثناء التشغيل، يمكن أن تساعدك نقاط التوقف لتغيير DOM في تعديل الشجرة الفرعية في تحديد وقت إنشاء العقد.
إذا لم تتمكّن من تجنُّب استخدام شجرة DOM كبيرة، يمكنك تبسيط أدوات اختيار لغة CSS لتحسين أداء العرض. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة تقليل نطاق ومدى تعقيد عمليات احتساب الأنماط في Google.
لمزيد من التفاصيل، يُرجى الاطّلاع على مقالة تأثير أحجام مخطّط DOM الكبير في التفاعل، والإجراءات التي يمكنك اتّخاذها.
إرشادات خاصة بالمجموعة
Angular
إذا كنت تعرض قوائم كبيرة، يمكنك استخدام التمرير الافتراضي مع مجموعة أدوات تطوير المكوّنات (CDK).
React
- استخدِم مكتبة "عرض المحتوى في النافذة الحالية" مثل
react-windowلتقليل عدد عُقَد DOM التي يتم إنشاؤها في حال عرض العديد من العناصر المتكررة على الصفحة. - يمكنك تقليل عمليات إعادة العرض غير الضرورية باستخدام
shouldComponentUpdateأوPureComponentأوReact.memo. - تخطّي التأثيرات
فقط إلى أن تتغيّر اعتماديات معيّنة في حال استخدام عنصر التحكّم
Effectلتحسين أداء بيئة التشغيل.