محمد قتيبة شيخانيأبني. أستكشف. أشارك

03من 22

تطوير الويب

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

رسمٌ بخطوطٍ رفيعة لثلاثة مربّعات في اليمين مكتوبٍ فيها HTML وCSS وJavaScript، تتّجه منها خطوطٌ وسهمٌ إلى نافذة متصفّحٍ كبيرة بإطارٍ أحمر في اليسار، في أعلاها شريط عنوانٍ فيه example.com، وفي وسطها «صفحةٌ تراها»، وتحتها عنوان المقالة «متصفّح الويب».

في آب 2026 جاءت 69.39 في المئة من زيارات الويب في العالم من متصفّح كروم، و15.83 في المئة من سفاري، بحسب StatCounter.[1] ومهما كان متصفّحك، فهو البرنامج الذي تقضي فيه أكثر وقتك على الحاسوب والهاتف، وأعقد ممّا يبدو بكثير. في المقال السابق رأيتَ أنّ الصفحة مستند HTML وعشرات الملفّات، وهنا السؤال التالي: من يحوّل هذه الملفّات إلى صفحةٍ ملوّنةٍ تتفاعل معك؟

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

من Mosaic إلى كروم

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

نافذة متصفّح NCSA Mosaic الرماديّة، بحقلي عنوان المستند ورابطه في الأعلى، وتحتهما صفحةٌ بيضاء فيها عنوانٌ عن المركز الوطنيّ لتطبيقات الحوسبة الفائقة وروابط زرقاء وشعارا NCSA وجامعة إلينوي، وفي الأسفل صفٌّ من الأزرار: الرجوع والتقدّم والرئيسة وإعادة التحميل.
متصفّح NCSA Mosaic يعمل من جديد على حاسوبٍ حديث سنة 2013: حقلا عنوان المستند ورابطه في الأعلى، وصفّ الأزرار الذي صار عادةً في كلّ متصفّح في الأسفل.لقطة شاشة من Charles Severance سنة 2013، عبر ويكيميديا كومنز، ملكٌ عامّ بإسقاط CC0

ثمّ جاءت سنوات «حرب المتصفّحات» بين نتسكيب وإنترنت إكسبلورر في أواخر التسعينيّات، وكان كلٌّ منهما يضيف مزايا لا يفهمها الآخر، فتُكتب مواقع لا تعمل إلّا في واحدٍ منهما. ثمّ صعد فايرفوكس في مطلع الألفيّة حاملًا راية المعايير المفتوحة. وفي 1 أيلول 2008 أعلنت جوجل عن متصفّحها الجديد مفتوح المصدر، كروم.[3] والدرس الذي خرجت به الصناعة من تلك السنوات أنّ الويب لا يعمل إلّا بمعايير تتّفق عليها المتصفّحات، وهذا ما يجعل موقعك اليوم يعمل عند الجميع إن التزمتها.

ماذا يحدث حين تضغط Enter

تبدأ القصّة قبل أيّ رسم، في شريط العنوان نفسه. الشريط اليوم «صندوقٌ موحّد» يقبل العنوان وعبارة البحث معًا، فيقرّر المتصفّح أوّلًا ما كتبت: عنوانًا يذهب إليه، أم كلماتٍ يرسلها إلى محرّك البحث الذي اخترته. فإن كان عنوانًا، بدأت ما تسمّيه MDN «الملاحة» (Navigation). يسأل المتصفّح نظام DNS عن عنوان الخادم إن لم يكن قد زاره قريبًا. ثمّ يفتح اتّصالًا به، ثمّ يتفاوض معه على التشفير إن كان الموقع يعمل بـ HTTPS، ثمّ يرسل طلب الصفحة.[4] وقد فصّلت سلسلة أساسيّات الإنترنت كلّ خطوةٍ من هذه.

