نظرة من الداخل على متصفح الويب الحديث (الجزء 3)

Mariko Kosaka

الأعمال الداخلية لعملية العارض

هذا هو الجزء 3 من 4 أجزاء من سلسلة مدونات تتناول كيفية عمل المتصفحات. في السابق، ناقشنا البنية متعددة العمليات وتدفق التنقّل. في هذه المشاركة، سنلقي نظرة على ما يحدث في عملية العارض.

تتناول عملية العرض العديد من جوانب أداء الويب. نظرًا لأن هناك الكثير من الأشياء داخل عملية العارض، فهذا المنشور ليس سوى نظرة عامة. لمزيد من التفاصيل، يحتوي قسم "الأداء" ضمن "أساسيات الويب" على العديد من الموارد الإضافية.

معالجة عمليات العارض لمحتوى الويب

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

تتمثل المهمة الأساسية لعملية العرض في تحويل HTML وCSS وJavaScript إلى صفحة ويب يمكن للمستخدم التفاعل معها.

الشكل 1: عملية العارض باستخدام سلسلة محادثات رئيسية وسلاسل محادثات عامل التشغيل وسلسلة محادثات أداة وسلسلة محادثات نقطية بداخلها

التحليل

إنشاء نموذج العناصر في المستند (DOM)

عندما تتلقّى عملية العرض رسالة إكمال للتنقل وتبدأ في تلقّي بيانات HTML، تبدأ سلسلة التعليمات الرئيسية في تحليل السلسلة النصية (HTML) وتحويلها إلى جدول Model (DOM).

DOM هو تمثيل داخلي في المتصفح للصفحة بالإضافة إلى بنية البيانات وواجهة برمجة التطبيقات التي يمكن لمطوّر الويب التفاعل معها عبر JavaScript.

يحدّد معيار HTML تحليل مستند HTML إلى نموذج DOM. ربما لاحظت أن إرسال ملفات HTML إلى المتصفح لا يؤدي إلى حدوث أي خطأ مطلقًا. على سبيل المثال، يُعدّ عدم توفّر علامة </p> للإغلاق محتوى HTML صالحًا. يتم التعامل مع الترميز الخاطئ مثل Hi! <b>I'm <i>Chrome</b>!</i> (يتم إغلاق العلامة b قبل العلامة i) كما لو كنت تكتب Hi! <b>I'm <i>Chrome</i></b><i>!</i>. وذلك لأن مواصفات HTML مصممة للتعامل مع هذه الأخطاء بشكل رشيق. إذا كنت مهتمًا بمعرفة كيفية تنفيذ هذه الإجراءات، فيمكنك قراءة القسم "مقدمة حول التعامل مع الأخطاء والحالات الغريبة في المحلل اللغوي" في مواصفات HTML.

جارٍ تحميل المورد الفرعي

يستخدم موقع الويب عادةً موارد خارجية مثل الصور وCSS وJavaScript. يجب تحميل هذه الملفات من الشبكة أو ذاكرة التخزين المؤقت. قد تطلب سلسلة التعليمات الرئيسية واحدة تلو الأخرى عند العثور عليها أثناء التحليل لإنشاء نموذج العناصر في المستند (DOM)، ولكن للتسريع، يتم تشغيل "الماسح الضوئي للتحميل المسبق" بشكل متزامن. إذا كانت هناك عناصر مثل <img> أو <link> في مستند HTML، يختبر الماسح الضوئي للتحميل المسبق الرموز المميزة التي تم إنشاؤها بواسطة محلّل HTML ويرسل الطلبات إلى سلسلة محادثات الشبكة في عملية المتصفِّح.

الشكل 2: تحليل سلسلة التعليمات الرئيسية بتنسيق HTML وإنشاء شجرة نموذج العناصر في المستند

يمكن لـ JavaScript حظر عملية تحليل

