كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم
تعرّف إلى ما يفعله المتصفح ببايتات HTML وCSS: بناء DOM وCSSOM، وحساب التخطيط، ورسم وحدات البكسل.
كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
من وحدات البايت إلى وحدات البكسل
عندما يتلقى المتصفح وحدات بايت HTML من الخادم، تحوّلها عملية متعددة الخطوات إلى وحدات البكسل التي ترونها على الشاشة. يساعدكم فهم مسار المعالجة هذا على تحسين الأداء وفهم أسباب العيوب المرئية.
الخطوة 1 — تحليل HTML: بناء DOM
يقرأ محلّل HTML في المتصفح تدفق وحدات البايت وينشئ Document Object Model (DOM) — وهي شجرة من العقد تمثل كل عنصر HTML وعقدة نص وتعليق في المستند.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'الخطوة 2 — تحليل CSS: بناء CSSOM
في الوقت نفسه، تُحلّل وحدات بايت CSS إلى CSS Object Model (CSSOM) — وهي شجرة من قواعد التنسيق. وتُعد CSS مانعة للتصيير، إذ لا يرسم المتصفح وحدات البكسل حتى يحسب الأنماط للمحتوى المرئي.
الخطوة 3 — شجرة التصيير
يدمج المتصفح DOM وCSSOM في Render Tree. ولا تُدرج إلا العقد المرئية — إذ تُستبعد العناصر التي تحتوي على display:none. وتحتفظ كل عقدة في شجرة التصيير بالنمط المحسوب الذي ستُرسم به.
الخطوة 4 — التخطيط (إعادة التدفق)
يحسب التخطيط الموضع والحجم الدقيقين لكل عقدة في شجرة التصيير باستخدام نموذج الصندوق وعرض إطار العرض. ويُسمى هذا أيضًا إعادة التدفق. والتخطيط عملية مكلفة؛ لذلك تجنبوا تشغيله بشكل متكرر في JavaScript.
الخطوة 5 — الرسم
يحوّل الرسم التخطيط إلى وحدات بكسل فعلية على الشاشة. يرسم المتصفح الخلفيات والحدود والنصوص والصور طبقةً تلو الأخرى. وتنشئ بعض العناصر طبقات تركيب خاصة بها لإجراء التصيير باستخدام تسريع GPU.
الخطوة 6 — التركيب
يدمج مركّب المتصفح الطبقات المرسومة في الإطار النهائي ويرسله إلى الشاشة. ويتيح استخدام transform وopacity في الرسوم المتحركة للمركّب تشغيلها على GPU، مع تجاوز التخطيط والرسم بالكامل.
ما الذي يمنع التصيير؟
تمنع CSS الموجودة في <head> التصيير. وتمنع JavaScript افتراضيًا التحليل والتصيير معًا. استخدموا defer في وسوم script لتحليل JS بعد HTML من دون منع التصيير.
<script src="app.js" defer></script>مسار التصيير الحرج
يمثل Critical Rendering Path التسلسل الممتد من تلقي وحدات بايت HTML إلى عرض أول بكسل. ويعني تحسينه تقليل عدد الموارد المانعة للتصيير وحجمها، وتأجيل JavaScript وCSS غير الضروريتين.
إعادة التدفق مقابل إعادة الرسم
يؤدي تغيير خصائص التخطيط (width, margin, position) إلى إعادة التدفق وإعادة الرسم. أما تغيير الخصائص المرئية فقط (color, background) فيؤدي إلى إعادة الرسم فحسب. ويؤدي تغيير transform أو opacity إلى التركيب فقط. لذلك فضّلوا العملية الأقل تكلفة.
DevTools: عرض المخطط الزمني للرسم
في Chrome DevTools، افتحوا لوحة Performance، وسجّلوا تحميل الصفحة، ثم افحصوا المخطط المتتابع. سترون أحداث Painting باللون الأخضر، ويمكنكم تحديد العناصر التي تتسبب في عمليات تخطيط مكلفة.
تحقق سريع
ما الخطوة التي تحسب الحجم والموضع الدقيقين لكل عنصر في الصفحة؟
مراجعة: مسار التصيير
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite. تغذي كل خطوة الخطوة التالية. ويعني تحسين مسار التصيير الحرج تقصير هذا المسار حتى يظهر المحتوى المرئي الأول بأسرع وقت ممكن.
الأسئلة الشائعة
هل درس «كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم» مجاني؟
نعم — نص درس «كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم»؟
تعرّف إلى ما يفعله المتصفح ببايتات HTML وCSS: بناء DOM وCSSOM، وحساب التخطيط، ورسم وحدات البكسل. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المتصفحات وDNS وHTTP: دورة حياة الطلب
- HTML وCSS وJavaScript: مهمة كل طبقة
- كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم
- أدوات المطور: فتح DevTools واستخدامها