طريقة عمل المتصفحات

طريقة عمل المتصفحات

تعتبر المتصفحات أحد أكثر البرامج استخداماً سواء على الحواسب الشخصية أو المحمولة أو أجهزة الهاتف الذكية. الكثير من الشركات البرمجية تتنافس في صُنع متصفحات بمختلف الأشكال والمميزات لجذب أكبر عدد من المستخدمين. حاليا يوجد 5 متصفحات مهيمنة في مجال الانترنت وهي: جوجل كروم، فايرفوكس، انترنت اكسبلورر، سفاري و أوبرا (1).

نظرة عامة على عمل المتصفح

أهم وظيفة للمتصفح هي عرض الصفحة التي يطلبها المستخدم عن طريق طلب الصفحة من السرفر ثم عرضها للمستخدم في حالة توفرها. في حالة توفر الصفحة غالبا ماتكون بصيغة HTML لكن يمكن أن تكون أيضا PDF أو صورة أو فيديو .... . موقع الصفحة المُراد عرضها يحدد بال URL (Uniform Resource Locator).

الطريقة التي يتبعها المتصفح في عرض صفحات ال HTML مُحددة في مواصفات HTML and CSS من قِبل منظمة  W3C.

تركيب المتصفح:

الصورة التالية توضح أهم الأجزاء التي تدخل في تركيب المتصفح.

صورة 1: أجزاء المتصفح (2)

الأجزاء الرئيسية للمتصفح هي:

1-    واجهة المستخدم User Interface: وهي تتضمن شريط العنوان، أزرار الرجوع للخلف أو للأمام، قائمة المفضلة ... إلخ

2-    محرك المتصفح Browser engine: الواجهة للاستعلام أو التحكم بمحرك العرض ويعتبر الوسيط بين محرك العرض و واجهة المستخدم

3-    محرك العرض Rendering engine: مسؤول عن عرض الصفحات المطلوبة. على سبيل المثال عن طلبك لصفحة HTML فإن المحرك يقوم بتحليل ال HTML and CSS في الصفحة ثم عرضها

4-    طبقة الشبكات  Networking: هذه الطبقة مسؤولة عن اتصالات الشبكة، مثل الاتصال باستخدام بروتوكول HTTP وغيره

5-    مترجم جافا سكربت JavaScript Interpreter: يقوم بتحليل وتنفيذ أكواد الجافا سكربت في الصفحة المطلوبة

6-    واجهة المستخدم الخلفية UI Backend: وهذه الطبقة مسؤولة عن رسم الأدوات الأساسية مثل combo box وغيره

7-    تخزين البيانات Data Storage: في هذه الطبقة يقوم المتصفح بحفظ البيانات على القرص الصلب. في السابق كان تخزين البيانات مقتصر على ال cookies لكن حاليا بالاضافة إلى ال cookies قدمت HTML5 مميزات تخزين اضافية (قواعد بيانات) مثل IndexedDb، local Storage  أو Session Storage

مالذي يحدث عند كتابة www.google.com في المتصفح؟

عند طلبك لصفحة معينة (مثل جوجل مثلا) يقوم المتصفح أولا بتحديد موقع الصفحة باستخدام ال URL الذي كتبته وذلك عن طريق طلب ال IP الخاص بال URL من ال Domain Name Server (DNS). بعد أن يتم التواصل مع السرفر والتأكد أن الصفحة موجودة يقوم السرفر Server بإرسال نسخة HTML من الصفحة. يقوم المتصفح بتحليل ال HTML وإنشاء شجرة ال DOM (Document Object Model). بعد إنشاء شجرة ال DOM يتم إنشاء شجرة العرض Rendering Tree ثم إنشاء Layout Tree وأخيرا يتم عرض الصفحة.

محرك العرض Rendering Engine

مسؤولية محرك العرض هي عرض صفحات ال HTML بما تحتويه من صور ومن تنسيق CSS.

محرك العرض Gecko يستخدم في الفايرفوكس بينما يستخدم الجوجل كروم و سفاري محرك عرض Webkit. يستخدم انترنت اكسبلورر محرك Trident بينما يستخدم أوبرا محرك Presto (3).

عمل محرك العرض Rendering Engine workflow:

صورة 2 : عمل محرك العرض

في البداية، يستقبل محرك العرض البيانات الخاصة بالصفحة المطلوبة من طبقة الشبكات Networking layer، وبعد أن يستقبل البيانات يقوم المحرك بـ :

-        تحليل ال HTML لإنشاء شجرة ال DOM

-        إنشاء شجرة DOM

-        تخطيط ال DOM

-          عرض الشجرة للمستخدم

يقوم محرك العرض بتحليل ال HTML وتحويل ال Tags إلى DOM nodes وإنشاء شجرة تسمى "شجرة المحتوى content tree". في هذه الخطوة أيضا يقوم المحرك بتحليل بيانات ال CSS. معلومات الاستايل مع بيانات العرض في ال HTML تُستخدم لإنشاء شجرة أخرى تسمى "شجرة العرض render tree".

شجرة العرض تتكون من مستطيلات مع تأثيرات بصرية كالألوان. هذه المستطيلات تكون مرتبة بشكل صحيح ليتم عرضها على الشاشة.

