متصفّح الويب: كيف يحوّل الملفّات إلى صفحةٍ تراها

في المقال السابق عن الفرق بين الصفحة والموقع رأيتَ أن صفحة الويب مجرّد ملفّاتٍ نصّية: مستند HTML، وملفّات تنسيقٍ وبرمجة، وصور. لكنّ ما تراه ليس نصًّا، بل صفحةٌ ملوّنةٌ منظّمةٌ تتفاعل معك. مَن يحوّل تلك الملفّات الباردة إلى هذه التجربة الحيّة؟ المتصفّح. هو أكثر برنامجٍ تستعمله في يومك، وأعقدُ ممّا تظنّ بكثير.

وهو لمطوّر الويب ليس نافذةً فحسب، بل بيئة التشغيل التي يعمل عليها كل ما يكتبه، ومختبرُه الذي يفحص فيه عمله. هذا المقال يفتح المتصفّح من الداخل: ممّ يتكوّن، وكيف يحوّل الشيفرة إلى بكسلاتٍ على شاشتك (وهي العملية الأهمّ)، وكيف يعزل المواقع ليحميك، وكيف تختلف المتصفّحات، ولماذا يعني هذا كلّه لمن يبني الويب.

نبذةٌ سريعة: حروب المتصفّحات

بدأ الويب المرئيّ للعامّة مع متصفّح «Mosaic» سنة 1993، أوّل متصفّحٍ يعرض النصّ والصور معًا فجعل الويب جذّابًا للناس. ثمّ اشتعلت «حرب المتصفّحات الأولى» في أواخر التسعينيّات بين «نتسكيب» و«إنترنت إكسبلورر»، فتنافسا بإضافة مزايا غير قياسيّةٍ مزّقت الويب. وفي مطلع الألفية صعد «فايرفوكس» حاملًا راية المعايير المفتوحة، ثمّ جاء «كروم» سنة 2008 ليهيمن على السوق إلى اليوم.

ولماذا يهمّك هذا التاريخ وأنت تبني؟ لأنه يفسّر مشكلةً تعيشها يوميًّا: «لماذا يبدو موقعي مختلفًا في متصفّحٍ عن آخر؟». تلك الحروب علّمت الصناعة درسًا: أن الويب لا يعمل إلّا بمعاييرَ موحّدة تتّفق عليها المتصفّحات. ومنذ ذلك الحين، صار التزام المعايير لا الحيل الخاصّة هو ما يضمن أن يعمل موقعك للجميع.

ماذا يوجد تحت الغطاء

المتصفّح ليس كتلةً واحدة، بل عدّة محرّكاتٍ تعمل معًا.^[1] أهمّها: «واجهة المستخدم» (شريط العنوان والأزرار والتبويبات، وهي ما تراه)؛ و«محرّك العرض» (Rendering Engine) وهو القلب، يحوّل HTML وCSS إلى ما يظهر على الشاشة؛ و«محرّك جافاسكربت» الذي ينفّذ الشيفرة البرمجية؛ و«طبقة الشبكة» التي تتولّى طلبات HTTP وجلب الملفّات؛ و«طبقة التخزين» التي تحفظ بيانات المواقع على جهازك. كلّ صفحةٍ تفتحها هي تعاونٌ بين هذه المكوّنات في لحظات.

وفي قلب واجهة المستخدم شريط العنوان، وقد صار «صندوقًا موحّدًا» يجمع كتابة العنوان والبحث في خانةٍ واحدة، فيميّز المتصفّح أكتبتَ عنوانًا أم عبارة بحثٍ ويتصرّف وفقًا لذلك. ويدير المتصفّح أيضًا «سجلّ التصفّح» الذي يتيح زرّي الرجوع والتقدّم والعودة إلى ما زرته، ويحفظ المفضّلة والجلسات المفتوحة. هذه التفاصيل الصغيرة التي اعتدتَها هي ثمرة تطوّرٍ طويلٍ في تجربة المستخدم، لا بداهةً ولدت معه.

وطبقة التخزين هذه أنواع: «الكوكيز» الصغيرة التي تُرسَل مع كل طلبٍ إلى الخادم (مرّت بك في سلسلة أساسيّات الإنترنت)، و«تخزين المتصفّح» (localStorage) الذي يحفظ بياناتٍ أكبر على جهازك لا تُرسَل تلقائيًّا، و«قاعدة بياناتٍ في المتصفّح» (IndexedDB) لتطبيقات الويب التي تحتاج تخزينًا منظّمًا، و«ذاكرة المتصفّح المؤقّتة» التي تحفظ ملفّات المواقع لتسريع الزيارات التالية. هذه الطبقة هي ما يجعل المواقع «تتذكّرك» وتفتح أسرع في المرّة الثانية.

مسار العرض: من الشيفرة إلى البكسل

هنا جوهر عمل المتصفّح، وأهمّ ما ينبغي لمطوّر الويب أن يفهمه. حين تصل ملفّات الصفحة، يمرّ محرّك العرض بسلسلةٍ من الخطوات تُسمّى «مسار العرض الحَرِج» (Critical Rendering Path) لتحويلها إلى صورةٍ على الشاشة.^[2] ولنرها خطوةً خطوة. ولنضعها في سياقها الكامل أوّلًا: حين تكتب عنوانًا وتضغط Enter، يطلب المتصفّح المستند من الخادم (وهو مسار الشبكة الذي فصّلتُه في سلسلة أساسيّات الإنترنت: ترجمة الاسم، فطلب HTTP، فاستقبال الردّ). المهمّ هنا يبدأ بعد وصول الملفّات: كيف يحوّلها المتصفّح إلى صورةٍ تراها. تلك هي المرحلة التي تخصّ مطوّر الويب تحديدًا.

1. قراءة HTML وبناء شجرة DOM: يقرأ المتصفّح مستند HTML ويحوّله إلى شجرةٍ من العناصر في الذاكرة تُسمّى «نموذج المستند الكائنيّ» (DOM)، تمثّل بنية الصفحة.
2. قراءة CSS وبناء شجرة CSSOM: يقرأ ملفّات CSS ويحوّلها إلى شجرةٍ موازيةٍ تحمل قواعد التنسيق لكل عنصر. وملفّ CSS «يحجب العرض»: لا يرسم المتصفّح شيئًا حتى يستقبل التنسيق كاملًا ويعالجه، لئلّا تومض الصفحة بلا تنسيق.
3. دمجهما في «شجرة العرض»: يجمع الشجرتين في واحدةٍ تضمّ فقط ما سيظهر فعلًا (مستبعدًا المخفيّ)، كلٌّ بعنصره وتنسيقه.
4. التخطيط (Layout): يحسب الموضع والحجم الدقيقين لكل عنصرٍ على الشاشة: أين يقع، وكم يشغل، بالبكسل.
5. الرسم والتركيب (Paint & Composite): يملأ البكسلات فعليًّا بالألوان والنصوص والصور، ويركّب الطبقات المتداخلة، فتظهر الصفحة النهائية.

وأهمّية فهم هذا للمطوّر عمليّة: كل تغييرٍ تُجريه جافاسكربت على الصفحة (إخفاء عنصرٍ، تحريك آخر) قد يجبر المتصفّح على إعادة التخطيط والرسم، وهي أثقل خطوتين. ومن لا يعي هذا يكتب صفحاتٍ تتلعثم وتتقطّع؛ ومن يعيه يكتب شيفرةً تُقلّل إعادة الحساب فتنساب الصفحة بسلاسة. فهنا تحديدًا يتحوّل المبرمج إلى «مهندس أداء».

ولجافاسكربت دورٌ خاصٌّ في هذا المسار قد يعطّله. فحين يصادف المتصفّح وسمَ شيفرةٍ في أثناء قراءة HTML، يتوقّف عن البناء حتى ينفّذها، لأنها قد تغيّر الصفحة. ولهذا تُكتب الشيفرة بسمتين تنقذان الأداء: «التأجيل» (defer) الذي يؤخّر تنفيذها حتى يكتمل بناء الصفحة، و«اللاتزامن» (async) الذي يجلبها دون أن يوقف البناء. فوضع الشيفرة وكيفيّة تحميلها يقرّران: هل تظهر الصفحة بسرعةٍ أم تتجمّد بانتظار ملفٍّ؟

ولنفهم لماذا تتلعثم بعض الصفحات: ليست كل تغييراتك متساويةَ الكلفة. تغييرُ ما يؤثّر في الأبعاد والمواضع (كعرض عنصرٍ) يُجبر المتصفّح على إعادة التخطيط كاملًا («إعادة التدفّق»)، وهي الأغلى. وتغييرُ اللون وحده يكتفي بإعادة الرسم، وهي أرخص. وبعض التغييرات (كالشفافية والإزاحة) تتمّ في خطوة التركيب وحدها، وهي الأرخص. ولهذا يفضّل المطوّرون المتمرّسون تحريك العناصر بطرقٍ لا تُجبر المتصفّح على إعادة الحساب الثقيل، فتنساب الحركة بسلاسة.

