كيف تعمل المتصفحات

لماذا يهم

عبارة «الموقع معطّل» قد تعني سجل DNS يشير إلى خادم خاطئ، أو شهادة منتهية الصلاحية، أو استجابة 500، أو ورقة أنماط أعادت 404، أو خطأ JavaScript أوقف معالج النقر. ولكلٍّ منها مالك مختلف وإصلاح مختلف. والمختبِر الذي يعرف الخطوات يستطيع تحديد أيّها حدث وإرفاق الدليل، بدلاً من تقرير لا يستطيع أحد التصرف بناءً عليه.

والخطوات تبيّن أيضاً ما يجب اختباره. فالصفحة عشرات الطلبات وعدة مراحل من المعالجة، وكل منها قد يخفق وحده: على شبكة بطيئة، أو في متصفح آخر، أو مع نسخة قديمة في الذاكرة المؤقتة.

جلب الصفحة: من العنوان إلى الاستجابة

يقسم المتصفح العنوان إلى المخطط (https) والمضيف (shop.example.com) والمسار والاستعلام والجزء (fragment)؛ والجزء، مثل #reviews، لا يُرسَل إلى الخادم أبداً. وإذا كانت الذاكرة المؤقتة (cache) للمتصفح تحتفظ بنسخة حديثة من الاستجابة، فقد يستغني المتصفح عن الشبكة كلياً. وإلا جرت خطوات الشبكة بالترتيب:

• استعلام DNS: يتحوّل اسم المضيف إلى عنوان IP، مثل 203.0.113.10. والإجابات تُخزَّن مؤقتاً، لذلك قد لا يظهر تغيير DNS فوراً. وإذا تعذّر حلّ الاسم، يعرض المتصفح صفحة خطأ خاصة به (في Chrome: DNS_PROBE_FINISHED_NXDOMAIN أو ERR_NAME_NOT_RESOLVED) ولا يصل أي طلب إلى الخادم.
• الاتصال: يفتح المتصفح اتصال TCP، على المنفذ 443 في HTTPS، ويُبقيه مفتوحاً للطلبات اللاحقة. أما HTTP/3 فيستخدم بدلاً منه بروتوكول QUIC فوق UDP، الذي يُنشئ الاتصال وتشفير TLS معاً في مصافحة واحدة مدمجة.
• مصافحة TLS: يتفق المتصفح والخادم على مفاتيح التشفير، ويتحقق المتصفح من أن شهادة الخادم صادرة عن جهة موثوقة، وسارية، وتغطي اسم المضيف هذا. وإذا أخفق أيٌّ من هذه الفحوص ظهر تحذير يملأ الصفحة بدلاً من الموقع، مع رمز مثل NET::ERR_CERT_DATE_INVALID في Chrome.
• طلب HTTP: طريقة ومسار، مثل GET /products/42، مع ترويسات مثل Host وUser-Agent، وملفات تعريف الارتباط (cookies) المخزّنة للموقع.
• استجابة HTTP: رمز حالة مثل 200 أو 404 أو 500، وترويسات مثل Content-Type (نوع الملف، مثل text/html) وCache-Control، ومحتوى (body). وإعادة التوجيه (301 أو 302) تعيد المتصفح إلى الخطوة الأولى بالعنوان الوارد في ترويسة Location.

جرّبها: محلّل عناوين URL جرّبها: فاحص إعادة التوجيه

بناء الصفحة: HTML وCSS وJavaScript والعرض

يحلّل المتصفح HTML وهو لا يزال يصل: يفكّ ترميز البايتات بمجموعة الأحرف (charset) المعلنة، ويبني DOM، وهو شجرة العناصر التي تعمل عليها السكربتات وأدوات الاختبار. ويُصلح المحلّل الوسوم المعطوبة بصمت، لذلك نادراً ما يُظهر HTML الخاطئ رسالة خطأ. وكل ورقة أنماط وسكربت وصورة وخط تشير إليه الصفحة يصبح طلباً آخر، وقد يخفق أيٌّ منها بينما تعيد الصفحة نفسها 200.

• CSS: أوراق الأنماط داخل <head> تحجب العرض. ينتظرها المتصفح قبل الرسم الأول، وإذا لم تُحمَّل إحداها ظهرت الصفحة بلا تنسيقها.
• JavaScript: الوسم <script src> العادي يوقف المحلّل حتى يُشغَّل السكربت؛ وdefer ينتظر انتهاء التحليل، وasync يعمل فور وصوله. وتغيّر السكربتات DOM، وتربط معالجات النقر، وتطلب البيانات. والخطأ غير المعالَج يوقف الشيفرة التي كانت تعمل، فقد تبدو الصفحة كاملة بينما لا يفعل زرٌّ شيئاً.
• العرض: يحسب المتصفح نمط كل عنصر، ويحدد مواضع الصناديق وأحجامها (التخطيط)، ثم يرسم البكسلات. والتغييرات اللاحقة، مثل صورة بلا مساحة محجوزة أو شريط يُدرجه سكربت، تعيد التخطيط والرسم، ولهذا قد يقفز المحتوى.
• المعالم: يُطلَق الحدث DOMContentLoaded عندما ينتهي تحليل HTML وتعمل السكربتات المؤجلة؛ ويُطلَق load عندما تكتمل الصور وأوراق الأنماط والموارد الأخرى أيضاً.

ما يستطيع المختبِر ملاحظته في كل خطوة

تُظهر أدوات المطوّرين (DevTools: المفتاح F12 في Chrome وEdge وFirefox، أو Cmd+Option+I على Mac) كل خطوة تقريباً، وسيعرض درس لاحق لوحاتها. ويسرد تبويب Network صفاً لكل طلب مع رمز الحالة والنوع والحجم والتوقيت، ويعرض شريط الملخص أسفله توقيتَي DOMContentLoaded وload. وهو لا يسجّل إلا وهو مفتوح، فافتحه أولاً ثم أعد تحميل الصفحة. ويمكنه تصدير كل الصفوف في ملف HAR (HTTP Archive)، وهو ملف JSON يستطيع شخص آخر فتحه في أدوات المطوّرين لديه.

• قبل أي طلب: إخفاقات DNS والاتصال والشهادة تُظهر رمزاً في صفحة خطأ المتصفح نفسه. ولم يُرسَل أي طلب HTTP، فلا يوجد له أي قيد في سجلات الوصول (access logs) على الخادم. وأيقونة معلومات الموقع في بداية شريط العنوان تفتح الشهادة، مع الجهة المُصدِرة وتواريخ الصلاحية.
• عرض Timing لطلب واحد: مراحل مثل استعلام DNS والاتصال وTLS وانتظار الخادم والتنزيل. وتختلف الأسماء قليلاً بين المتصفحات.
• تبويبا Headers وResponse: ما أُرسل (الطريقة والعنوان والترويسات وملفات تعريف الارتباط) وما عاد (رمز الحالة والترويسات والمحتوى). ويكتب Chrome (disk cache) أو (memory cache) للصفوف المخدومة من الذاكرة المؤقتة، وتجعل خانة «Disable cache» عند تفعيلها إعادة التحميل تتجاوز الذاكرة المؤقتة للمتصفح ما دامت أدوات المطوّرين مفتوحة.
• مصدر الصفحة ولوحة Elements: يعرض «View page source» (Ctrl+U على Windows) شيفرة HTML كما وصلت تماماً، بينما تعرض لوحة Elements (واسمها Inspector في Firefox) شجرة DOM بعد إصلاحات المحلّل وتغييرات السكربتات.
• وحدة التحكم (Console): أخطاء JavaScript والموارد المرفوضة مع الملف والسطر. أما مشكلات العرض فلا تظهر إلا على الشاشة، فالتقط لقطات شاشة أو تسجيلاً.

جرّبها: فاحص ترويسات الطلب جرّبها: محلّل ترويسات HTTP

مثال تطبيقي: صفحة منتج بلا تنسيق

بعد إصدار جديد على بيئة Staging، وهي نسخة الاختبار من الموقع التي يُفحص فيها الإصدار قبل أن يصل إلى بيئة الإنتاج، يفتح المختبِر https://staging.shop.example.com/products/42. يظهر النص والصور، لكن في عمود واحد بسيط وبالخطوط الافتراضية. والسير على الخطوات يكشف السبب في دقائق:

• ظهرت الصفحة، إذن نجحت خطوات DNS والاتصال وTLS. وصف المستند يحمل 200 والنص مقروء، إذن وصل HTML وفُكّ ترميزه بشكل صحيح.
• صف الملف app.3f9c1e.css يحمل 404 مع Content-Type: text/html: أرسل الخادم صفحة «غير موجود» بدلاً من ورقة الأنماط، وتقول وحدة التحكم إن المتصفح رفضها لأن نوع MIME، أي نوع الملف المذكور في Content-Type، ليس text/css.
• إذن يشير HTML إلى ملف CSS غير موجود على الخادم: فإما أن الملف لم يُنشر، وإما أن HTML يذكر اسم ملف خاطئاً. إنه عيب في البناء أو النشر لا في شيفرة CSS، ويظهر في كل المتصفحات. ويحمل تقرير الخطأ الأدلة:

Title:    صفحة المنتج بلا تنسيق على Staging: الملف app.3f9c1e.css يعيد 404
URL:      https://staging.shop.example.com/products/42
Build:    web 2.14.0 on staging
Request:  GET https://staging.shop.example.com/assets/app.3f9c1e.css
Response: 404 Not Found, Content-Type: text/html; charset=utf-8
Console:  Refused to apply style from '.../assets/app.3f9c1e.css' because its
          MIME type ('text/html') is not a supported stylesheet MIME type,
          and strict MIME checking is enabled.
Expected: 200 with Content-Type: text/css
Evidence: لقطة شاشة؛ ملف HAR لإعادة تحميل مع تعطيل الذاكرة المؤقتة

جرّبها: مدقّق Content-Type جرّبها: مرجع رموز حالة HTTP

أسئلة شائعة

المراجع

• HTML Living StandardWHATWGلغة HTML، بما فيها مراجع المحارف المسماة (الكيانات) وقواعد التحليل التي تتبعها المتصفحات.
• Fetch StandardWHATWGيعرّف CORS: طلبات التحقق المسبق وترويسات Access-Control-* والاستجابات التي يسمح المتصفح للصفحة برؤيتها.
• RFC 9110: HTTP SemanticsIETF · 2022معاني أساليب HTTP وحقول الترويسات ورموز الحالة والتفاوض على المحتوى، بغضّ النظر عن إصدار البروتوكول.
• RFC 8446: The Transport Layer Security (TLS) Protocol Version 1.3IETF · 2018مصافحة TLS 1.3 وبروتوكول السجلات اللذان يحميان حركة HTTPS.