المتصفح هو نظام تشغيل

مقدمة

تستخدم المتصفح كل يوم -- تشاهد الفيديو، وتقرأ الأخبار، وتعمل عبر الإنترنت. ولكن هل تساءلت يوماً: عندما تكتب عنوان URL في شريط العنوان وتضغط Enter، ماذا يحدث في الخلفية؟

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

ماذا ستتعلم في هذه المقالة؟

بعد إكمال هذا الفصل، ستتمكن من:

• فهم المسار الكامل من إدخال عنوان URL إلى عرض الصفحة
• إتقان المفاهيم الأساسية مثل URL و DNS و TCP و HTTP
• معرفة كيف يعرض المتصفح الصفحات
• التمييز بين مواقع الويب الثابتة والديناميكية

لا تحتاج إلى خبرة في البرمجة، فقط تجربتك اليومية في التسوق عبر الإنترنت.

الفصل	المحتوى	المفهوم الأساسي
الفصل 1	تحليل URL	بنية ووظيفة عناوين URL
الفصل 2	استعلام DNS	كيف تتحول أسماء النطاقات إلى عناوين IP
الفصل 3	مصافحة TCP	كيفية إنشاء اتصال موثوق
الفصل 4	اتصال HTTP	كيف يتحاور المتصفح والخادم
الفصل 5	عرض المتصفح	كيف يتحول الكود إلى صورة
الفصل 6	ثابت مقابل ديناميكي	كيفية توليد محتوى الويب

---

0. مقدمة: اللحظة التي تضغط فيها Enter

السؤال الأساسي

عندما تكتب عنوان URL في المتصفح وتضغط Enter، ماذا يحدث في الخلفية؟ لماذا بعض الصفحات تفتح بسرعة وبعضها ببطء؟ لماذا تظهر أحياناً رسالة خطأ "لم يتم العثور على الخادم"؟

تشبيه من الحياة: رحلة تسوق عبر الإنترنت

تخيل أنك تقوم بعملية تسوق عبر الإنترنت. يمكن تقسيم العملية بأكملها إلى 5 خطوات:

الخطوة 1: ملء الطلب اختيار المنتجات، تأكيد عنوان التسليم

الخطوة 2: البحث عن المستودع يجد النظام مستودع الشحن المحدد

الخطوة 3: إنشاء القناة تأكيد أن المستودع مفتوح وقادر على الشحن

الخطوة 4: شحن المستودع الموصل يسلم الطرد لبابك

الخطوة 5: فتح وتجربة فتح الطرد، رؤية المنتج المطلوب

عملية الوصول إلى صفحة ويب مشابهة بشكل مذهل للتسوق عبر الإنترنت!

https://

试一试:

🛒

出发

🗺️

查仓库

📞

建立通道

🚚

发货

🎁

收货

📦

填写购物单...

👈 在左上角输入网址，开启网络快递之旅

---

1. الخطوة الأولى: ملء "الطلب" -- تحليل URL

السؤال الأساسي

لماذا يكون عنوان URL مكتوباً بهذا الشكل؟ https://www.example.com:8080/path/page.html?id=123#section -- ماذا تعني هذه الأحرف؟

العملية الفعلية: المتصفح يحلل URL

URL (محدد موقع الموارد الموحد) هو "رمز تحديد المنتج" في عالم المتصفح. عندما تكتب https://www.example.com:8080/path/page.html?id=123#section في شريط العنوان، يقوم المتصفح بتفكيكه فوراً:

جزء URL	القيمة	تشبيه التسوق	الوظيفة التقنية
البروتوكول https://	بروتوكول نقل النص الفائق الآمن	طريقة الشحن: توصيل سري (HTTPS) مقابل عادي (HTTP)	تحديد قواعد الاتصال
النطاق www.example.com	الاسم المقروء للخادم	اسم المتجر	إخبار المتصفح بالخادم المطلوب
المنفذ :8080	رقم "الباب" المحدد للخادم	رقم المنضدة: المنضدة 3 (الافتراضي لا يُكتب)	تحديد الخدمة على الخادم
المسار /path/page.html	موقع الملف على الخادم	موقع على الرف: المنتجات اليومية / الصف الثالث	تحديد موقع المورد المحدد
معلمات الاستعلام ?id=123	معلومات إضافية	ملاحظات الطلب: أحمر، مقاس XL	بيانات إضافية تُرسل للخادم
المرساة #section	الموضع داخل الصفحة	رقم صفحة الكتيب: الانتقال إلى الصفحة 5	تمرير تلقائي، لا يُرسل للخادم

URL Parsing -- Translating human text into structured information

https://www.google.com/search

🚛 Transport mode (Protocol)

