تمت ترجمة هذه الصفحة بواسطة 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` بحجم 100×100 في الموضع 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

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

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

طبقة مركّبة بدقة 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 cuadrángulos 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 لكل منها.

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