عندما يعثر محلّل HTML اللغوي على علامة <script>، يوقف تحليل مستند HTML مؤقتًا ويتعين عليه تحميل رمز JavaScript وتحليله وتنفيذه. لماذا؟ لأنّ لغة JavaScript يمكنها تغيير شكل المستند باستخدام عناصر مثل document.write() التي تغيّر بنية DOM بالكامل (تتضمّن نظرة عامة على نموذج التحليل في مواصفات HTML مخططًا رائعًا). وهذا هو السبب في أن محلل HTML يجب أن ينتظر حتى يتم تشغيل JavaScript قبل أن يتمكن من استئناف تحليل مستند HTML. إذا كنت مهتمًا بمعرفة ما يحدث عند تنفيذ JavaScript، سيتحدث فريق V8 عن هذا الموضوع ومشاركات المدوّنة حول هذا الموضوع.

تلميح إلى المتصفّح حول الطريقة التي تريد تحميل الموارد بها

هناك العديد من الطرق التي يمكن لمطوّري الويب من خلالها إرسال تلميحات إلى المتصفح لتحميل الموارد بشكل جيّد. إذا كانت JavaScript لا تستخدم document.write()، يمكنك إضافة السمة async أو defer إلى العلامة <script>. بعد ذلك، يُحمِّل المتصفِّح رمز JavaScript ويشغِّله بشكلٍ غير متزامن ولا يحظر التحليل. ويمكنك أيضًا استخدام وحدة JavaScript إذا كان ذلك مناسبًا. <link rel="preload"> هي طريقة لإبلاغ المتصفح بأن المورد ضروري بالتأكيد لعملية التنقل الحالية وأنك تريد تنزيله في أقرب وقت ممكن. لمزيد من المعلومات، انتقِل إلى مقالة تحديد أولويات الموارد - الحصول على المتصفّح لمساعدتك.

احتساب النمط

لا يكفي أن يكون لديك نموذج DOM لمعرفة الشكل الذي ستبدو عليه الصفحة لأنه يمكننا تصميم عناصر الصفحة في CSS. تحلّل سلسلة التعليمات الرئيسية لغة CSS وتحدّد النمط المحسوب لكل عقدة DOM. هذه معلومات حول نوع النمط الذي يتم تطبيقه على كل عنصر بناءً على محددات CSS. يمكنك الاطّلاع على هذه المعلومات في القسم "computed" من "أدوات مطوري البرامج".

الشكل 3: لغة CSS لتحليل سلسلة المحادثات الرئيسية لإضافة نمط محسوب

حتى في حال عدم توفير أي CSS، يحتوي كل عقدة DOM على نمط محسوب. يتم عرض علامة <h1> بحجم أكبر من العلامة <h2>، ويتم تحديد الهوامش لكل عنصر. هذا لأن المتصفح به ورقة أنماط افتراضية. إذا أردت معرفة شكل خدمة مقارنة الأسعار التلقائية في Chrome، يمكنك الاطّلاع على رمز المصدر هنا.

التنسيق

والآن، تعرف عملية العارض بنية المستند والأنماط لكل عُقدة، غير أن هذا لا يكفي لعرض صفحة. تخيل أنك تحاول وصف لوحة لصديقك عبر الهاتف. "هناك دائرة حمراء كبيرة ومربع أزرق صغير" ليست معلومات كافية لصديقك لمعرفة كيف ستبدو اللوحة بالضبط.

الشكل 4: شخص يقف أمام لوحة، ويتصل بخط الهاتف الآخر

التخطيط هو عملية للعثور على هندسة العناصر. يسير مؤشر الترابط الرئيسي عبر DOM والأنماط المحسوبة وينشئ شجرة التخطيط التي تحتوي على معلومات مثل الإحداثيات س ص وأحجام مربع الإحاطة. قد تكون شجرة التنسيق مشابهة لشجرة نموذج العناصر في المستند، ولكنها تحتوي فقط على معلومات ذات صلة بالمحتوى المعروض على الصفحة. إذا تم تطبيق display: none، لن يكون هذا العنصر جزءًا من شجرة التنسيق (ومع ذلك، يكون هناك عنصر ذو visibility: hidden في شجرة التنسيق). وبالمثل، في حال تطبيق عنصر زائف يتضمّن محتوى مثل p::before{content:"Hi!"}، سيتم تضمينه في شجرة التنسيق حتى لو لم يكن ذلك في DOM.

