مدى تأثير أحجام DOM الكبير على التفاعل، وما يمكنك القيام به حيال ذلك

يكون لأحجام DOM الكبيرة تأثير على التفاعل أكثر مما قد تظن. يوضّح هذا الدليل الأسباب وراء ذلك والإجراءات التي يمكنك اتّخاذها.

Jeremy Wagner

وليس هناك طريقة لحل هذه المشكلة: فعند إنشاء صفحة ويب، ستحتوي هذه الصفحة على نموذج كائن المستند (DOM). يمثّل DOM بنية محتوى HTML الخاص بصفحتك، ويمنح JavaScript وCSS إمكانية الوصول إلى بنية الصفحة ومحتواها.

ولكن تكمن المشكلة في أن حجم نموذج DOM يؤثر في قدرة المتصفح على عرض الصفحة بسرعة وكفاءة. بوجه عام، كلما زاد حجم نموذج العناصر في المستند (DOM)، زادت تكلفة عرض هذه الصفحة في البداية وتعديل عرضها لاحقًا في مراحل نشاط الصفحة.

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

متى يكون حجم نموذج العناصر في المستند (DOM) للصفحة كبيرًا جدًا؟

وفقًا لأداة Lighthouse، يكون حجم DOM للصفحة زائدًا عندما يتجاوز 1,400 عُقدة. ستبدأ أداة Lighthouse في عرض تحذيرات عندما يتجاوز نموذج العناصر في المستند (DOM) للصفحة 800 عقدة. خذ HTML التالي كمثال:

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

في الرمز البرمجي أعلاه، هناك أربعة عناصر DOM: عنصر <ul> وعناصر <li> الفرعية الثلاثة التابعة له. ستتضمن صفحتك على الويب بالتأكيد العديد من العُقد الإضافية، لذلك من المهم فهم ما يمكنك فعله للحفاظ على أحجام نموذج DOM.

كيف تؤثر نماذج DOM الكبيرة في أداء الصفحة؟

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

1. أثناء العرض الأولي للصفحة عند تطبيق لغة CSS على إحدى الصفحات، يتمّ إنشاء بنية مشابهة لنموذج كائن DOM يُعرف باسم نموذج كائن CSS (CSSOM). مع زيادة محددات CSS في التحديد، يصبح CSSOM أكثر تعقيدًا، ويتطلب الأمر مزيدًا من الوقت لتشغيل التخطيط والتصميم والإنشاء والطلاء اللازم لرسم صفحة الويب إلى الشاشة. ويؤدي هذا العمل الإضافي إلى زيادة وقت استجابة التفاعلات التي تحدث مبكرًا أثناء تحميل الصفحة.
2. عندما تعدّل التفاعلات نموذج العناصر في المستند (DOM) سواء من خلال إدراج عنصر أو حذفه أو تعديل محتوى وأنماط نموذج العناصر في المستند (DOM)، قد يؤدي العمل اللازم لعرض هذا التحديث إلى تكلفة كبيرة جدًا في التخطيط والتصميم والتركيب والطلاء. كما هو الحال مع العرض الأولي للصفحة، يمكن أن تضيف الزيادة في خصوصية أداة اختيار لغة CSS إلى عمل العرض عند إدراج عناصر HTML في نموذج العناصر في المستند (DOM) كنتيجة لتفاعل.
3. عندما تستعلم JavaScript من DOM، يتم تخزين المراجع إلى عناصر DOM في الذاكرة. على سبيل المثال، في حال استدعاء document.querySelectorAll لاختيار جميع عناصر <div> في صفحة ما، قد تكون تكلفة الذاكرة كبيرة إذا عرضت النتيجة عددًا كبيرًا من عناصر DOM.

يمكن أن يؤثر كل ذلك على التفاعل، لكن العنصر الثاني في القائمة أعلاه له أهمية خاصة. إذا نتج عن أحد التفاعلات تغيير في نموذج العناصر في المستند (DOM)، قد يبدأ الكثير من العمل الذي قد يساهم في انخفاض مقياس INP على الصفحة.

