🔹 4. تحميل الموارد الإضافية (Loading Resources)

أثناء قراءة ملف HTML، المتصفح ممكن يلاقي:

• ملفات CSS → لتحسين التصميم.

• ملفات JavaScript → لإضافة التفاعلية.

• صور / فيديو / صوت.

➡️ المتصفح يوقف التحليل مؤقتًا (Blocking)، يروح يجيب الملفات دي من السيرفر، وبعدها يكمل.

🔹 5. بناء شجرة الـ CSSOM (CSS Object Model)

• لو فيه ملف CSS، المتصفح يحلله ويبني شجرة تمثل القواعد والتنسيقات.

• بعدين يدمجها مع شجرة الـ DOM.

🔹 6. مرحلة الرسم (Rendering)

• المتصفح يجمع بين:

  • DOM (محتوى الصفحة)

  • CSSOM (التنسيقات)

➡️ ويحولهم إلى ما يسمى بـ Render Tree.

🔹 7. مرحلة العرض النهائي (Painting)

• بناءً على الـ Render Tree، المتصفح يرسم العناصر على الشاشة:

  • يعرض النصوص.

  • يطبق الألوان والخطوط.

  • يظهر الصور والفيديوهات.

🔹 8. التفاعلية (Interactivity)

• لما يلاقي JavaScript، يبدأ تشغيله:

  • مثلًا زر عند الضغط عليه يفتح نافذة منبثقة.

  • أو شريط بحث يظهر نتائج لحظية.

• هنا يبدأ المستخدم يتفاعل مع الصفحة.

🔹 مثال مبسط لرحلة ملف HTML في المتصفح:

1. تكتب الرابط example.com.

2. المتصفح يجيب ملف index.html.

3. يبدأ يقرأ الكود ويبني DOM.

4. يلاقي ملف CSS → يجيبه ويطبقه.

5. يلاقي صورة <img> → يجيبها ويعرضها.

6. يلاقي JavaScript → ينفذه.

7. يرسم الصفحة النهائية ويعرضها لك.

🔹 تشبيه مبسط

تخيل إن HTML = الهيكل العظمي 🦴،
و CSS = الملابس والألوان 👔،
و JavaScript = العضلات والحركة 💪.

المتصفح هو “المصمم” اللي بياخد الهيكل + الملابس + الحركة → ويخليهم شخص كامل قدامك.