DOM (نموذج كائن المستند) هو الاسم العام للبنية الشجرية لعلامات HTML. تأثيره على سرعة الصفحة هو أنه كلما كانت بنية HTML الخاصة بك أكثر تعقيدًا أثناء عرض الصفحة، كلما كانت صفحتك أبطأ.
وفقًا للمنارة، فإن تعقيد يتم قياس بنية DOM باستخدام ثلاثة مقاييس. لتزويد هذه المقاييس بنقاطها المرجعية:
- يجب أن يكون العدد الإجمالي للعلامات أقل من 1500
- يجب أن يكون الحد الأقصى لعمق العلامة أقل من 32
- يجب أن يكون الحد الأقصى لعدد العلامات الفرعية أقل من 60
في المثال أعلاه، إجمالي عدد العلامات ضعيف، والحد الأقصى لعمق العلامة جيد، ولكن الحد الأقصى لعدد العلامات الفرعية ضعيف.
يقع تحسين عناصر DOM بالكامل على عاتق أصحاب المصلحة في الواجهة الأمامية. كل علامة يتم اختيارها بشكل عشوائي أو تعسفي عند إنشاء رمز الصفحة لأول مرة لها تكلفة بمجرد اكتمال المشروع. ولذلك، فإننا ندعو جميع مطوري الواجهة الأمامية إلى دقيقة صمت وفتح أعينهم.
تتضمن النقاط التي يؤثر فيها DOM المتضخم سلبًا على أداء الصفحة ما يلي:
- سوف تواجه الصفحات التي تحتوي على عدد كبير من العقد (العلامات). ازدحام الشبكة وصعوبة التحميل بسبب حجمها الكبير، وبالتالي زيادة TTFB (الوقت حتى البايت الأول).
- تقديم العقد المحملة للإنشاء مواقفهم وأساليبهم تستغرق وقتا، وبالتالي زيادة FCP (الطلاء الأول للمحتوى).
- مع زيادة عدد العقد، يتم تحميل الحمل اللازم تعمل عمليات جافا سكريبت على إثقال كاهل الذاكرة، زيادة TFT (وقت التفاعل).
لتوضيح تحسين DOM بمثال بسيط للغاية، ضع في اعتبارك ما يلي حيث تم تقليل عدد وعمق DOM:
<div id="nav-element">
<ul>
</ul>
</div>بدلاً من القيام بذلك:
<ul id="nav-element">
</ul>
من الضروري القيام بذلك: الطريقتان الموصى بهما لتقليل حجم DOM هما التحميل البطيء وترقيم الصفحات. نظرًا لأن هياكل البطاقات في صفحات القائمة تحتوي على الكثير من DOM، فمن المقترح التمرير اللانهائي أو ترقيم الصفحات. عند تحديد عدد العناصر في ترقيم الصفحات، يجب بالتأكيد مراعاة معايير قياس DOM. الوقت الذي يعتبر عادة ل عدد المنتجات في ترقيم الصفحات هو 15-20 ثانية، ولكن يجب حساب هذا الجزء فعليًا من جانب أصحاب المصلحة في الواجهة الأمامية، مع الأخذ في الاعتبار حجم DOM.
أحد الحلول البسيطة للغاية هو عدم إضافة عناصر التي لا تكون مرئية على الصفحة إلى HTML دون إخفائها باستخدام CSS. إذا كان العنصر بحاجة إلى العرض، فيجب استدعاؤه لاحقًا وإظهاره للمستخدم. يجب أن تدرك أن إخفاء العناصر باستخدام CSS يؤدي إلى توسيع DOM.
مصادر:
