ما يحدث في التنقّل
هذا هو الجزء الثاني من سلسلة مدونات مكوّنة من 4 أجزاء تتناول الأعمال الداخلية لمتصفِّح Chrome. في المشاركة السابقة، تناولنا كيفية تعامل العمليات وسلاسل المحادثات المختلفة مع أجزاء مختلفة من المتصفّح. في هذه المشاركة، نتناول بالتفصيل كيفية تواصل كل عملية وسلسلة محادثات لعرض موقع إلكتروني.
لنلقِ نظرة على حالة استخدام بسيطة لتصفّح الويب: اكتب عنوان URL في أحد المتصفحات، ثم يجلب المتصفح البيانات من الإنترنت ويعرض إحدى الصفحات. في هذه المشاركة، سنركز على الجزء الذي يطلب فيه المستخدم موقعًا إلكترونيًا يستعد فيه المتصفح لعرض الصفحة، وهو ما يُعرف أيضًا باسم التنقل.
تبدأ عملية من خلال المتصفح
كما تناولنا في الجزء الأول: وحدة المعالجة المركزية (CPU)، ووحدة معالجة الرسومات، والذاكرة، والبنية متعددة العمليات، تتم معالجة كل ما تتم خارج علامة التبويب من خلال عملية المتصفح. تشتمل معالجة المتصفح على سلاسل محادثات مثل سلسلة تعليمات واجهة المستخدم التي ترسم أزرارًا وحقول إدخال في المتصفّح، وسلسلة محادثات الشبكة التي تتناول مكدس الشبكة لتلقّي البيانات من الإنترنت، وسلسلة محادثات التخزين التي تتحكّم في الوصول إلى الملفات، وغير ذلك. عند كتابة عنوان URL في شريط العناوين، يتم التعامل مع الإدخال من خلال سلسلة محادثات واجهة المستخدم الخاصة بعملية المتصفح.
التنقل البسيط
الخطوة 1: التعامل مع الإدخال
عندما يبدأ المستخدم في الكتابة في شريط العناوين، تطرح عليك سلسلة محادثات واجهة المستخدم السؤال التالي: "هل هذا طلب بحث أم عنوان URL؟". في Chrome، يكون شريط العناوين هو أيضًا حقل إدخال البحث، لذا عليك تحليل سلسلة محادثات واجهة المستخدم وتحديد ما إذا كنت تريد إرسالها إلى محرّك بحث أو إلى الموقع الإلكتروني الذي طلبته.
الخطوة 2: بدء التنقّل
عندما يضغط مستخدم على مفتاح Enter، تبدأ سلسلة محادثات واجهة المستخدم مكالمة شبكة للحصول على محتوى الموقع الإلكتروني. يتم عرض مؤشر التحميل في زاوية علامة التبويب، وتمر سلسلة تعليمات الشبكة عبر بروتوكولات مناسبة مثل بحث نظام أسماء النطاقات وإنشاء اتصال بروتوكول أمان طبقة النقل (TLS) للطلب.
في هذه المرحلة، قد تتلقّى سلسلة تعليمات الشبكة عنوان إعادة توجيه خادم مثل HTTP 301. في هذه الحالة، تتواصل سلسلة تعليمات الشبكة مع مؤشر ترابط واجهة المستخدم الذي يطلب الخادم إعادة التوجيه إليه. وبعد ذلك، سيتم بدء طلب عنوان URL آخر.
الخطوة 3: قراءة الرد
عندما يبدأ نص الاستجابة (حمولة البيانات) في الظهور، تبحث سلسلة الشبكة في وحدات البايت الأولى من ساحة المشاركات إذا لزم الأمر. ويجب أن يوضّح عنوان Content-Type للاستجابة نوع البيانات، ولكن بما أنّ هذه البيانات ربما تكون غير متوفرة أو خاطئة، يتم إجراء التحليل من نوع MIME. هذا "نشاط تجاري مريب" كما هو موضَّح في رمز المصدر. يمكنك قراءة هذا التعليق لمعرفة كيفية تعامل المتصفحات المختلفة مع أزواج حمولة البيانات/نوع المحتوى.
إذا كان الاستجابة ملف HTML، تكون الخطوة التالية هي تمرير البيانات إلى عملية العارض، ولكن إذا كان ملفًا بتنسيق ZIP أو ملف آخر، هذا يعني أنّه طلب تنزيل وبالتالي يجب تمرير البيانات إلى تطبيق إدارة التنزيل.
وهذا هو أيضًا المكان الذي يتم فيه إجراء عملية SafeBrowsing. إذا بدا النطاق وبيانات الاستجابة متطابقة مع موقع ضار معروف، تنبّه سلسلة محادثات الشبكة لعرض صفحة تحذير. بالإضافة إلى ذلك، يتم التحقّق من استخدام CRoss Crigin Cead Clocking (C) للتأكد من أن البيانات الحساسة على جميع المواقع لا تصل إلى عملية العارض.
الخطوة 4: البحث عن عملية عارض
بعد انتهاء جميع عمليات التحقّق والتأكّد من أنّ سلسلة محادثات الشبكة يجب أن ينتقل المتصفّح إلى الموقع الإلكتروني المطلوب، ترسل سلسلة التعليمات في الشبكة إشعارًا إلى سلسلة تعليمات واجهة المستخدم بأنّ البيانات جاهزة. بعد ذلك، تعثر سلسلة واجهة المستخدم على عملية العارض لمتابعة عرض صفحة الويب.
نظرًا لأن الاستجابة لطلب الشبكة قد يستغرق عدة مئات من المللي ثانية، يتم تطبيق تحسين لتسريع هذه العملية. عندما ترسل سلسلة محادثات واجهة المستخدم طلب عنوان URL إلى سلسلة محادثات الشبكة في الخطوة 2، ستعرف الموقع الإلكتروني الذي يتم الانتقال إليه. تحاول سلسلة واجهة المستخدم العثور بشكل استباقي على عملية عارض أو بدؤها بالتوازي مع طلب الشبكة. بهذه الطريقة، إذا سارت الأمور كما هو متوقّع، تكون عملية العارض في وضع الاستعداد عندما تتلقّى سلسلة تعليمات الشبكة البيانات. قد لا يتم استخدام عملية الاستعداد هذه إذا كان التنقّل يعيد التوجيه بين المواقع الإلكترونية، وفي هذه الحالة قد تكون هناك حاجة إلى عملية مختلفة.
الخطوة 5: إتمام التنقل
والآن بعد أن أصبحت البيانات وعملية العارض جاهزة، يتم إرسال IPC من عملية المتصفح إلى عملية العارض لتنفيذ عملية التنقّل. وهو ينتقل أيضًا إلى مصدر البيانات لكي تستمر عملية العارض في تلقّي بيانات HTML. بعد أن تسمع عملية المتصفح التأكيد على حدوث الالتزام في عملية العرض، يكتمل التنقل وتبدأ مرحلة تحميل المستند.
عند هذه المرحلة، يتم تعديل شريط العناوين ويعكس مؤشر الأمان وواجهة مستخدم إعدادات الموقع الإلكتروني معلومات الموقع الإلكتروني الخاصة بالصفحة الجديدة. سيتم تعديل سجلّ الجلسات في علامة التبويب بحيث تتحرك أزرار الرجوع إلى الأمام في الموقع الإلكتروني الذي تم الانتقال إليه للتو. لتسهيل استعادة علامة التبويب/الجلسة عند إغلاق علامة تبويب أو نافذة، يتم تخزين سجلّ الجلسة على القرص.
الخطوة الإضافية: اكتمل التحميل الأولي
بعد إتمام التنقّل، تستمر عملية العارض في تحميل الموارد وعرض الصفحة. سوف نتناول تفاصيل ما يحدث في هذه المرحلة في المنشور التالي. بعد "انتهاء" عملية عرض العارض، تعيد إرسال IPC مرة أخرى إلى عملية المتصفّح (يتم ذلك بعد تنشيط جميع أحداث onload على جميع الإطارات في الصفحة وانتهاء تنفيذها). في هذه المرحلة، توقف سلسلة تعليمات واجهة
المستخدم مؤشر تحميل الصفحة في علامة التبويب.
أقصد بذلك أنّ لغة JavaScript من جهة العميل لا تزال قادرة على تحميل موارد إضافية وعرض طرق عرض جديدة بعد هذه النقطة.
الانتقال إلى موقع إلكتروني آخر
اكتمل التنقل البسيط! ولكن ماذا يحدث إذا وضع أحد المستخدمين عنوان URL مختلفًا في شريط العناوين
مجددًا؟ حسنًا، تمر عملية المتصفح بنفس الخطوات للانتقال إلى موقع مختلف.
ولكن لكي يتمكّن من إجراء ذلك، عليه مراجعة الموقع الإلكتروني المعروض حاليًا لمعرفة ما إذا كان يهتم بحدث
beforeunload.
بإمكان beforeunload إنشاء تنبيه "هل تريد مغادرة هذا الموقع الإلكتروني؟" عند محاولة مغادرة الصفحة أو إغلاق علامة التبويب.
تتم معالجة كل محتوى علامة التبويب، بما في ذلك رمز JavaScript، من خلال عملية العارض، لذا يجب أن تتحقّق عملية المتصفّح مع عملية العارض الحالية عند تلقّي طلب التنقّل الجديد.
إذا تم بدء التنقّل من عملية العارض (مثلاً، نقر المستخدم على رابط أو
تم تشغيل JavaScript من جهة العميل window.location = "https://newsite.com")، ستفحص عملية العارض
أولاً معالِجات beforeunload. بعد ذلك، يمر خلال العملية نفسها التي يمر بها التنقل
في عملية المتصفح. الاختلاف الوحيد هو أنّ طلب التنقّل يبدأ من عملية العارض إلى عمليات المتصفح.
عند الانتقال إلى موقع إلكتروني مختلف عن الموقع المعروض حاليًا، يتم استدعاء عملية عرض منفصلة
للتعامل مع عملية التنقّل الجديدة بينما يتم الاحتفاظ بعملية العرض الحالية لمعالجة أحداث مثل unload. لمزيد من المعلومات، يمكنك الاطّلاع على نظرة عامة على حالات مراحل نشاط الصفحة
وكيفية جذب الأحداث باستخدام
Page Lifecycle API.
في حال مشغّل الخدمات
من بين التغييرات التي تم إجراؤها مؤخرًا على عملية التنقّل هذه تقديم عاملي الخدمات. مشغّل الخدمات هو إحدى طرق كتابة الخادم الوكيل للشبكة في رمز التطبيق، ما يتيح لمطوّري الويب التحكّم بشكل أكبر في المحتوى الذي يتم تخزينه مؤقتًا محليًا وتوقيت الحصول على بيانات جديدة من الشبكة. إذا تم ضبط مشغّل الخدمات لتحميل الصفحة من ذاكرة التخزين المؤقت، فلن تكون هناك حاجة لطلب البيانات من الشبكة.
الجزء المهم الذي يجب تذكُّره هو أنّ مشغّل الخدمات هو رمز JavaScript يتم تشغيله في عملية العارض. ولكن عندما يأتي طلب التنقّل، كيف يمكن لعملية في المتصفح معرفة ما إذا كان الموقع الإلكتروني يتضمّن مشغّل خدمات؟
عند تسجيل مشغّل الخدمات، يتم الاحتفاظ بنطاقه كمرجع (يمكنك الاطّلاع على مزيد من المعلومات عن النطاق في مقالة دورة حياة مشغّل الخدمات هذه). وعند حدوث عملية تنقّل، تتحقّق سلسلة تعليمات الشبكة من النطاق من نطاقات مشغّلي الخدمات المسجّلة. وإذا كان مشغّل الخدمات مسجَّلاً لعنوان URL هذا، تعثر سلسلة واجهة المستخدم على عملية عارض من أجل تنفيذ رمز مشغّل الخدمات. قد يحمّل مشغّل الخدمات البيانات من ذاكرة التخزين المؤقت، ما يغنيك عن الحاجة إلى طلب بيانات من الشبكة، أو قد يطلب موارد جديدة من الشبكة.
التحميل المسبق للتنقل
يمكنك ملاحظة أنّ عملية الإرسال والاستقبال هذه بين عملية المتصفّح وعملية العارض قد تؤدي إلى حدوث تأخيرات إذا قرر مشغّل الخدمات في نهاية المطاف طلب بيانات من الشبكة. التحميل المسبق للتنقّل هي آلية لتسريع هذه العملية من خلال تحميل الموارد بالتوازي مع بدء تشغيل مشغّل الخدمات. وتضع علامة على هذه الطلبات برأس، ما يسمح للخوادم بتحديد إرسال محتوى مختلف لهذه الطلبات، على سبيل المثال، البيانات المحدّثة فقط بدلاً من المستند الكامل.
الخاتمة
في هذه المشاركة، ألقينا نظرة على ما يحدث أثناء التنقّل وكيفية تفاعل رمز تطبيق الويب مثل عناوين الاستجابة وJavaScript من جهة العميل مع المتصفّح. من خلال معرفة الخطوات التي يمر بها المتصفّح للحصول على البيانات من الشبكة، يمكنك فهم سبب تطوير واجهات برمجة التطبيقات، مثل التحميل المسبق للتنقّل. في المشاركة التالية، سنتعمق في كيفية تقييم المتصفح HTML/CSS/JavaScript لعرض الصفحات.
هل استمتعت بالمشاركة؟ إذا كان لديك أي أسئلة أو اقتراحات للمشاركة في المستقبل، يُسعدنا التواصل معك في قسم التعليقات أدناه أو عبر @kosamari على Twitter.