محرّك جافاسكربت: من نصٍّ إلى تنفيذٍ سريع

الشيفرة التي تكتبها بـجافاسكربت نصٌّ لا يفهمه المعالج مباشرةً. وظيفة «محرّك جافاسكربت» تحويل هذا النصّ إلى تعليماتٍ تُنفَّذ بسرعة. وأشهرها محرّك V8 الذي يشغّل كروم (وبيئة Node.js أيضًا).^[4] ولا يكتفي بالتفسير البطيء، بل يترجم الشيفرة المتكرّرة إلى لغة الآلة في أثناء التشغيل («التصريف الفوريّ»)، فتعمل تطبيقات الويب الحديثة بسرعةٍ تقارب البرامج الأصلية. هذا التطوّر هو ما نقل المتصفّح من عارض مستنداتٍ إلى منصّة تطبيقاتٍ كاملة.

وقد منح المتصفّح الحديث مواقعَ الويب قدراتٍ كانت حكرًا على تطبيقات الجوال الأصلية. فعبر «عامل الخدمة» (Service Worker)، وهو سكربتٌ يعمل في الخلفية، يستطيع الموقع أن يخزّن نفسه فيعمل دون اتّصالٍ بالإنترنت، وأن يرسل إشعاراتٍ تظهر على جهازك حتى وأنت لا تتصفّحه. على هذه القدرات تقوم «تطبيقات الويب التقدّمية» (PWA): مواقعُ تُثبَّت على الجهاز وتتصرّف كالتطبيقات الأصلية. فالخطّ الفاصل بين «الموقع» و«التطبيق» يذوب عامًا بعد عام، والمتصفّح هو من يذيبه.

المحرّكات الثلاثة، ولماذا تختلف المتصفّحات

رغم كثرة المتصفّحات، لم يبقَ في العالم إلّا ثلاثة محرّكات عرضٍ تشغّلها جميعًا.^[3] «Blink» يشغّل كروم وإيدج وأوبرا وبريف وكلّ ما بُني على كروميوم (وهو الأوسع هيمنةً، وقد انشقّ عن WebKit سنة 2013). و«Gecko» يشغّل فايرفوكس. و«WebKit» يشغّل سفاري، وتُجبَر كل المتصفّحات على نظام iOS على استعماله. ومن هنا يأتي اختلاف عرض موقعك بين متصفّحٍ وآخر: لكلّ محرّكٍ تفسيرُه الخاصّ، وسرعتُه في تبنّي المعايير الجديدة.

ولهذا واجبٌ على المطوّر: ألّا يكتفي باختبار موقعه على متصفّحٍ واحد، بل يجرّبه على المحرّكات الرئيسة. وهيمنة محرّكٍ واحد (Blink) تثير قلق كثيرين من «أحاديّة» الويب: حين يقرّر صاحب المحرّك الأقوى وحده ما يدخل الويب وما لا يدخل، يضعف تنوّعه واستقلاله. فبقاء أكثر من محرّكٍ ليس تفصيلًا تقنيًّا، بل ضمانةٌ لصحّة الويب.

وللتعامل مع هذا الاختلاف، يتّبع المطوّرون مبدأ «التحسين التدريجيّ»: ابنِ أساسًا يعمل في كل المتصفّحات، ثمّ أضِف تحسيناتٍ للمتصفّحات التي تدعمها، دون أن ينكسر الموقع في غيرها. ويستعينون بأدواتٍ تُظهر أيّ مزيّةٍ يدعمها كل متصفّحٍ قبل استعمالها. فالهدف ليس أن يبدو الموقع متطابقًا إلى البكسل في كل مكان، بل أن يعمل ويُستعمَل في كل مكان، ولو تفاوتت التفاصيل. هذا التوازن بين الطموح والتوافق من فنّ المهنة.

كيف يحميك المتصفّح: العزل والصندوق الرمليّ

تفتح يوميًّا صفحاتٍ من مصادر مجهولة، فكيف لا تُصيب جهازك بأذى؟ بفضل بنيةٍ أمنيّةٍ خفيّة. المتصفّح الحديث «متعدّد العمليات»: لا يشغّل كل التبويبات في عمليةٍ واحدة، بل يعزل كلًّا في عمليةٍ مستقلّة، فإن تعطّل تبويبٌ أو أُصيب بصفحةٍ خبيثة لم يُسقط البقيّة ولم يصل إلى بياناتها.^[5]

