بنية RenderingNG

Chris Harrelson

يمكنك هنا الاطّلاع على كيفية إعداد مكونات RenderingNG وكيفية تدفق مسار المعالجة للعرض من خلالها.

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

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

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

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

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

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

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

مكوّنات البنية

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

بنية مسار العرض

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

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

المراحل هي:

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

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

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

بنية العملية والخيط

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

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

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

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

إنّ المواقع الإلكترونية المختلفة قد تؤدي دائمًا إلى عمليات عرض مختلفة.

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

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

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

هناك عملية واحدة فقط لعرض جميع مكوّنات Chromium، لأنّه عادةً ما يكون هناك وحدة معالجة رسومات واحدة وشاشة واحدة للرسم عليها.

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

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

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

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

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

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

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

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

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

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

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

بنية تسلسل عمليات التقديم هي تطبيق لثلاثة نماذج مختلفة للتحسين:

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

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

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

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

عملية العروض المرئية

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

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

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

هيكل المكوِّن

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

مكونات سلسلة التعليمات الرئيسية لعملية التقديم

في أداة عرض Blink:

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

يحدِّد مخطِّط حلقة أحداث التقديم ومسؤول تنفيذها ما يجب تنفيذه في حلقة أحداث التقديم ووقت تنفيذه. وتعمل هذه الميزة على جدولة عملية التقديم لتتمّ بمعدّل يناسب شاشة الجهاز.

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

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

جزء شجرة الإطار المحلي هو مكون متصل باللون نفسه في شجرة إطار. هناك أربع أشجار إطارات محلية في الصورة: شجرتان للموقع "أ"، وشجرة للموقع "ب"، وشجرة للموقع "ج". تحصل كل شجرة إطارات محلية على مكوّن عرض 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. Animate التأثيرات المرئية على المحتوى من حالة إلى أخرى
3. الانتقال استجابةً للإدخال
4. وجِّه الإدخال بكفاءة إلى الأماكن المناسبة حتى تتمكّن نصوص المطوّرين والأنظمة الفرعية الأخرى من الاستجابة.

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

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

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

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

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

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. يحدّد "الرسم البياني" موعد إجراء السحب.
14. ترسم أداة العروض المرئية إطار المُركِّب المجمّع على الشاشة.

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

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

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

طعام سفري

قد يستغرق الأمر الكثير من الوقت لتذكر كيفية عمل العرض وفهمها.

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

يلعب كل مكون دورًا مهمًا في تمكين أداء تطبيقات الويب الحديثة وميزاتها.

تابِع القراءة لمعرفة المزيد عن هياكل البيانات الرئيسية، التي تُعدّ مهمة لواجهة RenderingNG بقدر ما هي مهمة لمكونات الرموز البرمجية.

---

رسوم توضيحية من إعداد "أونا كرافيتس".