تجنُّب زيادة حجم عناصر DOM

يمكن أن تؤدي شجرة عناصر DOM الكبيرة إلى إبطاء أداء صفحتك بطرق متعددة:

  • كفاءة الشبكة وأداء التحميل

    غالبًا ما تتضمّن شجرة نماذج العناصر في المستند (DOM) العديد من العُقد غير المرئية عندما يُحمِّل المستخدم الصفحة لأول مرة، ما يؤدي إلى زيادة تكاليف البيانات للمستخدمين بدون داعٍ وإبطاء وقت التحميل.

  • الأداء في وقت التشغيل

    وبينما يتفاعل المستخدمون والنصوص البرمجية مع صفحتك، يجب أن يعيد المتصفح احتساب موضع العُقد وتصميمها باستمرار باستمرار. يمكن أن تؤدي شجرة DOM الكبيرة مع قواعد النمط المعقّدة إلى إبطاء العرض بشكل كبير.

  • أداء الذاكرة

    إذا كان JavaScript يستخدم أدوات اختيار عامة لطلبات البحث مثل document.querySelectorAll('li')، قد يتم تخزين مراجع لعدد كبير جدًا من العُقد بدون قصد، ما قد يؤدي إلى إرباك إمكانات الذاكرة لأجهزة المستخدمين.

كيفية تعذُّر التدقيق في حجم Lighthouse DOM

تسجّل Lighthouse إجمالي عناصر DOM للصفحة، والحدّ الأقصى لعمق DOM، والحد الأقصى لعدد العناصر الفرعية لديه:

لقطة شاشة لأداة Lighthouse تتجنّب التدقيق في حجم عناصر DOM الزائد

يضع Lighthouse علامة على الصفحات التي تحتوي على أشجار DOM التي:

  • يتم إرسال تحذير عندما يحتوي عنصر النص على أكثر من 800 عقدة تقريبًا.
  • أخطاء عند احتواء عنصر النص على أكثر من 1,400 عقدة تقريبًا.

كيفية تحسين حجم DOM

بشكل عام، ابحث عن طرق لإنشاء عُقد DOM عند الحاجة فقط، وتدمير العُقد عندما لا تكون هناك حاجة إليها.

إذا كنت تشحن حاليًا شجرة بيانات DOM كبيرة، حاوِل تحميل صفحتك وملاحظة العُقد المعروضة يدويًا. ربما يمكنك إزالة العُقد غير المعروضة من المستند الذي تم تحميله في البداية وإنشائها فقط بعد تفاعل ذي صلة من المستخدم، مثل التمرير أو النقر على زر.

في حال إنشاء عُقد DOM في وقت التشغيل، يمكن أن تساعدك Subtree Modification DOM Change DOM Change Breakpoints في تحديد وقت إنشاء العُقد.

إذا لم تتمكّن من تجنُّب عرض شجرة نموذج العناصر في المستند (DOM) بحجم كبير، هناك طريقة أخرى لتحسين أداء العرض وهي تبسيط أدوات اختيار لغة CSS. راجع تقليل نطاق وتعقيد عمليات حساب الأنماط من Google للحصول على مزيد من المعلومات.

إرشادات خاصة بحِزم البيانات

Angular

إذا كنت تعرض قوائم كبيرة، استخدِم التمرير الافتراضي مع مجموعة تطوير المكوّنات (CDK).

تفاعل

  • استخدِم مكتبة "عرض المحتوى في النوافذ" مثل react-window لتقليل عدد عُقد DOM التي تم إنشاؤها إذا كنت تعرض العديد من العناصر المتكررة على الصفحة.
  • عليك تقليل عمليات إعادة العرض غير الضرورية باستخدام shouldComponentUpdate أو PureComponent أو React.memo.
  • يمكنك تخطّي التأثيرات فقط حتى تتغير تبعيات معيّنة إذا كنت تستخدم عنصر الجذب Effect لتحسين أداء وقت التشغيل.

المراجِع