This says you want the safest vehicle, HTTPS encrypted communication. With HTTP, it is like an open-top car that anyone along the way can inspect.

🏢 Store name (Host)

This is the destination server domain. The browser later translates it into the numeric IP address used by the network.

📍 Exact shelf (Path)

After entering the store, this tells the server which room, resource, or action you want.

Hover over each part to see its responsibility

---

2. الخطوة الثانية: البحث في "دليل العناوين" -- استعلام DNS

السؤال الأساسي

لماذا يمكن للمتصفح العثور على الموقع؟ تدخل اسم نطاق مقروء (مثل baidu.com)، لكن الكمبيوتر يحتاج فعلياً عنواناً رقمياً (IP). ماذا يحدث بينهما؟

العملية الفعلية: الاستعلام الهرمي لـ DNS

DNS (نظام أسماء النطاقات) هو "نظام دليل موزع" للإنترنت.

أنت (المتصفح)
    ↓ يسأل: ما هو عنوان IP لـ google.com؟
خادم DNS المحلي (مزود خدمة الإنترنت)
    ↓ يسأل: من يدير .com؟
خادم DNS الجذر (13 مجموعة عالمياً)
    ↓ يقول: اسأل مدير .com
خادم DNS للنطاق الأعلى
    ↓ يقول: اسأل مدير google.com
خادم DNS الموثوق
    ↓ يقول: عنوان IP لـ google.com هو 142.250.80.46
إعادة IP إلى المتصفح

DNS Lookup -- Finding coordinates in the address book

📱

Browser

Wants to visit www.google.com

Ask for coordinates

Return IP

📞

Directory service (DNS)

Standing by

Click the button to tell the browser that you do not know where the Google server is

---

3. الخطوة الثالثة: الاتصال للتأكيد -- مصافحة TCP الثلاثية

السؤال الأساسي

لماذا نحتاج "مصافحة ثلاثية"؟ بعد العثور على عنوان الخادم، لماذا لا يمكن إرسال البيانات مباشرة؟

العملية الفعلية: مصافحة TCP الثلاثية

TCP (بروتوكول التحكم بالنقل) هو البروتوكول الذي يضمن النقل الموثوق للبيانات. قبل نقل البيانات، يجب إنشاء اتصال من خلال "المصافحة الثلاثية":

العميل (كمبيوترك)              الخادم (المستودع)
   |                                |
   |--- SYN=1 --------------------->|  المرة 1: مرحباً، أنا في المنزل، مستعد للاستلام! (SYN)
   |                                |
   |<-- SYN=1, ACK=1 ---------------|  المرة 2: استلمت! أنا أيضاً مستعد للإرسال. هل أنت في المنزل؟ (SYN-ACK)
   |                                |
   |--- ACK=1 --------------------->|  المرة 3: نعم! يرجى الإرسال. (ACK)
   |                                |
   ===== القناة أُنشئت، بدء الإرسال =====

TCP Three-Way Handshake -- Establishing a reliable channel

💻

Browser (you)

Waiting

🖥️

Google server

Waiting

Click "Start connection" to simulate the TCP three-way handshake

---

4. الخطوة الرابعة: حوار بين "المشتري" و"البائع" -- HTTP

العملية الفعلية: بروتوكول HTTP

HTTP (بروتوكول نقل النص الفائق) هي "قواعد الحوار" بين المتصفح والخادم.

رموز حالة HTTP:

الرمز	الفئة	المعنى	تشبيه من الحياة
200	نجاح	تم معالجة الطلب بنجاح	"تم تأكيد الطلب، شحن فوري"
301/302	إعادة توجيه	تم نقل المورد	"المتجر انتقل، يرجى الطلب من الموقع الجديد"
304	لم يُعدل	ذاكرة التخزين المؤقت لا تزال صالحة	"ما اشتريته لا يزال صالحاً، لن نعيد الإرسال"
400	خطأ العميل	تنسيق الطلب غير صحيح	"الطلب غير واضح، لا أفهم"
401	غير مصرح	يتطلب مصادقة	"يرجى إظهار بطاقة العضوية"
403	ممنوع	صلاحيات غير كافية	"الموظفون الداخليون فقط"
404	غير موجود	المورد غير موجود	"ليس لدينا هذا المنتج في المستودع"
500	خطأ الخادم	خطأ داخلي في الخادم	"المستودع اشتعل، لا يمكننا الشحن مؤقتاً"
503	الخدمة غير متاحة	الخادم فوق طاقته	"طلبات كثيرة جداً، نتوقف مؤقتاً"

HTTP Request and Response -- Sending a note to buy a package

📤 Buyer note: HTTP Request

GET /search HTTP/1.1

Host: www.google.com

User-Agent: Mac Chrome browser

Accept-Language: en-US (I want English content)