ويعود الردّ على دفعات. أوّل دفعةٍ من محتوى الصفحة تكون عادةً نحو 14 كيلوبايت، بسبب طريقة بروتوكول TCP في رفع سرعة الإرسال تدريجيًّا في بداية كلّ اتّصال، قبل أن يعرف قدرة الشبكة.[4] ولهذا يحرص المهتمّون بالسرعة على أن يكون أهمّ ما يحتاجه المتصفّح لرسم أعلى الصفحة في هذه الدفعة الأولى، فلا ينتظر الزائر رحلةً ثانيةً وثالثة قبل أن يرى شيئًا.

ممّ يتكوّن المتصفّح

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

شكل 1 أجزاء المتصفّح وأين تعمل ثلاثة صناديق هي عمليّات كروم. في الأعلى عمليّة المتصفّح، وفيها الواجهة وطلبات الشبكة والملفّات والتخزين. وتحتها في اليمين عمليّة رسمٍ لكلّ موقع، وهي مميّزة، وفيها محرّك العرض ومحرّك JavaScript، أي كلّ ما يجري داخل التبويب. وفي اليسار عمليّة بطاقة الرسوميّات وحدها. عمليّة المتصفّح الواجهة طلبات الشبكة الملفّات والتخزين عمليّة رسمٍ لكلّ موقع محرّك العرض محرّك JavaScript بطاقة الرسوميّات عمليّةٌ خاصّة أجزاء المتصفّح وأين تعمل ثلاثة صناديق هي عمليّات كروم من الأعلى: عمليّة المتصفّح وفيها الواجهة وطلبات الشبكة والملفّات والتخزين، ثمّ عمليّة رسمٍ لكلّ موقع، وهي مميّزة، وفيها محرّك العرض ومحرّك JavaScript، ثمّ عمليّة بطاقة الرسوميّات. عمليّة المتصفّح الواجهة طلبات الشبكة الملفّات والتخزين عمليّة رسمٍ لكلّ موقع محرّك العرض محرّك JavaScript كلّ ما يجري داخل التبويب بطاقة الرسوميّات: عمليّةٌ خاصّة
أجزاء المتصفّح في كروم وأين تعمل: الواجهة والشبكة والتخزين في عمليّة المتصفّح، ومحرّكا العرض وJavaScript في عمليّة رسمٍ لكلّ موقع، وبطاقة الرسوميّات في عمليّةٍ خاصّة.

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

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

من الشيفرة إلى النقاط الملوّنة

حين تصل ملفّات الصفحة، يمرّ محرّك العرض بسلسلة خطواتٍ تسمّيها MDN «مسار العرض الحرج» (Critical Rendering Path). يقرأ مستند HTML ويبني منه شجرةً في الذاكرة اسمها «نموذج كائن المستند» (DOM)، ويقرأ ملفّات CSS ويبني منها شجرةً موازيةً اسمها CSSOM، فيها قواعد التنسيق لكلّ عنصر. ثمّ يجمع الشجرتين في «شجرة العرض» التي لا تحمل إلّا ما سيظهر، ثمّ يحسب موضع كلّ عنصرٍ وحجمه في خطوة «التخطيط» (Layout)، ثمّ يملأ النقاط بالألوان في خطوة «الرسم» (Paint).[6] والشكل 2 يُظهر المسار كاملًا، ومن أين تدخله الشجرتان.

شكل 2 مسار العرض الحرج مسارٌ من اليمين إلى اليسار. في اليمين ملفّ HTML يصير شجرة DOM، وتحته ملفّ CSS يصير شجرة CSSOM، وهي مميّزة لأنّ المتصفّح لا يرسم شيئًا قبل أن تكتمل. وتجتمع الشجرتان في شجرة العرض، ثمّ التخطيط، ثمّ الرسم والتركيب. HTML CSS DOM CSSOM شجرة العرض التخطيط الرسم والتركيب لا يُرسم شيءٌ قبل أن تكتمل CSSOM مسار العرض الحرج في الأعلى ملفّ HTML يصير شجرة DOM، وبجانبه ملفّ CSS يصير شجرة CSSOM، وهي مميّزة لأنّ المتصفّح لا يرسم قبل أن تكتمل. وتجتمع الشجرتان نزولًا في شجرة العرض، ثمّ التخطيط، ثمّ الرسم والتركيب. HTML CSS DOM CSSOM شجرة العرض التخطيط الرسم والتركيب لا يُرسم شيءٌ قبل أن تكتمل CSSOM
مسار العرض: شجرة DOM من HTML وشجرة CSSOM من CSS تجتمعان في شجرة العرض، ثمّ التخطيط، ثمّ الرسم والتركيب. ولا يرسم المتصفّح شيئًا قبل أن تكتمل CSSOM.

