نظرة عامة على بنية RenderingNG

Chris Harrelson

ملاحظة: هذه المشاركة جزء من سلسلة عن محرك عرض Chromium. يمكنك مشاهدة بقية السلسلة لمزيد من المعلومات.

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

بدءًا من أعلى مستوى والتوغّل من هناك، تتمثل مهام العرض في:

1. اعرض المحتوى في وحدات بكسل على الشاشة.
2. أضِف الحركة إلى التأثيرات المرئية على المحتوى من حالة إلى أخرى.
3. التنقّل استجابةً للإدخال.
4. توجيه الإدخال بكفاءة إلى الأماكن المناسبة، حتى تستجيب النصوص البرمجية للمطوّرين والأنظمة الفرعية الأخرى

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

يتضمن كل إطار ما يلي:

• حالة DOM
• CSS
• لوحات رسم
• المراجع الخارجية، مثل الصور والفيديوهات والخطوط وملفات SVG

الإطار هو مستند HTML بالإضافة إلى عنوان URL الخاص به. تحتوي صفحة الويب التي يتم تحميلها في علامة تبويب المتصفح على إطار من المستوى الأعلى، وإطارات فرعية لكل إطار iframe في مستند المستوى الأعلى، وإطارات iframe المتكررة التابعة لها.

التأثير المرئي هو عملية تصويرية يتمّ تطبيقها على الصورة النقطية مثل التمرير أو التحويل أو الاقتصاص أو الفلترة أو التعتيم أو المزج.

مكونات البنية الهندسية

في RenderingNG، يتم تقسيم هذه المهام بشكل منطقي عبر عدة مراحل ومكونات التعليمة البرمجية. وتنتهي المكونات في عمليات مختلفة لوحدة المعالجة المركزية (CPU) وسلاسل ترابط ومكونات فرعية داخل تلك السلاسل. ويؤدي كل منها دورًا مهمًا في تحقيق الموثوقية والأداء القابل للتوسّع وقابلية التوسّع لجميع محتوى الويب.

جارٍ عرض بنية مسار البيانات

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

لن تتناول مشاركة المدونة هذه الكثير من التفاصيل حول العناصر، والتي ستتم مناقشتها في المشاركة التالية: هياكل البيانات الرئيسية وأدوارها في RenderingNG.

مراحل المسار

في الرسم التخطيطي السابق، يتم تمييز المراحل بألوان تشير إلى السلسلة أو العملية التي يتم تنفيذها:

• الأخضر: سلسلة التعليمات الرئيسية لمعالجة العرض
• الأصفر: مركّب عملية العرض
• البرتقالي: عملية التصور

في بعض الحالات يمكن تنفيذها في أماكن متعددة، اعتمادًا على الظروف، وهذا هو السبب في أن البعض يحتوي على لونين.

المراحل هي:

1. تحريك: يمكنك تغيير الأنماط المحسوبة وتغيير أشجار الخصائص بمرور الوقت استنادًا إلى المخططات الزمنية الوصفية.
2. النمط: يمكنك تطبيق CSS على نموذج العناصر في المستند (DOM) وإنشاء أنماط محسوبة.
3. التنسيق: حدِّد حجم عناصر DOM وموضعها على الشاشة، وأنشئ شجرة أجزاء غير قابلة للتغيير.
4. الرسم المسبق: احتساب أشجار الخصائص وinvalidate أي قوائم عرض ومربعات زخرفية حالية لوحدة معالجة الرسومات حسب الحاجة.
5. التمرير: يمكنك تعديل إزاحة التمرير في المستندات وعناصر DOM القابلة للتمرير، من خلال تبديل أشجار الخصائص.
6. التلوين: يمكنك احتساب قائمة عرض توضّح كيفية مسح مربّعات زخرفة وحدة معالجة الرسومات من نموذج العناصر في المستند (DOM).
7. الإتمام: يمكنك نسخ أشجار المواقع الإلكترونية وقائمة العرض إلى سلسلة محادثات المكوّن.
8. تحديد الطبقات: قسِّم قائمة العرض إلى قائمة طبقات مركّبة لاستخدام نقطي ومؤثرات حركية بشكل مستقل.
9. إنشاءات الصور النقطية وفك الترميز والطلاء: يمكنك تحويل قوائم العرض والصور المرمّزة ورمز وظائف الطلاء، على التوالي، إلى مربّعات بنية وحدة معالجة الرسومات.
10. تفعيل: يمكنك إنشاء إطار مجمّع يوضّح كيفية رسم مربّعات وحدة معالجة الرسومات ووضعها على الشاشة، بالإضافة إلى أي تأثيرات مرئية.
11. التجميع: يتيح لك هذا الخيار دمج إطارات التركيب من جميع إطارات التركيب المرئية في إطار واحد شامل واحد.
12. الرسم: يمكنك تنفيذ إطار المكوّن المجمّع في وحدة معالجة الرسومات لإنشاء وحدات بكسل على الشاشة.

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

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

بنية العملية وسلاسل المحادثات

ملاحظة: يزيد عدد عمليات وحدة المعالجة المركزية (CPU) وسلاسل المحادثات في بنية Chromium أكثر مما هو موضح هنا. تركّز هذه المخطّطات البيانية فقط على العناصر المهمة للعرض.

عمليات وحدة المعالجة المركزية (CPU)

يؤدي استخدام عمليات وحدة المعالجة المركزية (CPU) المتعددة إلى تحقيق الأداء والعزلة الأمنية بين المواقع الإلكترونية وحالة المتصفح، والعزلة الأمنية والثبات عن أجهزة وحدة معالجة الرسومات.

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

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

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

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

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

وبما أن المتصفح يمكن أن يحتوي على العديد من علامات التبويب والنوافذ، وجميعها يحتوي على وحدات بكسل لواجهة المستخدم في المتصفح، قد تتساءل: ما سبب وجود عملية متصفح واحدة فقط؟ والسبب في ذلك هو أن علامة تبويب واحدة منها فقط يتم التركيز عليها في كل مرة، إذ إنّ علامات تبويب المتصفح غير المرئية غالبًا ما يتم إيقافها وإسقاطها من ذاكرة وحدة معالجة الرسومات. مع ذلك، يتزايد تنفيذ ميزات عرض واجهة المستخدم المعقّدة في المتصفّح في عمليات العرض أيضًا (المعروفة باسم WebUI). لا يرجع ذلك إلى أسباب عزل الأداء، ولكن من أجل الاستفادة من سهولة استخدام محرك عرض الويب من Chromium.

على أجهزة Android القديمة، تتم مشاركة عملية العرض والمتصفّح عند استخدامهما في WebView (لا ينطبق ذلك على Chromium في نظام التشغيل Android بشكل عام، بل فقط WebView). في WebView، تتم أيضًا مشاركة عملية المتصفِّح مع تطبيق التضمين، ويتم إجراء عملية عرض واحدة فقط في WebView.

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

سلاسل المحادثات

تساعد سلاسل المحادثات في تحقيق عزلة الأداء والاستجابة على الرغم من بطء المهام ومزامنة المسارات والتخزين المؤقت المتعدد.

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

يُعد فصل سلاسل المحادثات الرئيسية والمؤلفة أمرًا بالغ الأهمية لعزل الأداء للرسوم المتحركة والتمرير من سلسلة محادثات رئيسية.

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

وبالمثل، لا يتم توفير سوى مؤشر واحد للمكوّن لكل عملية عرض. وليس هناك مشكلة عمومًا في وجود مشكلة واحدة فقط، لأن جميع العمليات المكلفة حقًا على سلسلة التعليمات يتم تفويضها إما إلى سلسلة تعليمات عامل تركيب المكون أو عملية Viz، ويمكن القيام بهذا العمل بالتوازي مع توجيه الإدخال أو التمرير أو الرسوم المتحركة. تُنسِّق سلاسل مشغّلي وحدة معالجة المهام المهام التي يتم تنفيذها في عملية Viz، ولكن قد يتعذّر تسريع وحدة معالجة الرسومات في كل مكان لأسباب خارجة عن سيطرة Chromium، مثل أخطاء برنامج التشغيل. في هذه الحالات، ستنفّذ سلسلة التعليمات هذه العمل في وضع احتياطي على وحدة المعالجة المركزية (CPU).

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

ومن المهم أيضًا ملاحظة أنّ بنية سلاسل التعليمات الخاصة بعملية العرض عبارة عن تطبيق لثلاثة أنماط مختلفة من التحسين:

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

عملية المتصفِّح

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

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

عملية التصور

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

تتم عادةً معالجة رسومات الصور النقطية والرسم في سلسلة التعليمات نفسها، لأنهما يعتمدان على موارد وحدة معالجة الرسومات، ومن الصعب الاعتماد على استخدام سلاسل التعليمات المتعددة في وحدة معالجة الرسومات بشكل موثوق (يشكّل الوصول بسهولة إلى سلاسل التعليمات المتعددة إلى وحدة معالجة الرسومات أحد دافعي تطوير معيار Vulkan الجديد). في Android WebView، تتوفّر سلسلة منفصلة لعرض الرسم على مستوى نظام التشغيل بسبب كيفية تضمين مكوّنات WebView في تطبيق أصلي. ومن المحتمل أن تتضمّن الأنظمة الأساسية الأخرى سلسلة التعليمات هذه في المستقبل.

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

