إنّ أحجام مخطّط DOM الكبيرة لها تأثير أكبر في التفاعلية مما قد تتوقّع. يوضّح هذا الدليل الأسباب وراء ذلك والإجراءات التي يمكنك اتّخاذها.
وليس هناك طريقة لحل هذه المشكلة: فعند إنشاء صفحة ويب، ستحتوي هذه الصفحة على نموذج كائن المستند (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 الكبيرة في أداء الصفحة؟
تؤثر ملفات DOM الكبيرة في أداء الصفحة بعدة طرق:
- أثناء العرض الأولي للصفحة عند تطبيق CSS على صفحة، يتم إنشاء بنية مشابهة لنموذج DOM تُعرف باسم نموذج محتوى CSS (CSSOM). مع زيادة دقة أدوات اختيار CSS، يصبح نموذج CSSOM أكثر تعقيدًا، ويلزم المزيد من الوقت لتنفيذ عمليات التنسيق والتصميم والتركيب والتلوين اللازمة لعرض صفحة الويب على الشاشة. يؤدي هذا العمل الإضافي إلى زيادة وقت استجابة التفاعلات التي تحدث في وقت مبكر أثناء تحميل الصفحة.
- عندما تعدّل التفاعلات نموذج DOM، إمّا من خلال إدراج عنصر أو حذفه أو من خلال تعديل محتوى نموذج DOM وأنماطه، يمكن أن يؤدي العمل اللازم لعرض هذا التعديل إلى زيادة تكلفة التصميم والأسلوب والتركيب والتلوين بشكل كبير. كما هو الحال مع العرض الأولي للصفحة، يمكن أن تؤدي الزيادة في مدى تحديد أداة اختيار CSS إلى زيادة في عمل العرض عند إدراج عناصر HTML في DOM نتيجة تفاعل.
- عندما تستعلم 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 يقترب من الحدّ الأدنى لتحذير حجم 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، دمج مكونات متعددة في حاوية رئيسية.
ومع ذلك، تتيح لك العديد من الإطارات الأساسية تجنُّب تداخل المكوّنات باستخدام ما يُعرف باسم "المقاطع". تشمل الأطر المستندة إلى المكوّنات التي توفّر أجزاء كميزة ما يلي (على سبيل المثال لا الحصر):
وباستخدام الأجزاء في إطار العمل الذي تختاره، يمكنك تقليل عمق نموذج العناصر في المستند (DOM). إذا كنت قلقًا بشأن تأثير تقسيم بنية DOM في الأنماط، يمكنك الاستفادة من استخدام أوضاع تنسيق أكثر حداثة (وأسرع) مثل flexbox أو grid.
استراتيجيات أخرى يجب أخذها في الاعتبار
حتى إذا بذلت جهدًا في تسطيح شجرة DOM وإزالة عناصر HTML غير الضرورية للحفاظ على DOM بأصغر حجم ممكن، قد يظلّ كبيرًا جدًا ويؤدي إلى بدء الكثير من عمليات المعالجة أثناء تغييره استجابةً لتفاعلات المستخدمين. إذا كنت في هذه الحالة، هناك بعض الاستراتيجيات الأخرى التي يمكنك اتّباعها للحدّ من عمل المعالجة.
اتّبِع نهجًا إضافيًا.
قد تكون في وضع لا تظهر فيه أجزاء كبيرة من صفحتك للمستخدم في البداية عند عرضها لأول مرة. قد تكون هذه فرصة لتحميل HTML الكسول عن طريق حذف هذه الأجزاء من نموذج العناصر في المستند (DOM) عند بدء التشغيل، مع إضافتها عندما يتفاعل المستخدم مع أجزاء الصفحة التي تتطلب جوانب الصفحة المخفية في البداية.
هذه الطريقة مفيدة أثناء التحميل المبدئي وربما حتى بعد ذلك. في عملية تحميل الصفحة الأولية، لن تضطر إلى تنفيذ الكثير من عمليات المعالجة في البداية، ما يعني أنّ الحمولة الأولية لرمز HTML ستكون أخفّ، وسيتم عرضها بشكل أسرع. سيمنح ذلك التفاعلات خلال هذه الفترة الحاسمة المزيد من الفرص للظهور مع منافسة أقل على جذب انتباه سلسلة المحادثات الرئيسية.
وإذا كان لديك العديد من أجزاء الصفحة التي يتم إخفاؤها في البداية عند التحميل، قد يؤدي ذلك أيضًا إلى تسريع التفاعلات الأخرى التي تؤدي إلى تنفيذ عملية إعادة العرض. ومع ذلك، عندما تضيف التفاعلات الأخرى المزيد إلى نموذج DOM، سيزداد عمل العرض مع نمو نموذج DOM على مدار دورة حياة الصفحة.
قد تكون إضافة عناصر إلى نموذج العناصر في المستند (DOM) بمرور الوقت أمرًا صعبًا، وتتضمّن حلولاً خاصة بها. وإذا كنت تسير في هذا المسار، فمن المحتمل أنك ترسل طلبات الشبكة للحصول على البيانات لتعبئة رمز HTML الذي تنوي إضافته إلى الصفحة استجابةً لتفاعل المستخدم. على الرغم من أنّ طلبات الشبكة قيد التنفيذ لا يتم احتسابها ضمن مقياس INP، إلا أنّها يمكن أن تزيد من وقت الاستجابة المُلاحظ. إذا أمكن، اعرض مؤشرًا دوّارًا للتحميل أو مؤشرًا آخر على أنه يتم جلب البيانات حتى يدرك المستخدمون حدوث شيء ما.
الحدّ من تعقيد أداة اختيار لغة CSS
عندما يحلّل المتصفّح أدوات الاختيار في لغة CSS، يجب أن يجتاز شجرة نموذج العناصر في المستند (DOM) لفهم كيفية تطبيق أدوات الاختيار هذه وما إذا كانت مطبّقة على التنسيق الحالي. وكلما زادت تعقيد هذه المحدّدات، زاد العمل الذي يتعين على المتصفّح تنفيذه لإجراء كلّ من العرض الأوّلي للصفحة، بالإضافة إلى زيادة عمليات إعادة احتساب الأنماط وعمل التنسيق إذا تغيّرت الصفحة نتيجة تفاعل.
استخدام السمة content-visibility
توفّر CSS سمة content-visibility، وهي طريقة فعّالة لعرض عناصر DOM خارج الشاشة بشكل بطيء. وعندما تقترب العناصر من مساحة العرض، يتم عرضها عند الطلب. لا تؤدي مزايا content-visibility إلى خفض مقدار كبير من العمل أثناء العرض الأولي للصفحة، ولكنها أيضًا تتخطّى عمل العرض للعناصر خارج الشاشة عندما يتم تغيير نموذج العناصر في المستند (DOM) للصفحة نتيجةً لتفاعل المستخدم.
الخاتمة
إنّ تقليل حجم DOM إلى الحدّ الأدنى من المحتوى الضروري فقط هو طريقة جيدة لتحسين مقياس INP لموقعك الإلكتروني. ومن خلال إجراء ذلك، يمكنك تقليل الوقت الذي يستغرقه المتصفّح لتنفيذ عمل التنسيق والعرض عند تعديل DOM. حتى إذا لم يكن بإمكانك تقليل حجم DOM بشكل مناسب، هناك بعض الأساليب التي يمكنك استخدامها لعزل عمل العرض في شجرة فرعية في DOM، مثل احتواء CSS وسمة CSS content-visibility.
وبصرف النظر عن تنفيذ ذلك، فإن إنشاء بيئة يتم فيها تقليل عمل العرض - وكذلك تقليل مقدار عمل العرض الذي تؤديه صفحتك استجابةً للتفاعلات - ستكون النتيجة أن موقع الويب سيشعر بمزيد من الاستجابة للمستخدمين عند تفاعلهم معهم. وهذا يعني أنّ معدّل INP لموقعك الإلكتروني سيكون أقل، ما يؤدّي إلى تجربة أفضل للمستخدم.