وفي هذا المسار نقطتا انتظار يجب أن تعرفهما. الأولى أنّ CSS «يحجب العرض»: لا يرسم المتصفّح الصفحة حتّى يستقبل التنسيق كلّه ويعالجه، لأنّ أيّ قاعدةٍ متأخّرة قد تغيّر ما رُسم.[6] والثانية أنّ وسم script العاديّ يوقف قراءة HTML نفسها حتّى تُنزَّل الشيفرة وتُنفَّذ.[4] ولهذا تُحمَّل الشيفرة في أغلب الصفحات الحديثة بسمة defer، التي تقول للمتصفّح: نزّلها وأنت تقرأ الصفحة، ونفّذها بعد أن تكتمل قراءة المستند وقبل حدث DOMContentLoaded.[7] أمّا async فينفّذها فور وصولها، أيًّا كان موضعه في القراءة.

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

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

وفي خطوة الرسم عملٌ يخصّ العربيّة تحديدًا. الحرف العربيّ الواحد له أربعة أشكال بحسب موضعه في الكلمة: منفصلًا، وفي أوّلها، وفي وسطها، وفي آخرها، والخطّ يحمل رسمًا مستقلًّا لكلّ شكلٍ من الأربعة.[8] فالمتصفّح يمرّر الحروف أوّلًا على «محرّك تشكيل» يختار لكلّ حرفٍ شكله ويصله بجاره، ثمّ يرسمها. وأشهر هذه المحرّكات HarfBuzz، المفتوح المصدر، الذي يعمل في كروم وفايرفوكس وأندرويد وغيرها.[9] ولولاه لظهرت كلمة «متصفّح» حروفًا متفرّقة. وهذا من أسباب أهمّيّة اختيار خطٍّ عربيٍّ مصمّمٍ جيّدًا، لأنّ المحرّك لا يستطيع أن يرسم شكلًا لا يحمله الخطّ.

لماذا تتلعثم بعض الصفحات؟

المسار لا يجري مرّةً واحدة. كلّ تغييرٍ تجريه JavaScript على الصفحة بعد ظهورها قد يعيد جزءًا منه، والتغييرات لا تتساوى في الكلفة. تغيير ما يمسّ الأبعاد والمواضع، كعرض عنصرٍ أو حجم خطّه، يجبر المتصفّح على إعادة التخطيط، وتسمّي MDN كلّ إعادة حسابٍ للمواضع بعد الأولى «إعادة تدفّق» (Reflow).[4] وتغيير اللون وحده يتخطّى التخطيط، فيبدأ المتصفّح من الرسم. وتغييرات الإزاحة والشفافية تكتفي في أكثر الحالات بخطوة «التركيب» (Compositing) الأخيرة، وهي أرخصها، والشكل 3 يضع الحالات الثلاث متجاورة.

