كيف تظهر صفحة الويب للمستخدم؟ - مقال كلاود
 إدعم  المنصة   
makalcloud
تسجيل الدخول

كيف تظهر صفحة الويب للمستخدم؟

قبل ظهور الصفحة للمستخدم تمر الصفحة بعده عمليات لا يراها المستخدم فما هي وكيف يقرأ المتصفح الملفات ليترجمها الي صفحة ويب.

  نشر في 01 غشت 2016  وآخر تعديل بتاريخ 28 نونبر 2016 .

    في هذه المقاله سنتحدث عن الخطوات التي تمر بها صفحة الويب لكي تظهر الي المستخدم ليتفاعل معها.


يوجد 4 خطوات رئيسية تحدث لاي صفحة ويب لكي تظهر للمستخدم :

1- عمل طلب "Request" اى القيام بتفاعل مثل طلب صفحة او تغيير صفحة الويب.

2- استقبال الإستجابة "Response" اي الرد وارسال الموارد والملفات التي تم طلبها.

3- بناء الملفات "Build" باستخدام الموارد التي جاءت نبدأ ببناء هيكل الصفحة.

4- ظهور الصفحة للمستخدم "Render" اى ان الصفحة الان جاهزة للمستخدم.


الاربع خطوات لظهور صفحة الويب 


كل خطوة من تلك الخطوات تأخذ وقت معين لحدوثها مما تسبب وقت معين لتحميل الصفحة عند طلبها "Load" وهذا الوقت يختلف من صفحة الي أخري علي حسب ما تحتوية هذه الصفحة.


1- الطـلب - Request

الطلب "Request" هو حدوث حدث معين من قِبل المُستخدم مثل طلب صفحة او إعادة تحميل الصفحة او الذهاب من صفحة الي صفحة اخري مما يتوجب عليه ظهور صفحة اخري.

عند حدوث هذا الطلب يطلب المتصفح الوثيقة "document" وهي عبارة عن ملف نصي غالبا ما يكون ملف HTML من السيرفر او المستضيف للملفات "Webhost". 

اى عند طلب شئ يطلب المتصفح وجود وثيقة ، اذا ماذا بعد طلب الوثيقة؟



2- الإستجابة - Response

اذا قمت انا الان بطلب منك شئ ماذا يسمي هذا ؟

- يسمي طلب "request"

ودائما ما يكون هناك رد او استجابة لهذا الطلب اما القبول او الرفض صحيح؟

اذا انت قبلت طلبي ماذا ستفعل؟

- ستجلب لي ما اريده.

واذا رفضت طلبي ماذا ستفعل ؟

- ستتجاهلني ولن احصل علي ما اريده.


هذا ما يحدث ما بين المستخدم والخادم والمتصفح.


الان بعد ما تم طلب الوثيقة "document" من المستضيف للملفات "Webhost" سيكون هناك الرد اما بوجود ملف او وثيقة او بعدم وجود اى وثيقة.

اذا كان الرد بوجود وثيقة سيتم ارسال هذه الوثيقة الي المتصفح لكي يتم عرضها للمستخدم ولكن هل هذا كل ما في الامر ؟

بالفعل لا ، فلنفترض ان الوثيقة هي ملف HTML فقط سيتم عرض الملف وينتهي التحميل ولكن فلنفترض وجود ملفات CSS و javaScript و صور في المستند او الوثيقة ماذا سيحدث حينها ؟

سيبدأ المتصفح في تلك اللحظة بارسال طلب الي الخادم او مستضيف الملفات بطلب تحميل تلك الملفات لتبدأ المرحلة الثالثة وهي بناء الصفحة.

ولكن كيف يعرف المتصفح ان هذا الملف يحتوي علي ملفات اخري؟

بعد حدوث الطلب و استلام الأستجابة وهي عبارة عن ملف HTML  يبدأ المتصفح بقراءة هذا الملف وتحليل محتواه للبحث عن اى طلبات او ملفات غير موجودة وهذا يسمي "Parsing" و الهدف من تحليل وقراءة الملف هو البحث عن اى ملفات او موارد غير موجوده في الملف ليتم تحديدها ومن ثم طلبها وتحميلها من الخادم او مستضيف الملفات.


3- البناء - Build

الأن بعد ما تم إرسال الوثيقة و طلب الملفات الأخري الموجودة بداخلها تبدأ مرحلة بناء هذه الوثائق وتنقسم الي 3 مراحل:

1- معالجة الملف او الوثيقة وبناء الـDOM.

2- معالجة الملف او الوثيقة وبناء الـCSSOM.

3- بناء شجرة العرض Render tree وهي الجمع بين (DOM + CSSOM).


    1- بنـاء الـDOM