كيف يمكنني قياس حجم DOM؟

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

تتضمن الطريقة الأبسط استخدام وحدة تحكم JavaScript في أدوات المطوّرين في أي متصفح رئيسي. للحصول على العدد الإجمالي لعناصر HTML في DOM، يمكنك استخدام التعليمة البرمجية التالية في وحدة التحكم بعد تحميل الصفحة:

document.querySelectorAll('*').length;

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

إذا كان حجم نموذج العناصر في المستند (DOM) يقترب من الحدّ الأدنى لتحذير حجم DOM في Lighthouse أو إذا تعذّر إكماله، تتمثل الخطوة التالية في معرفة كيفية تقليل حجم نموذج العناصر في المستند (DOM) لتحسين قدرة صفحتك على الاستجابة لتفاعلات المستخدمين لتحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP) على موقعك الإلكتروني.

كيف يمكنني قياس عدد عناصر DOM المتأثرة بتفاعل؟

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

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

كيف يمكنني تقليل حجم DOM؟

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

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

عندما ترى أنماطًا كهذه، يمكنك على الأرجح تبسيطها من خلال تسوية بنية نموذج العناصر في المستند (DOM). وسيؤدي ذلك إلى تقليل عدد عناصر DOM، وقد يمنحك على الأرجح فرصة لتبسيط أنماط الصفحات.

قد يكون عمق نموذج العناصر في المستند (DOM) أيضًا عرضًا لأُطر العمل التي تستخدمها. وعلى وجه الخصوص، تتطلب أطر العمل المستندة إلى المكوّنات، مثل تلك التي تعتمد على JSX، دمج مكونات متعددة في حاوية رئيسية.

ومع ذلك، تسمح لك العديد من أطر العمل بتجنب دمج المكونات باستخدام ما يُعرف باسم الأجزاء. تتضمن أطر العمل المستندة إلى المكونات التي توفر الأجزاء كميزة (على سبيل المثال لا الحصر) ما يلي:

• التفاعل
• واجهة
• Vue
• Svelte

وباستخدام الأجزاء في إطار العمل الذي تختاره، يمكنك تقليل عمق نموذج العناصر في المستند (DOM). إذا كنت قلقًا بشأن تأثير تقسيم بنية DOM في الأنماط، يمكنك الاستفادة من استخدام أوضاع تنسيق أكثر حداثة (وأسرع) مثل flexbox أو grid.

استراتيجيات أخرى يجب أخذها في الاعتبار

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

ضع في اعتبارك الأسلوب الإضافي

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

هذه الطريقة مفيدة أثناء التحميل المبدئي وربما حتى بعد ذلك. بالنسبة إلى التحميل الأوّلي للصفحة، يكون عرض المحتوى أقل في البداية، ما يعني أنّ حمولة HTML الأولية ستكون أخف وسيتم عرضها بسرعة أكبر. سيمنح ذلك التفاعلات خلال هذه الفترة الحاسمة فرصًا أكبر لتنفيذها بقدر أقل من المنافسة على جذب سلسلة المحادثات الرئيسية.

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

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

الحدّ من تعقيد أداة اختيار لغة CSS

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

استخدام السمة content-visibility

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

الخاتمة

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

وبصرف النظر عن تنفيذ ذلك، فإن إنشاء بيئة يتم فيها تقليل عمل العرض - وكذلك تقليل مقدار عمل العرض الذي تؤديه صفحتك استجابةً للتفاعلات - ستكون النتيجة أن موقع الويب سيشعر بمزيد من الاستجابة للمستخدمين عند تفاعلهم معهم. وهذا يعني أنّه سيكون لديك مقياس INP أقل لموقعك الإلكتروني، ما يؤدي إلى تحسين تجربة المستخدم.

صورة رئيسية من Unسباش، من تأليف لويس ريد