هيكل المكون

ضمن كل سلسلة تعليمات رئيسية أو مؤلف في عملية عرض، هناك مكونات برامج منطقية تتفاعل مع بعضها البعض بطرق منظمة.

عرض مكوّنات سلسلة التعليمات الرئيسية للعملية

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

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

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

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

بنية سلسلة محادثات المكوّن من عملية العرض

تشمل مكوّنات مكوّن عملية العرض ما يلي:

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

مثال عملي

لنجعل الهندسة المعمارية خرسانية الآن بمثال. في هذا المثال، هناك ثلاث علامات تبويب:

علامة التبويب 1: foo.com

<html>
  <iframe id=one src="foo.com/other-url"></iframe>
  <iframe  id=two src="bar.com"></iframe>
</html>

علامة التبويب 2: bar.com

<html>
 …
</html>

علامة التبويب 3: baz.com html <html> … </html>

ستبدو العملية وسلسلة التعليمات وبنية المكوّنات لعلامات التبويب هذه على النحو التالي:

لنلقِ الآن نظرة على مثال واحد لكل مهمة من المهام الأربع الرئيسية للعرض، والتي قد تتذكرها كما يلي:

1. عرض المحتوى في وحدات بكسل على الشاشة.
2. أضِف الحركة إلى التأثيرات المرئية على المحتوى من حالة إلى أخرى.
3. التنقّل استجابةً للإدخال.
4. يمكنك توجيه الإدخال بكفاءة إلى الأماكن الصحيحة كي تستجيب النصوص البرمجية للمطوّرين والأنظمة الفرعية الأخرى.

لعرض نموذج DOM الذي تم تغييره لعلامة التبويب الأولى:

1. يغيِّر النص البرمجي لمطوّر البرامج نموذج العناصر في المستند (DOM) أثناء عملية عرض foo.com.
2. يخبر عارض Blink المكوِّن بأنّه يجب بدء العرض.
3. يخبر المؤلف Viz أنه يحتاج إلى العرض لتحدثه.
4. يشير Viz إلى بداية العرض مرة أخرى إلى المكوّن.
5. يعيد المكوّنات توجيه إشارة البدء إلى عارض Blink.
6. ينفِّذ مجري تكرار أحداث سلسلة التعليمات الرئيسية مراحل نشاط المستند.
7. ترسل سلسلة التعليمات الرئيسية النتيجة إلى سلسلة التعليمات في المكوّن.
8. يشغّل برنامج تكرار الأحداث للمكوِّن دورة حياة الإنشاء.
9. يتم إرسال أي مهام نقطية إلى Viz لإنشاء صورة نقطية (غالبًا ما يكون هناك أكثر من واحدة من هذه المهام).
10. محتوى نقطي على وحدة معالجة الرسومات
11. يقر Viz بإكمال مهمة الصور النقطية. ملاحظة: لا ينتظر Chromium في كثير من الأحيان اكتمال الصورة النقطية، وبدلاً من ذلك يستخدم شيئًا يسمى الرمز المميز للمزامنة ينبغي حله من خلال المهام النقطية قبل تنفيذ الخطوة 15.
12. يتم إرسال إطار المكوّن إلى Viz.
13. يجمع Viz الإطارات المكونة لعملية عرض foo.com وعملية عرض iframe في bar.com وواجهة مستخدم المتصفح.
14. يجدول Viz موعدًا للتعادل.
15. يرسم Viz إطار التركيب المجمَّع على الشاشة.

من أجل تحريك عملية انتقال لتحويل CSS في علامة التبويب الثانية:

1. تحدد سلسلة المكوّن لعملية العرض bar.com الرسوم المتحركة في حلقة أحداث المكوّن عن طريق تبديل أشجار الخصائص الحالية. ثم يؤدي ذلك إلى إعادة تشغيل المكوّن. (قد تحدث مهام نقطية وفك الترميز، ولكن لم يتم توضيحها هنا).
2. يتم إرسال إطار المكوّن إلى Viz.
3. يجمّع Viz الإطارات التركيبية لعملية عرض foo.com وعملية عرض bar.com وواجهة مستخدم المتصفح.
4. يجدول Viz موعدًا للتعادل.
5. يرسم Viz إطار التركيب المجمَّع على الشاشة.

للانتقال في صفحة الويب في علامة التبويب الثالثة:

1. تتم إضافة تسلسل من أحداث input (الماوس أو اللمس أو لوحة المفاتيح) إلى عمليات المتصفِّح.
2. يتم توجيه كل حدث إلى مؤشر ترابط مجمّع عملية العرض في baz.com.
3. يحدد المؤلف ما إذا كانت سلسلة التعليمات الرئيسية بحاجة إلى معرفة الحدث.
4. يتم إرسال الحدث، إذا لزم الأمر، إلى سلسلة المحادثات الرئيسية.
5. تنشِّط سلسلة التعليمات الرئيسية أدوات معالجة أحداث input (pointerdown أو touchstar أو pointermove أو touchmove أو wheel) لمعرفة ما إذا كان المستمعون سيتصلون بـ "preventDefault" في الحدث.
6. تعرض سلسلة التعليمات الرئيسية ما إذا تم استدعاء preventDefault إلى المؤلف.
7. وإذا لم يكن كذلك، يتم إرسال حدث الإدخال مرة أخرى إلى عملية المتصفِّح.
8. تحوّل عملية المتصفِّح إلى إيماءة تمرير من خلال دمجها مع الأحداث الأخيرة الأخرى.
9. يتم إرسال إيماءة التمرير مرة أخرى إلى سلسلة مؤلف عملية العرض في baz.com،
10. يتم تطبيق التمرير هناك، وتحدد سلسلة المؤلف لعملية العرض bar.com الرسوم المتحركة في حلقة أحداث المكون. بعد ذلك يؤدي ذلك إلى تبديل إزاحة التمرير في أشجار الخصائص وإعادة تشغيل دورة حياة المكوّن. وتطلب أيضًا من سلسلة التعليمات الرئيسية تنشيط حدث scroll (غير موضّح هنا).
11. يتم إرسال إطار المكوّن إلى Viz.
12. يجمّع Viz الإطارات التركيب لعملية عرض foo.com وعملية عرض bar.com وواجهة مستخدم المتصفح.
13. يجدول Viz موعدًا للتعادل.
14. يرسم Viz إطار التركيب المجمَّع على الشاشة.

ملاحظة: يُرجى العلم أنّه يمكن لكل حدث إدخال بعد أول حدث تخطّي الخطوتين الثالثة والرابعة، لأنّ عملية الانتقال قد بدأت فعلاً، وبالتالي يمكن للنصوص البرمجية ملاحظتها من خلال حدث scroll، ولكنها لن تتم مقاطعتها بعد ذلك.

لتوجيه حدث click على رابط تشعّبي في إطار iframe رقم #two في علامة التبويب الأولى:

1. يظهر حدث input (الماوس أو اللمس أو لوحة المفاتيح) أثناء معالجة المتصفّح. ويُجري اختبار نتائج تقريبيًا لتحديد أنّ عملية عرض إطار iframe في bar.com يجب أن تتلقى النقرة وترسلها إلى هناك.
2. توجِّه سلسلة التعليمات البرمجية للموقع الإلكتروني bar.com حدث click إلى سلسلة التعليمات الرئيسية للموقع bar.com وتحدِّد موعدًا لمهمة حلقة عرض الأحداث لمعالجتها.
3. معالج حدث الإدخال لاختبارات نتائج سلسلة التعليمات الرئيسية في bar.com لتحديد عنصر DOM في إطار iframe الذي تم النقر عليه، وتنشيط حدث click للنصوص البرمجية لملاحظتها. بدون سماع preventDefault، يتم الانتقال إلى الرابط التشعّبي.
4. عند تحميل صفحة الوجهة للرابط التشعبي، يتم عرض الحالة الجديدة، مع خطوات مشابهة لمثال "عرض نموذج العناصر في المستند (DOM)" أعلاه. (لم يتم توضيح هذه التغييرات اللاحقة هنا.)

الخلاصة

أوه، كان ذلك الكثير من التفاصيل. كما ترون، إنّ العرض في Chromium معقّد للغاية. قد يستغرق الأمر الكثير من الوقت لتذكر جميع الأجزاء واستيعابها، لذلك لا تقلق إذا كان الأمر يبدو مربكًا.

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

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

لكن قبل ذلك، سأشرح أيضًا كيف أن هياكل البيانات الرئيسية المذكورة في هذه المشاركة (التي يُشار إليها باللون الأزرق على جانبي مخطط مسار العرض) لا تقل أهمية بالنسبة إلى RenderingNG عن مكونات الرمز البرمجي.

شكرًا على القراءة، ويُرجى متابعتنا باستمرار.

رسومات "أونا كرافيتس"