هيكل الـDOM


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


    2- بنـاء الـCSSOM

CSSOM


الـCSSOM تشبه الي حد كبير الـDOM ولكن الفرق هنا ان الـCSSOM هي لعرض النمط او الشكل "style" لعناصر الملف اى باعتبارها خريطة لعناصر الملف ولكن للنمط والاسلوب.


    3- بناء شجرة العرض Render tree 

Render tree


الان بعد بناء الـDOM و الـCSSOM  نبـدأ بتجميع الأثنين معا لبناء شجرة العرض النهائية والتي سوف تظهر للمستخدم علي الشاشة اى ان شجرة العرض هي الخريطة النهائية للـDOM و الـCSSOM.

ولكن شجرة العرض تقوم بعرض المحتوي و النمط فقط مع بعضهما اى ان شجرة العرض لا تضع في الشجرة عناصر مثل html او meta tags  لانها عناصر لا يوجد بها اى محتوي مرئي يظهر للمستخدم ولكن هي عناصر للمتصفح فقط.

ايضا تمنع شجرة العرض ظهور اى عنصر تم اخفائه من قبل CSSOM اي بافتراض ان لدينا عنصر صورة وفي شجرة الـCSSOM للعنصر يوجد ان العنصر قد اخذ خاصية ;display: none في هذه الحاله تتجاهل شجرة العرض العنصر ولا تقوم باضافته للشجرة.

وهنا تكون عملية البناء انتهت ويتبقي للمتصفح عملية واحده فقط لتظهر صفحة الويب الي المستخدم وهي عملية رسم العناصر علي الشاشة. 



4- ظهور الصفحة للمستخدم - Render

الان بعد الأنتهاء من العمليات السابقه وإنشاء شجرة العرض "render tree" يتبقي للمتصفح ان يقوم بعرض هذه الأشياء علي الشاشة للمستخدم لكي يبدأ التفاعل معها.

وتنقسم هذه العملية الي مرحلتين:

1- التخطيط - Layout / Reflow

2- الرسم - Paint



 1- التخطيط - Layout-Reflow

layout


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


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

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


2- الرسم - Paint

الأن اصبح المتصفح يعرف اماكن العناصر و موضعها علي الشاشة يتبقي خطوة أخيرة ويتم عرض الموقع علي الشاشة و هي رسم العناصر.

الخطوة الأخيرة يقوم المتصفح بوضع ورسم الوحدات "pixels" علي الشاشة وبعد الأنتهاء من رسم الوحدات يُعرض المتصفح الموقع للمستخدم.


بداخل جميع العمليات السابقه عده خطوات سنتكلم فيما بعد عنها تفصيليلا.


اذا يقوم المتصفح بعده خطوات لاظهار الصفحة للمستخدم:

1- ارسال طلب للخادم "request".

2- استقبال الطلب من الخادم "response".

3- بناء الصفحة وتنقسم الي3 مراحل:

    1- بناء شجرة الـDOM.

    2- بناء شجرة الـCSSOM.

    3- تجميع الـDOM + CSSOM  لتكوين شجرة العرض النهائية "render tree".

4- رسم الصفحة وعرضها للمستخدم وتنقسم الي مرحلتين:

    1- التخطيط "layout"وهنا يتم حساب العناصر وتحديد اماكنهم طبقا لحجم الشاشة.

    2- الرسم "paint" وهنا يتم وضع الوحدات "pixels" لرسم العناصر وعرض الصفحة.






   نشر في 01 غشت 2016  وآخر تعديل بتاريخ 28 نونبر 2016 .

التعليقات


لطرح إستفساراتكم و إقتراحاتكم و متابعة الجديد ... !

مقالات شيقة ننصح بقراءتها !



مقالات مرتبطة بنفس القسم











عدم إظهارها مجدداً

منصة مقال كلاود هي المكان الأفضل لكتابة مقالات في مختلف المجالات بطريقة جديدة كليا و بالمجان.

 الإحصائيات

تخول منصة مقال كلاود للكاتب الحصول على جميع الإحصائيات المتعلقة بمقاله بالإضافة إلى مصادر الزيارات .

 الكتاب

تخول لك المنصة تنقيح أفكارك و تطويرأسلوبك من خلال مناقشة كتاباتك مع أفضل الكُتاب و تقييم مقالك.

 بيئة العمل

يمكنك كتابة مقالك من مختلف الأجهزة سواء المحمولة أو المكتبية من خلال محرر المنصة

   

مسجل

إذا كنت مسجل يمكنك الدخول من هنا

غير مسجل

يمكنك البدء بكتابة مقالك الأول

لتبق مطلعا على الجديد تابعنا