انتقل إلى محتوى الدرس

Processing Styles and Page Layout معالجة التنسيقات وحساب أبعاد العناصر

افهم بعمق هندسي مسار العرض الحرج داخل المتصفح؛ كيف تتحول أكواد HTML وCSS إلى شجرتي DOM وCSSOM وشجرة العرض، والفرق بين إعادة التخطيط Reflow وإعادة الرسم Repaint والتركيب عبر GPU.
2 صفوف تعليمية
تكنولوجيا الويب
3 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

فور اكتمال شجرتي و، يدمجهما محرك العرض معاً لتكوين شجرة العرض المرئية () ثم ينتقل لمرحلة حساب التخطيط ():

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

تأمل المخطط الآتي الذي يوضح عملية الدمج والفلترة لتوليد شجرة العرض:

الصف 2 صورة توضيحية
مخطط يوضح دمج شجرتي DOM وCSSOM لتكوين شجرة العرض واستبعاد العناصر غير المرئية