وأبعد من ذلك، تعمل شيفرة المواقع داخل «صندوقٍ رمليّ» (Sandbox): بيئةٍ محصورةٍ معزولةٍ عن نظام تشغيلك، فلا تستطيع صفحةٌ أن تقرأ ملفّاتك أو تعبث بجهازك من تلقاء نفسها. وأضافت المتصفّحات «عزل المواقع» الذي يفصل كل موقعٍ في عمليّته الخاصّة، حمايةً من ثغراتٍ دقيقةٍ تتسرّب بها المواقع إلى بيانات بعضها. هذه الطبقات هي ما يجعلك تتصفّح الإنترنت المجهول بأمانٍ نسبيّ، دون أن تشعر بها.

ولهذا الأمان ثمنٌ تلمسه: استهلاك الذاكرة. فحين يشكو أحدهم أن المتصفّح «يلتهم الرام»، فالسبب غالبًا هذا العزل نفسه: كل تبويبٍ عمليّةٌ مستقلّةٌ لها نصيبها من الذاكرة. إنها مقايضةٌ واعية: أمانٌ واستقرارٌ أعلى مقابل ذاكرةٍ أكثر. وقد طوّرت المتصفّحات حِيَلًا توازن بينهما (كتجميد التبويبات الخاملة)، لكنّ الأصل أن العزل الذي يحميك يكلّف ذاكرة.

وثمّة بناءٌ خفيٌّ آخر يصنعه المتصفّح: «شجرة إتاحة الوصول». فإلى جانب شجرة DOM التي تُرسَم على الشاشة، يبني المتصفّح شجرةً موازية تصف معنى العناصر (هذا زرّ، هذا عنوان، هذا حقل) ويعرضها لتقنيّات المساعدة كقارئات الشاشة. ومصدر هذه الشجرة بنية HTML نفسها؛ فمن يكتب HTML سليمة المعنى يهدي الكفيف صفحةً يفهمها، ومن يهملها يبني صفحةً عمياء على من لا يبصرها. هذه الصلة بين بنية الشيفرة وإتاحة الوصول جوهريّة، وسأعود إليها.

وللمتصفّح دورٌ ثالثٌ في حمايتك يخصّ الاتّصال نفسه. حين يكون اتّصالك بالموقع مشفّرًا (عبر HTTPS) يعرض المتصفّح قفلًا صغيرًا في شريط العنوان، ويحذّرك بوضوحٍ حين تدخل بياناتٍ في صفحةٍ غير مشفّرة. ويذهب أبعد: يعترضك بشاشة تحذيرٍ حمراء إن حاولت دخول موقعٍ يشتبه أنه احتياليٌّ أو خبيث. فالمتصفّح ليس عارضًا محايدًا، بل خطّ دفاعك الأوّل على الويب، يقرأ إشارات الأمان نيابةً عنك ويترجمها إلى تحذيراتٍ تفهمها.

أدوات المطوّر: نافذةٌ إلى عقل المتصفّح

أقوى ما يقدّمه المتصفّح للمطوّر «أدوات المطوّر» (DevTools)، تفتحها بزرٍّ واحد فترى الصفحة من الداخل. بها تفحص شجرة DOM وتعدّلها حيًّا، وتراقب طلبات الشبكة وأزمنتها، وتقرأ رسائل جافاسكربت وأخطاءها في «وحدة التحكّم»، وتطّلع على ما خزّنه الموقع على جهازك. هي مختبر التشخيص: حين لا يعمل شيءٌ، أوّل ما يفتحه المطوّر هذه الأدوات ليرى أين انكسر. وإتقانها يفرّق بين من يخمّن سبب العطل ومن يراه بعينه.

ولها ألسنةٌ متخصّصة يعرفها كل مطوّر: «العناصر» (Elements) لفحص HTML وتنسيقات CSS وتعديلها حيًّا فترى أثر التغيير فورًا؛ و«وحدة التحكّم» (Console) لقراءة رسائل جافاسكربت وأخطائها وتجريب الشيفرة مباشرةً؛ و«الشبكة» (Network) لرؤية كل ملفٍّ طلبه المتصفّح وحجمه وزمنه (مفيدةٌ لتشخيص البطء)؛ و«الأداء» لتحليل أين يقضي المتصفّح وقته في العرض؛ و«التطبيق» لفحص ما خزّنه الموقع من كوكيز وبياناتٍ على جهازك. هذه الألسنة مجتمعةً تكشف الصفحة من كل زواياها.

