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