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