📥 Seller package: HTTP Response

The server response package will appear here...

The HTTP request is assembled with a path and supporting headers.

---

5. الخطوة الخامسة: فتح "الطرد" -- عرض المتصفح

العملية الفعلية: محرك عرض المتصفح

يستلم المتصفح كود HTML/CSS/JavaScript، ويجب تحويله إلى بكسلات على الشاشة. هذه العملية تسمى العرض (Rendering).

1. تحليل HTML ← بناء شجرة DOM
2. تحليل CSS ← بناء شجرة CSSOM
3. الدمج ← شجرة العرض
4. التخطيط (Layout/Reflow) -- قياس الأبعاد
5. الرسم (Paint) -- التلوين
6. التركيب (Composite) -- العرض النهائي

Browser Rendering -- Turning plain text into a polished page

Receive plain text source code

The response is just plain HTML and CSS text. It is an instruction manual for the page, not the visual page yet.

<html>
  <style>
   .title { color: #f00; }
  </style>
  <body>
   <h1 class="title">
     Google Search
   </h1>
   <input />
  </body>
</html>

Click each step icon above to see the output of each rendering stage

---

5.5 مواقع ثابتة مقابل ديناميكية

المواقع الثابتة: مُعدة مسبقاً، تُسلّم مباشرة

المواقع الثابتة هي "منتجات جاهزة" -- الصفحات مُعدة مسبقاً على الخادم، عند الوصول يرسل الخادم ملف HTML مباشرة.

المواقع الديناميكية: تُصنع في اللحظة، مختلفة كل مرة

المواقع الديناميكية هي صفحات "تُصنع في اللحظة" عند وصولك -- يستلم الخادم طلبك، يستعلم قاعدة البيانات، يحسب البيانات، ثم يولد HTML جديد يرسله لك.

المقارنة

	موقع ثابت	موقع ديناميكي
كيف يُنشأ	مُعد مسبقاً	يُصنع في اللحظة
السرعة	سريع	بطيء (يحتاج حساب)
تغيير المحتوى	صعب	سهل (من الخلفية)
أمثلة	موقع الشركة، التوثيق	تاوباو، وي تشات، البنك عبر الإنترنت

---

6. الملخص: رحلة "تسوق" كاملة

المرحلة	المصطلح التقني	تشبيه التسوق	المهمة الأساسية	التقنية الأساسية
1. التحليل	تحليل URL	ملء الطلب	فهم ما يريده المشتري	البروتوكول، النطاق، المنفذ، المسار
2. الاستعلام	استعلام DNS	البحث عن المستودع	العثور على مستودع الشحن	استعلام تكراري، ذاكرة تخزين مؤقت
3. الاتصال	مصافحة TCP	إنشاء القناة	ضمان لوجستيات سلسة	مصافحة ثلاثية، تحكم التدفق
4. الحوار	تبادل HTTP	شحن المستودع	إرسال الطلب واستلامه	طريقة الطلب، رموز الحالة
5. العرض	عرض المتصفح	فتح وتجميع	عرض المنتج	DOM، CSSOM، شجرة العرض، التخطيط

العملية بأكملها تتم في مئات الملي ثانية -- فكر في مدى الإعجاب في ذلك!

---

7. مسرد المصطلحات

المصطلح	المعنى
URL	محدد موقع الموارد الموحد. "عنوان" صفحة الويب
DNS	نظام أسماء النطاقات. "دليل الهاتف" للإنترنت
IP	عنوان بروتوكول الإنترنت. "رقم الباب" الفريد لكل جهاز
TCP	بروتوكول التحكم بالنقل. يضمن النقل الموثوق للبيانات
HTTP	بروتوكول نقل النص الفائق. "قواعد الحوار" بين المتصفح والخادم
HTTPS	HTTP آمن. HTTP مع تشفير إضافي
HTML	لغة ترميز النص الفائق. "الهيكل العظمي" لصفحة الويب
CSS	أوراق الأنماط المتتالية. "الجلد" لصفحة الويب
DOM	نموذج كائن المستند. بنية شجرة HTML
العرض	عملية تحويل الكود إلى بكسلات على الشاشة

---

تهانينا

الآن عندما تكتب عنوان URL في شريط العنوان وتضغط Enter، يمكنك بالفعل رؤية العالم الرقمي النشيط والمثير خلف شاشتك.

لقد فهمت:

• لماذا أحياناً لا تفتح صفحات الويب (فشل DNS، تعطل الخادم)
• لماذا بعض الصفحات سريعة وبعضها بطيء (زمن انتقال الشبكة، أداء الخادم، تعقيد الصفحة)
• كيف يحول المتصفح الكود إلى صورة (خط أنابيب العرض)