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