تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

بُنى البيانات الرئيسية في RenderingNG

Chris Harrelson

Daniel Cheng

Philip Rogers

Koji Ishi

Ian Kilpatrick

Kyle Charbonneau

لنلقِ نظرة على هياكل البيانات الرئيسية، وهي المدخلات والمخرجات لمسار العرض.

هياكل البيانات هذه هي:

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

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

<!-- Example code -->
<html>
  <div style="overflow: hidden; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
      id="one" src="foo.com/etc"></iframe>
  </div>
  <iframe style="top:200px;
    transform: scale(1.1) translateX(200px)"
    id="two" src="bar.com"></iframe>
</html>

إطارات الأشجار

قد يختار Chrome أحيانًا عرض إطار من مصادر متعددة في عملية عرض مختلفة عن إطاره الأصلي.

في نموذج الرمز البرمجي، هناك ثلاثة إطارات في المجموع:

إطار رئيسي foo.com يحتوي على إطارَين iframe

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

شجرتان للإطارات تمثّلان عمليتَي التصوير.

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

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

تعمل مسارات التقديم وفقًا لدقة جزء من شجرة اللقطات المحلية. ضع في الاعتبار مثالاً أكثر تعقيدًا يعتمد على foo.com كإطار رئيسي:

<iframe src="bar.com"></iframe>

وإطار bar.com الفرعي التالي:

<iframe src="foo.com/etc"></iframe>

على الرغم من أنّه لا يزال هناك مُعرِّفَان فقط، هناك الآن ثلاثة أجزاء من شجرة الإطارات المحلية، مع جزءَين في عملية المعالجة لfoo.com وجزء واحد في عملية المعالجة لbar.com:

تمثيل للعرضَين وثلاثة أجزاء على شكل شجرة للإطارات

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

الإطار الرئيسي foo.com والإطار الفرعي foo.com/other-page هما جزءان من شجرة الإطارات نفسها ويتم عرضهما في العملية نفسها. ومع ذلك، يظلّ للإطارَين مراحل حياة مستند مستقلة لأنّهما جزء من أجزاء مختلفة من شجرة الإطارات المحلية. لهذا السبب، من المستحيل إنشاء إطار تركيب واحد لكلاهما في تحديث واحد. لا تتوفّر لعملية التصدير معلومات كافية لدمج إطار المكوّن الذي تم إنشاؤه لfoo.com/other-page مباشرةً في إطار المكوّن للإطار الرئيسي foo.com. على سبيل المثال، قد يؤثر إطار bar.com الرئيسي الذي لا يخضع لعملية المعالجة في عرض إطار iframe في foo.com/other-url، عن طريق تحويل إطار iframe باستخدام CSS أو حجب أجزاء من إطار iframe باستخدام عناصر أخرى في عنصر DOM.

تدفّق تعديلات الموقع المرئي

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

على سبيل المثال، عندما يتغيّر حجم إطار العرض:

مخطّط بياني للعملية الموضّحة في النص السابق

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

شجرة الأجزاء غير القابلة للتغيير

شجرة الأجزاء الثابتة هي الناتج عن مرحلة التنسيق في مسار معالجة التحويل. ويمثّل موضع وحجم جميع العناصر على الصفحة (بدون عمليات التحويل المطبَّقة).

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

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

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

اسمح بأيّ إشارات "إلى أعلى" في الشجرة. (لا يمكن أن يتضمّن العنصر الفرعي مؤشرًا إلى العنصر الرئيسي).
"تجميع" البيانات في أسفل الشجرة (يقرأ العنصر الفرعي المعلومات من العناصر الفرعية فقط، وليس من العنصر الرئيسي)

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

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

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

عناصر مجزّأة مضمّنة

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

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

<div style="width: 0;">
  <span style="color: blue; position: relative;">Hi</span> <b>there</b>.
</div>

تم ضبط السمة width على 0 لكي يلتف السطر بين "مرحبًا" و"هناك".

عندما يتم تمثيل سياق التنسيق المضمّن لهذا الموقف على شكل شجرة، يظهر على النحو التالي:

{
  "Line box": {
    "Box <span>": {
      "Text": "Hi"
    }
  },
  "Line box": {
    "Box <b>": {
      "Text": "There"
    }
  },
  {
    "Text": "."
  }
}

تظهر القائمة البسيطة على النحو التالي:

(مربّع سطر، 2)
(المربع <span>، 1)
(Text "مرحبًا", 0)
(مربّع سطر، 3)
(المربّع <b>، 1)
(Text "there", 0)
(نص "."، 0)

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

يضم المؤشر واجهات برمجة تطبيقات، مثل MoveToNext وMoveToNextLine وCursorForChildren. يُعدّ تمثيل المؤشر هذا مفيدًا جدًا للمحتوى النصي، وذلك لأسباب متعدّدة:

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

أشجار المواقع

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