الشكل 5: سلسلة المحادثات الرئيسية التي تتجاوز شجرة نموذج العناصر في المستند مع الأنماط المحسوبة وإنشاء شجرة تنسيق

الشكل 6: تنسيق المربّع للفقرة التي تتحرّك بسبب تغيير في فاصل الأسطر

يعد تحديد تخطيط الصفحة مهمة صعبة. حتى أبسط تخطيط صفحة مثل تدفق الكتلة من أعلى إلى أسفل يجب أن يأخذ في الاعتبار حجم الخط وأين تقسم الأسطر إليه لأن ذلك يؤثر على حجم وشكل الفقرة؛ مما يؤثر بعد ذلك في المكان الذي يلزم أن تكون فيه الفقرة التالية.

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

طلاء

الشكل 7: شخص أمام لوحة يحمل فرشاة رسم، يتساءل عما إذا كان عليه رسم دائرة أولاً أم مربّع أولاً

لا يكفي توفّر نموذج كائن المستند (DOM) والنمط والتنسيق لعرض الصفحة. لنفترض أنك تحاول إعادة إنتاج لوحة. أنت تعرف حجم العناصر وشكلها وموقعها، ولكن لا يزال عليك الحكم على ترتيب طلاءها.

على سبيل المثال، قد يتم ضبط z-index لعناصر معيّنة، وفي هذه الحالة سيؤدي ترتيب العناصر المكتوبة في HTML إلى عرض غير صحيح.

الشكل 8: ظهور عناصر الصفحة بترتيب ترميز HTML، ما يؤدي إلى ظهور صورة غير صحيحة بسبب عدم أخذ مؤشر z في الاعتبار

في خطوة الطلاء هذه، تحدد سلسلة التعليمات الرئيسية شجرة التنسيق لإنشاء سجلات الطلاء. سجل الطلاء هو ملاحظة عن عملية الطلاء مثل "الخلفية أولاً، ثم النص، ثم المستطيل". إذا كنت قد رسمت على عنصر <canvas> باستخدام JavaScript، قد تكون هذه العملية مألوفة لك.

الشكل 9: سلسلة التعليمات الرئيسية التي تمرّ عبر شجرة التنسيق وإنتاج سجلات الرسم

سيكون تعديل مسار العرض مكلفًا.

الشكل 10: نمط +DOM، والتنسيق، وأشجار الطلاء بترتيب إنشائها

أهم شيء يجب استيعابه في مسار العرض هو أنه في كل خطوة يتم استخدام نتيجة العملية السابقة لإنشاء بيانات جديدة. على سبيل المثال، إذا تغير شيء ما في شجرة التخطيط، فيجب إعادة إنشاء ترتيب الطلاء للأجزاء المتأثرة من الوثيقة.

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

الشكل 11: إطارات الصور المتحركة على مخطط زمني

حتى إذا كانت عمليات العرض لديك تواكب عملية إعادة تحميل الشاشة، يتم تنفيذ هذه العمليات الحسابية في سلسلة التعليمات الرئيسية، ما يعني أنّه قد يتم حظرها عند تشغيل تطبيقك لـ JavaScript.

الشكل 12: إطارات الصور المتحركة على مخطط زمني، ولكن تم حظر إطار واحد بواسطة JavaScript

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

الشكل 13: أجزاء أصغر من JavaScript تعمل على مخطط زمني مع إطار صور متحركة

التركيب

كيف يمكنك رسم صفحة؟

الشكل 14: صورة متحركة لعملية المسح الضوئي البسيطة

والآن بعد أن عرف المتصفح بنية المستند، ونمط كل عنصر، وهندسة الصفحة، وترتيب الطلاء، كيف يرسم صفحة؟ يسمى تحويل هذه المعلومات إلى بكسل على الشاشة بالبكسل.

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