شكل 3 ما يعيده المتصفّح بعد كلّ تغيير ثلاثة صفوف، لكلّ نوعٍ من التغيير صفّ، وفي كلّ صفٍّ الخطوات التي يعيدها المتصفّح من اليمين إلى اليسار. تغيير الأبعاد مثل width يعيد التخطيط والرسم والتركيب. وتغيير اللون يعيد الرسم والتركيب. والإزاحة والشفافية بخاصّيّة transform، وهي مميّزة، تكتفي بالتركيب وحده، فهي أرخص الثلاثة. تغيير الأبعاد width التخطيط الرسم التركيب تغيير اللون color الرسم التركيب الإزاحة والشفافية transform التركيب ما يعيده المتصفّح بعد كلّ تغيير ثلاث مجموعاتٍ من الأعلى: تغيير الأبعاد يعيد التخطيط والرسم والتركيب، وتغيير اللون يعيد الرسم والتركيب، والإزاحة والشفافية، وهي مميّزة، تكتفي بالتركيب، فهي الأرخص. تغيير الأبعاد width التخطيط الرسم التركيب تغيير اللون color الرسم التركيب الإزاحة والشفافية transform التركيب
ما يعيده المتصفّح بعد كلّ نوعٍ من التغيير: تغيير الأبعاد يعيد التخطيط والرسم والتركيب، وتغيير اللون يعيد الرسم والتركيب، والإزاحة والشفافية تكتفيان بالتركيب.

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

محرّك JavaScript

الشيفرة التي تكتبها بلغة JavaScript نصٌّ لا يفهمه المعالج مباشرةً، ومحرّك JavaScript يحوّله إلى تعليماتٍ تُنفَّذ. وأشهر المحرّكات V8، الذي تصفه جوجل بأنّه محرّكٌ مفتوح المصدر لتنفيذ JavaScript وWebAssembly، مكتوبٌ بلغة C++، ويعمل في كروم وفي بيئة Node.js التي تشغّل JavaScript على الخوادم.[10] والمحرّكات الحديثة تترجم الأجزاء التي تتكرّر كثيرًا إلى لغة الآلة وهي تعمل، بدل أن تفسّرها سطرًا سطرًا في كلّ مرّة، فتصل تطبيقات الويب إلى سرعةٍ قريبةٍ من البرامج الأصليّة.

وWebAssembly، التي ذكرها وصف V8، صيغةٌ مصمّمة لتكون هدفًا تُترجَم إليه برامج مكتوبةٌ بلغات برمجةٍ أخرى، فتعمل داخل المتصفّح إلى جانب JavaScript بسرعةٍ تقارب سرعة البرامج الأصليّة.[11] وبها صارت برامج ثقيلة، من محرّرات الصور إلى الألعاب، تعمل داخل تبويبٍ واحد. وهي أيضًا ما يفسّر أنّ المتصفّح انتقل في ثلاثة عقود من عارض مستنداتٍ إلى منصّة تطبيقاتٍ كاملة.

ومنح المتصفّح المواقع قدراتٍ كانت حكرًا على التطبيقات المثبّتة. «عامل الخدمة» (Service Worker) شيفرةٌ تعمل في الخلفية بين الموقع والشبكة كأنّها وسيطٌ بينهما، فتستطيع أن تخزّن الموقع ليعمل دون اتّصال، وأن تعترض طلباته، وأن تتيح الإشعارات.[12] وعليه تقوم «تطبيقات الويب التقدّميّة» التي مرّت بك في المقال السابق. وثمّة أيضًا «متصفّحٌ بلا واجهة» (Headless) يعمل دون أيّ نافذة، يستعمله المطوّرون لاختبار مواقعهم آليًّا ولأخذ لقطاتٍ منها.

ثلاثة محرّكات، ولماذا يختلف موقعك بينها

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

وعلى الآيفون قصّةٌ خاصّة. ظلّت أبل سنواتٍ تُلزم كلّ متصفّحٍ على نظام iOS باستعمال WebKit، فكان «كروم» على الآيفون WebKit بواجهة كروم. وهذا تغيّر في سوقين. في الاتّحاد الأوروبّيّ صار يُسمح منذ iOS 17.4 باستعمال محرّكاتٍ غير WebKit في تطبيقات التصفّح.[14] وفي اليابان صار يُسمح بذلك منذ iOS 26.2، بعد أن أعلنت أبل في 17 كانون الأوّل 2025 تغييراتها للامتثال لقانون المنافسة في برمجيّات الهواتف هناك.[15] أمّا في بقيّة العالم، ومنه الخليج وسوريا، فما زال كلّ متصفّحٍ على الآيفون يعمل بمحرّك WebKit.