الإضافات والخصوصية

صار المتصفّح منصّةً تُوسَّع بالإضافات: من حاجبات الإعلانات إلى مديري كلمات المرور. لكنّ لكل إضافةٍ صلاحياتٍ على ما تتصفّح، فمنحها لمن لا تثق به بابٌ للتجسّس، والحذر في تثبيتها جزءٌ من أمنك. وصار المتصفّح أيضًا ساحة معركةٍ على الخصوصية: المواقع تتعقّبك بالكوكيز و«بصمة المتصفّح» (مرّت بك)، والمتصفّحات تردّ بحجب التعقّب وتقييد الكوكيز الخارجية. فاختيار متصفّحٍ يحترم خصوصيّتك، وضبط إعداداته، قرارٌ يخصّك لا تفصيلًا تقنيًّا.

والمتصفّح أيضًا خطّ دفاعك الأوّل في الأمان. هو من يتحقّق من شهادة التشفير ويُظهر لك القفل، ويحذّرك حين يكون الاتصال غير آمنٍ أو الموقع مشبوهًا، ويحجب التنزيلات الخطرة. فكثيرٌ ممّا يحميك على الويب يجري في المتصفّح قبل أن تصل الصفحة إليك، وتجاهل تحذيراته خطأٌ شائعٌ مكلف. قراءة ما يقوله المتصفّح، لا تجاوزه بنقرةٍ سريعة، جزءٌ من سلامتك الرقمية.

لماذا يهمّ هذا من يبني الويب

كل ما سبق يلتقي عند نقطةٍ واحدة: المتصفّح بيئتك التي تعمل فيها، وفهمها يجعلك مطوّرًا أقدر. تعرف لماذا تتثاقل صفحةٌ (إعادة تخطيطٍ كثيرة)، ولماذا تختلف بين المتصفّحات (محرّكاتٌ مختلفة)، وكيف تشخّص عطلًا (أدوات المطوّر)، وكيف يقرأ المتصفّح بنيتك. وسرعة العرض هذه يقيسها جوجل في «مؤشّرات أداء الويب الأساسية» ويجعلها عامل ترتيب، فما تبنيه للمتصفّح ينعكس على ظهورك في البحث. المتصفّح ليس مجرّد أداةٍ تستعملها، بل المنصّة التي تبني لها كل شيء.

والمتصفّح الحديث يتطوّر بسرعةٍ تخدمك: صار «دائم التحديث» يحدّث نفسه صامتًا في الخلفية، فلا تُضطرّ لانتظار سنواتٍ لتصل المزايا الجديدة كما في زمن إنترنت إكسبلورر القديم الذي جمّد الويب. وفتح أبوابًا جديدة: «ويب أسمبلي» (WebAssembly) يتيح تشغيل لغاتٍ مثل C++ وRust في المتصفّح بسرعةٍ تقارب الأصلية إلى جانب جافاسكربت، فصارت ألعابٌ وبرامجُ ثقيلة تعمل داخل المتصفّح. وثمّة «متصفّحٌ بلا واجهة» (Headless) يعمل دون شاشةٍ لأغراض الاختبار الآليّ وجمع البيانات، يستعمله المطوّرون كثيرًا.

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

من الصفحة الواحدة إلى شبكة الويب

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

لكنّ المتصفّح يعرض صفحةً واحدةً في كل مرّة. فما الذي يربط ملايين الصفحات بعضها ببعضٍ ليصير «شبكةً» (Web) تتنقّل فيها بنقرة؟ إنه أبسط عناصر الويب وأعمقها أثرًا: الرابط التشعّبيّ. وهذا موضوع المقال التالي: «الروابط التشعبية».

المصادر

1. MDN: كيف تعمل المتصفّحات. مكوّنات المتصفّح ومحرّكاته.
2. MDN: مسار العرض الحَرِج. خطوات تحويل الشيفرة إلى بكسل.
3. Wikipedia: مقارنة محرّكات المتصفّحات. Blink وGecko وWebKit.
4. V8: محرّك جافاسكربت V8. التفسير والتصريف الفوريّ.
5. Chromium: عزل المواقع (Site Isolation). تعدّد العمليات والحماية.