بنية RenderingNG

Chris Harrelson

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

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

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

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

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

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

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

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

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

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

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

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

المراحل هي:

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

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

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

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

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

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

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

تنتهي المواقع الإلكترونية المختلفة دائمًا في عمليات عرض مختلفة

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

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

هناك عملية تصور واحدة فقط لجميع Chromium، حيث لا توجد عادة وحدة معالجة رسومات وشاشة واحدة للرسم إليها.

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

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

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

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

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

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

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

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

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

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

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

تعتمد بنية تسلسل عمليات العرض على ثلاث خطوات أنماط التحسين:

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

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

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

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

عملية التصور

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

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

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

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

1. تؤدي سلسلة التركيب لعملية عرض bar.com إلى وضع علامة على صورة متحركة في حلقة حدث المكوّن الخاص بها من خلال تغيير أشجار الملكية الحالية. ثم يؤدي هذا إلى إعادة تشغيل دورة حياة التركيب. (قد تحدث مهام نقطية وفك ترميز، ولكن لن يتم عرضها هنا).
2. يتم إرسال إطار المكوّن إلى Viz.
3. تجمع Viz إطارات التركيب لعملية العرض 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. يقوم التصور برسم إطار التركيب المجمّع على الشاشة.

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

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

طعام سفري

قد يستغرق استيعاب وفهم آلية عمل العرض وقتًا طويلاً.

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

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

تابع القراءة عن هياكل البيانات الرئيسية، والتي لا تقل أهمية بالنسبة إلى RenderingNG عن مكونات الرمز البرمجي.

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