ولهذا معنى عمليّ يختلف بحسب جمهورك. في آب 2026 كانت حصّة سفاري 3.17 في المئة فقط من التصفّح في سوريا، مقابل 89.8 لكروم. لكنّها بلغت 30.86 في المئة في السعوديّة و29.11 في الولايات المتّحدة، و13.76 في ألمانيا حيث يبلغ فايرفوكس 8.53.[16] فإن كان جمهورك في الرياض أو نيويورك، فنحو ثلث زوّارك يرون موقعك بمحرّك WebKit، فاختبره على سفاري قبل كلّ نشر. ولا يكفي في أيّ سوقٍ أن تجرّب موقعك على متصفّحٍ واحد.

وللتعامل مع هذا الاختلاف طريقتان يستعملهما المحترفون. الأولى «التحسين التدريجيّ»: ابنِ أساسًا يعمل في كلّ المتصفّحات، ثمّ أضف ما تدعمه المتصفّحات الأحدث دون أن ينكسر الموقع في غيرها. والثانية أن تعرف قبل استعمال أيّ ميزةٍ أين تعمل. وقد اتّفقت المتصفّحات الكبرى على تسميةٍ لهذا عنوانها «Baseline». تصير الميزة «متاحةً حديثًا» حين تدعمها كلّ المتصفّحات الأساسيّة، ثمّ «متاحةً على نطاقٍ واسع» بعد 30 شهرًا من ذلك.[17] والصفحات المرجعيّة للمزايا في MDN تعرض هذه الحالة في أعلاها.

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

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

وأضاف كروم «عزل المواقع» (Site Isolation)، الذي يضع صفحات كلّ موقعٍ في عمليّاتها الخاصّة. ويذكر مشروع كروميوم سببًا دقيقًا لذلك: هجماتٌ من نوع Spectre، أي هجماتٌ عبر «قنواتٍ جانبيّة» في المعالج، تجعل قراءة ذاكرة عمليّة الرسم ممكنة، حتّى دون أيّ ثغرةٍ في كروم نفسه.[18] فإن عاش موقعان في عمليّةٍ واحدة، أمكن لأحدهما أن يقرأ بيانات الآخر، والعزل يمنع هذا.

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

الشجرة التي لا تُرسم

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

ومصدر هذه الشجرة هو مستند HTML الذي تكتبه. من يكتب زرًّا بوسم button يحصل على «زرّ» في الشجرة دون أيّ جهد. ومن يصنع زرًّا من عنصرٍ عامّ يلوّنه بـ CSS يحصل على عنصرٍ لا يعرف قارئ الشاشة أنّه يُنقر. ولهذا يكرّر مقال HTML أنّ الوسم الصحيح جزءٌ من معنى الصفحة، لا من شكلها وحده.

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

أقوى ما يقدّمه المتصفّح للمطوّر «أدوات المطوّر» (DevTools)، تفتحها بمفتاح F12 على الحاسوب فترى الصفحة من الداخل. وحين لا يعمل شيء، هي أوّل ما يفتحه المطوّر ليرى أين انكسر بدل أن يخمّن. ولها ألسنةٌ يعرفها كلّ مطوّر:

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

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

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

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

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

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

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

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

خلاصة عمليّة

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