ما هو تركيب

الشكل 15: صورة متحركة لعملية التركيب

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

ويمكنك الاطّلاع على كيفية تقسيم موقعك الإلكتروني إلى طبقات في "أدوات مطوري البرامج" باستخدام لوحة الطبقات.

التقسيم إلى طبقات

لمعرفة العناصر التي يجب أن تكون في الطبقات، تمر سلسلة التعليمات الرئيسية عبر شجرة التخطيط لإنشاء شجرة الطبقات (يسمى هذا الجزء "تحديث شجرة الطبقات" في لوحة أداء أدوات مطوري البرامج). إذا كانت أجزاء معيّنة من الصفحة التي يجب أن تكون طبقة منفصلة (مثل القائمة الجانبية ) لا تحصل على هذه المساحة، يمكنك تعديل معلومات المتصفّح باستخدام السمة will-change في CSS.

الشكل 16: سلسلة التعليمات الرئيسية التي تمرّ عبر شجرة التنسيق لإنتاج شجرة طبقات

قد تميل إلى إضافة طبقات لكل عنصر، إلا أن تركيب عدد كبير من الطبقات قد يؤدي إلى عملية أبطأ من المسح المجالي لأجزاء صغيرة من الصفحة في كل إطار، لذا من الضروري قياس أداء العرض في تطبيقك. للمزيد من المعلومات عن الموضوع، يُرجى الاطّلاع على الالتزام بخصائص Compositor فقط وإدارة عدد الطبقات.

صورة نقطية ومركبة من سلسلة التعليمات الرئيسية

بمجرد إنشاء شجرة الطبقات وتحديد رتبة الطلاء، تلتزم سلسلة التعليمات الرئيسية بهذه المعلومات في سلسلة التركيب. تقوم سلسلة تعليمات التركيب بعد ذلك بتحويل كل طبقة إلى نطاق نقطي. قد تكون الطبقة كبيرة مثل طول الصفحة بالكامل، لذلك تقسمها مؤشر ترابط الدالة إلى مربّعات وترسل كل مربع إلى سلاسل نقطية. تقوم السلاسل النقطية بتحويل كل مربع إلى صور نقطية وتخزينها في ذاكرة وحدة معالجة الرسومات.

الشكل 17: سلاسل الصور النقطية التي تنشئ صورة نقطية للمربّعات وترسلها إلى وحدة معالجة الرسومات

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

بعد تقسيم المربّعات إلى نقطية، تجمع سلسلة أداة التركيب معلومات المربّعات التي تُسمى رسم الوحدات الربعية لإنشاء إطار مكوّن.

سحب رباعيات	يحتوي على معلومات مثل مكان المربّع في الذاكرة ومكان رسمه في الصفحة مع مراعاة تركيب الصفحة.
إطار المُركّب	مجموعة من أرباع الرسم التي تمثل إطارًا للصفحة.

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

الشكل 18: سلسلة مركّبة تُنشئ إطارًا مركّبًا. يتم إرسال الإطار إلى عملية المتصفِّح ثم إلى وحدة معالجة الرسومات

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

الخاتمة

في هذه المقالة، تناولنا مسار العرض بدءًا من التحليل وحتى الإنشاء. نأمل أن تكون الآن قادرًا على قراءة المزيد حول تحسين أداء موقع الويب.

في المشاركة التالية والأخيرة من هذه السلسلة، سنلقي نظرة على سلسلة محادثات أداة الإنشاء بالمزيد من التفاصيل، ونرى ما يحدث عند استخدام البيانات التي يُدخلها المستخدِم مثل mouse move وclick.

هل استمتعت بالمشاركة؟ إذا كانت لديك أي أسئلة أو اقتراحات بشأن المشاركة القادمة، يُرجى التواصل معها في قسم التعليقات أدناه أو من خلال إرسال رسالة @kosamari على Twitter.

التالي: يصل الإدخال إلى أداة التركيب