المقدمة

المتصفح (Browser) هو برنامج يسمح لنا بالدخول إلى الإنترنت وعرض صفحات الويب. ولكن بعض المطوريين يعتبرون المتصفح كنظام تشغيل كوندوز ولينكس. في هذا المقال سنوضح كيف يتم جلب الصفحات من السيرفر لحين عرضها على المتصفح  بمجرد كتابة رابط (URL) والضغط على Enter، يبدأ المتصفح رحلة معقدة وسريعة لجلب الصفحة وتحويلها إلى محتوى مرئي تفاعلي. وهذه الرحلة ممكن ان نوضحها على شكل خطوات:

الخطوة الأولى: طلب الصفحة (Navigation)

عندما تكتب الرابط وتضغط Enter:

1. يقوم المتصفح أولًا بعملية "DNS Lookup" ليحوّل الاسم (مثل example.com) إلى عنوان IP الحقيقي للخادم.

2. بعد ذلك، ينشأ اتصال عبر بروتوكول TCP مع الخادم، ويُجرى تفاوض على الأمان (TLS) إذا كان الاتصال عبر HTTPS.

الخطوة الثانية: جلب البيانات (Fetching)

بعد أن يصبح الاتصال بالخادم جاهزًا، يقوم المتصفح بإرسال طلب HTTP أو HTTPS للحصول على المحتوى المطلوب.

1. الطلب قد يتضمن ملفات HTML، CSS، JavaScript، صور، أو فيديو.

2. الخادم يردّ باستجابة (Response) تحتوي على البيانات وأحيانًا تعليمات إضافية (مثل إعادة التوجيه أو التخزين المؤقت).

3. إذا كانت الصفحة تحتوي على روابط إلى ملفات خارجية، يبدأ المتصفح بطلبها أيضًا بشكل متوازي لتحسين السرعة.

الخطوة الثالثة: التحليل (Parsing)

بعد وصول ملف HTML، يبدأ المتصفح بقراءته حرفًا حرفًا وبناء شجرة DOM (Document Object Model) التي تمثل البنية الهيكلية للصفحة.
في الوقت نفسه، إذا اكتشف المتصفح ملفات CSS، فإنه يبني شجرة أخرى تسمى CSSOM (CSS Object Model) التي تحدد شكل العناصر وألوانها وخطوطها.

ثم يدمج المتصفح DOM مع CSSOM لتشكيل Render Tree، وهي الخطة التي تحدد ما سيتم رسمه على الشاشة بالضبط.

معلومة مهمة: ملفات JavaScript يمكن أن توقف عملية التحليل مؤقتًا إذا كانت تحتوي على أكواد تؤثر على الصفحة، لذلك يستخدم المطورون خصائص مثل defer وasync لتسريع التحميل.

الخطوة الرابعة: التخطيط والرسم (Rendering)

بعد أن يُنشئ المتصفح Render Tree، تبدأ مرحلة عرض الصفحة على الشاشة من خلال ثلاث عمليات أساسية:

1. التخطيط (Layout) 

   • في هذه المرحلة، يحدد المتصفح الموقع والحجم لكل عنصر في الصفحة.

   • يأخذ في الاعتبار حجم الشاشة، اتجاه الصفحة (عمودي أو أفقي)، والقواعد الموجودة في CSS.

   • النتيجة هي مخطط دقيق يوضح أين سيظهر كل عنصر.

2. الرسم (Painting) 

   • بعد تحديد مواقع العناصر، يبدأ المتصفح بتحويلها إلى بكسلات على الطبقات (Layers).

   • هنا يتم تطبيق الألوان، الصور، الظلال، والخطوط.

3. التجميع (Compositing) 

   • إذا كانت الصفحة تحتوي على عناصر متحركة أو مؤثرات، قد يقوم المتصفح برسمها على طبقات منفصلة.

   • في هذه الخطوة، يتم دمج هذه الطبقات وترتيبها لإنتاج الشكل النهائي الذي تراه على الشاشة.

معلومة إضافية: بعض المتصفحات تعرض المحتوى تدريجيًا (Incremental Rendering) حتى قبل اكتمال تحميل الصفحة بالكامل، حتى يشعر المستخدم بسرعة الاستجابة.

الخطوة الخامسة: مكونات المتصفح (Browser Components)

لفهم كيف يعمل المتصفح بشكل كامل، من المهم أن نعرف مكوناته الرئيسية:

1. واجهة المستخدم (User Interface – UI) 

   • تشمل شريط العنوان، أزرار الرجوع والتقدم، شريط البحث، وقوائم الإعدادات.

2. محرك التصفح (Browser Engine) 

   • 
     

     هو المسؤول عن التنسيق بين واجهة المستخدم ومحرك العرض، ويحدد ماذا ومتى يتم عرض المحتوى.

3. محرك العرض (Rendering Engine) 

   • يقوم بتحويل ملفات HTML وCSS وJavaScript إلى محتوى مرئي تراه أمامك.

   • أمثلة: Blink في Chrome، WebKit في Safari، Gecko في Firefox.

4. محرك JavaScript (JavaScript Engine) 

   • يفسّر ويشغل أكواد JavaScript التي تجعل الصفحات تفاعلية.

   • أمثلة: V8 في Chrome، SpiderMonkey في Firefox.

5. الشبكة (Networking)

   • تدير عمليات الاتصال عبر HTTP/HTTPS، وتنزيل الملفات، وإدارة التخزين المؤقت (Cache).

6. التخزين (Storage) 

   • لحفظ البيانات محليًا مثل ملفات الكوكيز (Cookies)، وLocalStorage، وIndexedDB.

الخاتمة

المتصفح هو أداة معقدة تعمل في ثوانٍ معدودة لتحويل الروابط التي ندخلها إلى صفحات مليئة بالمحتوى النصي، الصور، والفيديوهات. تبدأ الرحلة من إدخال الرابط، مرورًا بجلب البيانات وتحليلها، وصولًا إلى رسمها على الشاشة. فهم هذه المراحل يساعد المطورين على تحسين سرعة مواقعهم وتجربة المستخدم بشكل عام.