المصادر

  1. موقع StatCounter، «Browser Market Share Worldwide» (آب 2026): كروم 69.39%، وسفاري 15.83%، وإيدج 5.36%، وفايرفوكس 2.98%.
  2. المركز الوطنيّ لتطبيقات الحوسبة الفائقة (NCSA)، «NCSA Mosaic»: متصفّحاتٌ سبقته منها متصفّح بيرنرز لي في 1990، وأنّه أوّل متصفّحٍ منشور يعرض الصور مع النصّ تلقائيًّا، وغلاف نيويورك تايمز في كانون الأوّل 1993 وأكثر من خمسة آلاف تنزيلٍ في الشهر.
  3. مدوّنة جوجل الرسميّة، «A fresh take on the browser» (1 أيلول 2008): الإعلان عن كروم متصفّحًا مفتوح المصدر.
  4. موسوعة MDN، «Populating the page: how browsers work»: وسوم script دون async أو defer توقف قراءة HTML، وتعريف إعادة التدفّق (Reflow).
  5. موقع Chrome for Developers، «Inside look at modern web browser (part 1)» (ماريكو كوساكا): عمليّة المتصفّح للواجهة والشبكة والملفّات، وعمليّة الرسم لما داخل التبويب، وعمليّة بطاقة الرسوميّات.
  6. موسوعة MDN، «Critical rendering path»: خطوات DOM وCSSOM وشجرة العرض والتخطيط والرسم، وأنّ CSS يحجب العرض حتّى يكتمل.
  7. موسوعة MDN، «<script>: The Script element»: سمة defer تنفّذ الشيفرة بعد قراءة المستند وقبل DOMContentLoaded، وسمة async تنفّذها فور وصولها.
  8. مشروع HarfBuzz، «Why do I need a shaping engine?»: لكلّ حرفٍ عربيٍّ أربعة أشكال بحسب موضعه، وفي الخطّ رسمٌ مستقلٌّ لكلّ شكل.
  9. مشروع HarfBuzz، «HarfBuzz text shaping engine»: محرّك تشكيلٍ مفتوح المصدر يعمل في أندرويد وكروم وفايرفوكس وغيرها.
  10. مشروع V8، «V8 JavaScript engine»: محرّك جوجل مفتوح المصدر لتنفيذ JavaScript وWebAssembly، مكتوبٌ بلغة C++، ويعمل في كروم وNode.js.
  11. موقع WebAssembly، «WebAssembly»: هدف ترجمةٍ محمول للغات البرمجة، يهدف إلى التنفيذ بسرعةٍ أصليّة.
  12. موسوعة MDN، «Service Worker API»: عامل الخدمة وسيطٌ بين التطبيق والمتصفّح والشبكة، للعمل دون اتّصال واعتراض الطلبات والإشعارات.
  13. مدوّنة كروميوم، «Blink: A rendering engine for the Chromium project» (3 نيسان 2013): الانفصال عن WebKit بسبب اختلاف البنية متعدّدة العمليّات.
  14. شركة أبل، «Using alternative browser engines in the European Union»: محرّكاتٌ غير WebKit لتطبيقات التصفّح في الاتّحاد الأوروبّيّ منذ iOS 17.4.
  15. شركة أبل، «Using alternative browser engines in Japan» (منذ iOS 26.2)، و«Apple announces changes to iOS in Japan» (17 كانون الأوّل 2025، للامتثال لقانون MSCA).
  16. موقع StatCounter، حصص المتصفّحات في آب 2026: سوريا (كروم 89.8%، سفاري 3.17%)، والسعوديّة (كروم 59.94%، سفاري 30.86%)، والولايات المتّحدة (كروم 54.7%، سفاري 29.11%)، وألمانيا (كروم 61.76%، سفاري 13.76%، فايرفوكس 8.53%).
  17. موقع web.dev من جوجل، «Baseline»: الميزة «متاحةٌ حديثًا» حين تدعمها كلّ المتصفّحات الأساسيّة، و«متاحةٌ على نطاقٍ واسع» بعد 30 شهرًا.
  18. مشروع كروميوم، «Site Isolation»: هجمات القنوات الجانبيّة مثل Spectre تجعل قراءة ذاكرة عمليّة الرسم ممكنة، والعزل يحمي المواقع منها.
  19. موسوعة MDN، «Accessibility tree»: يبني المتصفّح شجرة إتاحة الوصول من شجرة DOM ويسلّمها لواجهات نظام التشغيل التي تستعملها قارئات الشاشة.

اترك تعليقاً

الحقول المميّزة بـ مطلوبة