يظهر ذلك بأربع طرق:

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

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

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

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

يستخدم RenderingNG أشجار المواقع الإلكترونية لعدة أغراض، بما في ذلك:

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

يحتوي كل مستند ويب على أربع أشجار خصائص منفصلة: التحويل والاقتصاص والتأثير والانتقال.(*) تمثّل شجرة التحويل عمليات التحويل والانتقال في CSS. (يتم تمثيل تحويل التمرير كمصفوفة تحويل ثنائي الأبعاد). يمثّل شجرة المقاطع المقاطع الزائدة. تمثّل شجرة التأثيرات جميع التأثيرات المرئية الأخرى: الشفافية والفلاتر والقناعات وأوضاع المزج وأنواع أخرى من المقاطع، مثل clip-path. تمثّل شجرة الانتقال المعلومات المتعلّقة بالانتقال، مثل كيفية تسلسل عمليات الانتقال معًا، وهي مطلوبة لتنفيذ الانتقال في سلسلة المكوّن. تمثّل كلّ عقدة في شجرة الموقع تأثيرًا مركّزًا أو تأثيرًا مرئيًا يطبّقه عنصر DOM. إذا كان له تأثيرات متعدّدة، قد يكون هناك أكثر من عقدة شجرة موقع واحدة في كل شجرة للعنصر نفسه.

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

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

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

مثال

(source)

<html>
  <div style="overflow: scroll; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
  id="one" srcdoc="iframe one"></iframe>
  </div>
  <iframe style="top:200px;
      transform: scale(1.1) translateX(200px)" id=two
      srcdoc="iframe two"></iframe>
</html>

بالنسبة إلى المثال السابق (الذي يختلف قليلاً عن المثال الوارد في المقدّمة)، في ما يلي العناصر الرئيسية لأشجار المواقع التي تم إنشاؤها:

مثال على العناصر المختلفة في شجرة الموقع

عرض القوائم وقطع الرسم

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

على سبيل المثال:

مربّع أزرق يحتوي على عبارة "مرحبًا بالعالم" داخل مستطيل أخضر

<div id="green" style="background:green; width:80px;">
    Hello world
</div>
<div id="blue" style="width:100px;
  height:100px; background:blue;
  position:absolute;
  top:0; left:0; z-index:-1;">
</div>

ينتج عن لغتَي HTML وCSS هذان قائمة العرض التالية، حيث تكون كل خلية عبارة عن عنصر عرض:

خلفية العرض	`#blue` في الخلفية	`#green` في الخلفية	`#green` نص مضمّن
`drawRect` بحجم 800×600 وباللون الأبيض	`drawRect` بحجم 100x100 في الموضع 0,0 واللون الأزرق.	`drawRect` بحجم 80×18 في الموضع 8.8 واللون الأخضر.	`drawTextBlob` في الموضع 8,8 والنص "مرحبًا"

يتم ترتيب قائمة عناصر العرض من البداية. في المثال أعلاه، يظهر العنصر الأخضر قبل العنصر الأزرق بترتيب DOM، ولكن يتطلّب ترتيب الرسم في CSS أن يتم رسم العنصر الأزرق الذي يملك مؤشر z-index سلبيًا قبل (الخطوة 3) العنصر الأخضر (الخطوة 4.1). تتطابق عناصر العرض تقريبًا مع الخطوات الأساسية لمواصفات ترتيب الطلاء في CSS. قد يؤدي عنصر DOM واحد إلى ظهور عدة عناصر عرض، مثلما يحتوي #green على عنصر عرض للخلفية وعنصر عرض آخر للنص المضمّن. هذه الدقة مهمة لتمثيل التعقيد الكامل لمواصفات طلب طلاء CSS، مثل التداخل الذي يحدث بواسطة هامش سالب:

مستطيل أخضر مع مربّع رمادي متراكب جزئيًا عليه وعبارة "مرحبًا بك"

<div id="green" style="background:green; width:80px;">
    Hello world
</div>
<div id="gray" style="width:35px; height:20px;
  background:gray;margin-top:-10px;"></div>

ينتج عن ذلك قائمة العرض التالية، حيث تكون كل خلية هي عنصر عرض:

خلفية العرض	`#green` في الخلفية	`#gray` في الخلفية	`#green` نص مضمّن
`drawRect` بحجم 800×600 وباللون الأبيض	‫`drawRect` بحجم 80×18 في الموضع 8,8 وباللون الأخضر	‫`drawRect` بحجم 35×20 في الموضع 8,16 واللون رمادي	`drawTextBlob` في الموضع 8,8 والنص "مرحبًا"

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

يتم الحفاظ على حالة شجرة الخاصية الحالية أثناء جولة شجرة الطلاء، ويتم تجميع قائمة عناصر العرض في "مجموعات" من عناصر العرض التي تشترك في نفس حالة شجرة الخصائص. يتضح ذلك في المثال التالي:

مربع وردي مع مربع برتقالي مائل.

<div id="scroll" style="background:pink; width:100px;
   height:100px; overflow:scroll;
   position:absolute; top:0; left:0;">
    Hello world
    <div id="orange" style="width:75px; height:200px;
      background:orange; transform:rotateZ(25deg);">
        I'm falling
    </div>
</div>

ينتج عن ذلك قائمة العرض التالية، حيث تكون كل خلية هي عنصر عرض:

خلفية العرض	`#scroll` في الخلفية	`#scroll` نص مضمّن	`#orange` في الخلفية	`#orange` نص مضمّن
`drawRect` بحجم 800×600 وباللون الأبيض	‫`drawRect` بحجم 100×100 في الموضع 0,0 واللون الوردي	`drawTextBlob` بالموضع 0,0 والنص "مرحبًا"	‫`drawRect` بحجم 75×200 في الموضع 0,0 واللون البرتقالي	`drawTextBlob` بالموضع 0.0 والنص "سأسقط".

ستكون عندئذٍ شجرة خاصية التحويل وأجزاء الطلاء (مبسطة للإيجاز):

صورة الجدول السابق، أول خليتين في المقطع 1، والثالثة في المقطع 2، آخر خليتين في المقطع 3.

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

من المفترض أن ينتج عن المثال السابق طبقتين مركبتين:

طبقة مركّبة بدقة 800×600 تحتوي على أوامر الرسم:
1. drawRect بحجم 800×600 واللون الأبيض
2. ‫drawRect بحجم 100×100 في الموضع 0,0 واللون الوردي
طبقة مركّبة مقاس 144×224 تحتوي على أوامر الرسم:
1. drawTextBlob بالموضع 0,0 والنص "مرحبًا بالعالم"
2. ترجمة 0,18
3. rotateZ(25deg)
4. drawRect بحجم 75×200 في الموضع 0,0 واللون البرتقالي
5. ‫drawTextBlob بالموضع 0,0 والنص "أنا أقع"

إذا تحرك المستخدم #scroll، يتم نقل الطبقة المركبة الثانية، ولكن لا يلزم إجراء تحويل إلى صيغة نقطية.

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

خلفية المستند: تمرير المستند، ومقطع المستند، والجذر، وتمرير المستند.
الزاوية الأفقية والعمودية وزاوية التمرير لعنصر div (ثلاثة أجزاء منفصلة للرسم): تمرير المستند، ومقطع المستند، #one التمويه، وتمرير المستند
إطار iframe #one: #one تدوير، مقطع لف غير محدود، تمويه #one، لف div
إطار iframe #two: #two مقياس، مقطع مستند، جذر، انتقال مستند

إطارات أداة الدمج: الأسطح وأسطح العرض وشرائح نسيج وحدة معالجة الرسومات

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

البطاقات

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

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

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

الأشكال الرباعية والأسطح

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

مربّعات زخرفة وحدة معالجة الرسومات

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

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

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

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

بطاقات العرض المتوسط

تتطلّب بعض التأثيرات المرئية، مثل العديد من الفلاتر أو أوضاع الدمج المتقدّمة، dibujando dos o más cuadriláteros en una textura intermedia. بعد ذلك، يتم رسم النسيج الوسيط في ذاكرة تخزين مؤقتة للوجهة على وحدة معالجة الرسومات (أو ربما نسيج وسيط آخر)، ويُطبَّق التأثير المرئي في الوقت نفسه. للسماح بذلك، يحتوي إطار أداة الدمج على قائمة بعمليات التقديم. هناك دائمًا بطاقة عرض جذر، يتم رسمها أخيرًا وتتوافق وجهتها مع المخزن المؤقت للإطارات، وقد يكون هناك المزيد.

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

التجميع

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

مثال

في ما يلي إطارات المُركّب التي تمثّل المثال من بداية هذه المشاركة.

foo.com/index.html surface: id=0
- تمرير العرض 0: الرسم على الإخراج
  - عرض للوحة الرسم رباعية: يمكنك الرسم بتمويه 3 بكسل والاقتصاص ودمج العناصر في تمريرة العرض 0.
    - مرحلة التقديم 1:
      - ارسم مربّعات لمحتوى مربّعات #one iframe، مع مواضع x وy لكل منها.
  - رباعي رسم السطح: بمعرّف 2، مرسوم باستخدام التحويلات الهندسية للتوسيع والترجمة
مساحة واجهة مستخدِم المتصفّح: ID=1
- تمرير العرض 0: اسحب حتى الإخراج.
  - رسم وحدات رباعية لواجهة مستخدم المتصفِّح (متجانب أيضًا)
bar.com/index.html surface: ID=2
- تمرير العرض 0: الرسم على الإخراج
  - ارسم مربّعات لمحتويات إطار iframe في #two، مع تحديد مواضع x وy لكل منها.

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