المتصفحات وDNS وHTTP: دورة حياة الطلب
تابع عنوان URL من شريط العناوين، مرورًا بتحليل DNS واتصال TCP وطلب HTTP، وصولًا إلى استجابة الخادم وعودتها إلى المتصفح.
المتصفحات وDNS وHTTP: دورة حياة الطلب درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا يحدث عند كتابة عنوان URL؟
في كل مرة تزورون فيها موقعًا إلكترونيًا، يبدأ متصفحكم سلسلة دقيقة من الخطوات. يساعدكم فهم هذه السلسلة على أن تصبحوا مطوّرين أفضل، إذ تعرفون أين يمكن أن تحدث المشكلات وكيف تسرّعون تنفيذ هذه الخطوات.
الخطوة 1 — تحليل DNS
DNS (Domain Name System) هو دليل الهاتف الخاص بالإنترنت. يرسل متصفحكم سؤالًا إلى محلّل DNS: "ما عنوان IP المرتبط بـ example.com؟". يفحص المحلّل ذاكرات التخزين المؤقت، ويستعلم عند الحاجة من خوادم الأسماء المعتمدة.
# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NSالخطوة 2 — مصافحة TCP
بعد معرفة عنوان IP، يفتح المتصفح اتصال TCP باستخدام المصافحة الثلاثية: SYN → SYN-ACK → ACK. وبالنسبة إلى HTTPS، تتبع ذلك مصافحة TLS التي تتفاوض على التشفير.
الخطوة 3 — طلب HTTP
يرسل المتصفح طلب HTTP عبر اتصال TCP. ويتضمن الطلب طريقة (GET, POST…)، والمسار (/index.html)، وإصدار HTTP، وترويسات مثل Host وAccept.
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0الخطوة 4 — استجابة HTTP
يعالج الخادم الطلب ثم يرسل استجابة تتضمن: رمز حالة (200 OK, 404 Not Found…)، وترويسات الاستجابة (Content-Type, Cache-Control)، والجسم (HTML، JSON، أو وحدات بايت للصورة).
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
<!DOCTYPE html>...HTTP/1.1 مقابل HTTP/2 مقابل HTTP/3
يرسل HTTP/1.1 طلبًا واحدًا لكل اتصال. بينما يتيح HTTP/2 إرسال طلبات متعددة عبر اتصال واحد. ويستخدم HTTP/3 بروتوكول QUIC (المبني على UDP) لتقليل زمن الاستجابة، خصوصًا على شبكات الهاتف المحمول التي تفقد بعض الحزم.
رموز الحالة التي يجب معرفتها
2xx = نجاح (200 OK, 201 Created). 3xx = إعادة توجيه (301 Moved Permanently, 304 Not Modified). 4xx = خطأ من العميل (400, 401, 403, 404). 5xx = خطأ من الخادم (500, 502, 503).
HTTPS وTLS
يغلّف HTTPS بروتوكول HTTP داخل TLS (Transport Layer Security). ويوفّر TLS ما يلي: التشفير حتى لا يمكن قراءة حركة المرور، والمصادقة عبر الشهادات (أي إنكم تتحدثون فعلًا مع example.com)، وسلامة البيانات حتى لا يتم العبث بها.
التخزين المؤقت: تسريع الزيارات المتكررة
يمكن أن تتضمن الاستجابات Cache-Control: max-age=86400 حتى يعيد المتصفح استخدام النسخة المخزنة مؤقتًا لمدة يوم. وتتيح ترويسات ETag وLast-Modified للمتصفح التحقق من أن النسخة المخزنة مؤقتًا ما زالت حديثة.
Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMTملفات تعريف الارتباط والجلسات
يعيّن الخادم ملفات تعريف الارتباط باستخدام ترويسة Set-Cookie. ويرسلها المتصفح تلقائيًا مع كل طلب إلى النطاق نفسه. وعادةً ما تكون الجلسات ملف تعريف ارتباط يحتوي على معرّف جلسة، يربطه الخادم ببيانات المستخدم.
CDN — شبكات توصيل المحتوى
تخزّن شبكة CDN نسخًا من أصول موقعكم في مراكز بيانات حول العالم. وينزّل المستخدمون الأصول من أقرب عقدة، مما يقلل زمن الاستجابة. وتُعد Cloudflare وFastly وAWS CloudFront شبكات CDN شائعة تستخدمها معظم المواقع الكبيرة.
تحقق سريع
ما طريقة HTTP المستخدمة لطلب صفحة ويب من خادم؟
مراجعة: دورة حياة الطلب كاملة
إدخال عنوان URL → يحلّ DNS النطاق إلى عنوان IP → إنشاء اتصال TCP (وTLS) → يرسل المتصفح طلب HTTP → يرسل الخادم الاستجابة مع الحالة والترويسات والجسم → يعرض المتصفح الاستجابة. يمكنكم متابعة كل خطوة في لوحة Network ضمن DevTools.
الأسئلة الشائعة
هل درس «المتصفحات وDNS وHTTP: دورة حياة الطلب» مجاني؟
نعم — نص درس «المتصفحات وDNS وHTTP: دورة حياة الطلب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «المتصفحات وDNS وHTTP: دورة حياة الطلب»؟
تابع عنوان URL من شريط العناوين، مرورًا بتحليل DNS واتصال TCP وطلب HTTP، وصولًا إلى استجابة الخادم وعودتها إلى المتصفح. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «المتصفحات وDNS وHTTP: دورة حياة الطلب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المتصفحات وDNS وHTTP: دورة حياة الطلب
- HTML وCSS وJavaScript: مهمة كل طبقة
- كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم
- أدوات المطور: فتح DevTools واستخدامها