بنية RenderingNG

Chris Harrelson

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

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

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

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

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

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

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

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

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

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

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

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

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

المراحل هي:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

وبالمثل، هناك سلسلة مكوّنات واحدة فقط لكل عملية عرض. وعمومًا لا توجد مشكلة في وجود واحد فقط، لأن جميع العمليات باهظة الثمن على مؤشر ترابط أداة التركيب يتم تفويضها إما لسلاسل محادثات العامل أو إلى عملية Viz، ويمكن تنفيذ هذا العمل بالتوازي مع توجيه الإدخال أو التمرير أو الرسوم المتحركة. تعمل سلاسل محادثات العاملين في المركبة على تنسيق المهام التي يتم تشغيلها في عملية Viz، ولكن تسريع GPU في أي مكان يمكن أن يفشل لأسباب خارجة عن سيطرة Chromium، مثل أخطاء برنامج التشغيل. في هذه الحالات، ستقوم سلسلة Worker بالعمل في وضع احتياطي على وحدة المعالجة المركزية (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. تخبر أداة التركيب التصور أنها بحاجة إلى إجراء عرض.
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. يقوم التصور برسم إطار التركيب المجمّع على الشاشة.

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

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

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

طعام سفري

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

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

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

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

---

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