بعد إنشاء شجرة العرض تأتي مرحلة التخطيط وفي هذه المرحلة يتم إعطاء كل عنصر node إحداثيات وأبعاد عرضه على الشاشة. بعد ذلك تأتي مرحلة الرسم وهي باستخدام واجهة المستخدم الخلفية UI Backend.

هذه المراحل تُنفذ بشكل تدرجي. يعمل محرك العرض على إظهار المحتوى على الشاشة بشكل فوري. لا ينتظر محرك العرض أن يتم تحليل كل ال HTML. الجزء الذي تم تحليله يتم عرضه وهكذا إلى أن يتم عرض كل محتويات الصفحة. يمكنك أن تلاحظ هذا كثيرا في حالة لو كانت سرعة اتصالك بالانترنت بطيئة بحيث أنك ترى بعض أجزاء من الصفحة قبل أن يتم الانتهاء كليا من تحميل الصفحة.

  

الصورتان التاليتان توضحان عمل كل من محرك عرض Webkit و Gecko.

صورة 3: عمل محرك عرض Webkit

صورة 4: عمل محرك عرض Gecko

 تحليل ال HTML:

يقوم المحرك بتحليل كود HTML وإنشاء شجرة ال DOM. على سبيل المثال، يقوم المحرك بتحويل الكود التالي :

       <html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
    

          

إلى الشجرة التالية:

مواصفات ال DOM يتم تطويرها من قِبل منظمة W3C (4).

تحليل كود HTML صعب ومعقد وذلك لأن:

-         القواعد النحوية لل HTML ليست Context Free Grammar (5)

-         مرونة HTML هي أحد المواصفات التي تجعل تحليل HTML صعب. يمكنك أن تكتب كود HTML وبغض النظر عن الأخطاء سيقوم المتصحح بتصحيح غالبيتها

-         أيضا أكواد JavaScript أو CSS ضمن كود HTML يجعل عملية تحليل HTML معقدة أكثر من غيرها

تُنفذ عملية التحليل باستخدام مكونين رئيسيين وهما: ال Tokenizer و Parser. وظيفة ال Tokenizer هي تجزيء كود HTML إلى مصطلحات ومفردات HTML و وظيفة ال Parser هي بناء شجرة العناصر. أيضا على المُحلل Parser أن يقوم بعملية إصلاح الأخطاء الشائعة (مثل نسيان إغلاق تاج معين closing tags ..) الموجودة في كود HTML.

إنشاء شجرة العرض Render Tree:

في هذه المرحلة يتم تحويل شجرة ال DOM إلى شجرة العرض render tree. شجرة العرض عبارة عن شجرة تحتوي على معلومات العرض التي يحتاجها المتصفح لعرض الصفحة. العناصر في شجرة العرض تكون على شكل صناديق مشابهة للصناديق المستخدمة في CSS Box Model.

في الصورة التالية:

إلى اليسار يوجد لدينا شجرة ال DOM وإلى اليمين يوجد لدينا شجرة العرض Render Tree المقابلة لها. يمكنك أن تلاحظ أن شجرة العرض render tree تحتوي فقط على العناصر المرئية في الصفحة visual element (لو لاحظت ستجد أن عنصر ال غير موجود في الشجرة كذلك العناصر التي تحتوي على ميزة display=none attribute لاتظهر).

تخطيط شجرة العرض Layout of render tree:

تحتوي هذه الشجرة على إحداثيات وأبعاد الصناديق الموجودة في شجرة العرض.

عرض الصفحة:

في هذه المرحلة وبعد أن أصبح معنا شجرة العرض وتخطيطها، يقوم المتصفح بعرض الصفحة باستخدام طبقة واجهة المستخدم الخلفية UI Backend layer.

هل يتوقف الأمر عند هذا الحد؟

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

           

              

   

<html>

<body> 

  <div id=”main”>

<p>

Hello World

</p>

<div> <img src="example.png"/></div>

  </div>

</body>

</html>

إذا قمت بتغيير حجم عنصر ال <div id=”main”> (جعله أصغر على سبيل المثال) سيطرأ هذا التغيير على كل العناصر التي تقع تحت هذا العنصر.

 معرفتك لمختلف المراحل التي تمر بها الصفحة منذ لحظة الطلب إلى لحظة العرض يساعدك في بناء تطبيقات ويب أكثر دقة وجودة. يمكنك إنشاء تطبيق يستهدف إحدى المراحل أو كلهن. أيضا معرفتك لعمل المتصفح يساعدك في تحديد نوع الخلل الذي قد يواجهه تطبيقك ويساعدك في تتبع آثار المشاكل المحتملة. يظل ما ذكرناه في هذه المقالة نظرة عامة لعمل المتصفح ويمكنك التعمق أكثر بتحميل الكود المصدري Source Code لأحد المتصفحات ودراسة طريقة عمله بشكل أعمق.

المصدر:

1)      http://taligarsiel.com/Projects/howbrowserswork1.htm   

2)      https://vimeo.com/44182484

المراجع:

1)      http://www.w3schools.com/browsers/browsers_stats.asp

2)      http://grosskurth.ca/papers/browser-refarch.pdf

3)      https://en.wikipedia.org/wiki/Web_browser_engine

4)      http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.html

5)      http://en.wikipedia.org/wiki/Context-free_grammar