تمت ترجمة هذه الصفحة بواسطة 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:

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

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

الإطار الرئيسي foo.com والإطار الفرعي foo.com/other-page هي جزء من شجرة الإطارات نفسها ويتم عرضها في العملية نفسها. ومع ذلك، لا يزال الإطاران مستقلان مراحل نشاط المستندات نظرًا لكونها جزءًا من أجزاء شجرة اللقطات المحلية المختلفة. لهذا السبب، من المستحيل إنشاء إطار مكوّن واحد لكليهما في تحديث واحد. لا تتضمّن عملية العرض معلومات كافية لتركيب إطار التركيب الذي تم إنشاؤه لـ foo.com/other-page مباشرةً في إطار التركيب للإطار الرئيسي foo.com. على سبيل المثال، قد يؤثر الإطار الرئيسي bar.com خارج المعالجة في عرض إطار iframe foo.com/other-url، عن طريق تحويل إطار iframe باستخدام CSS أو إتلاف أجزاء منه بعناصر أخرى في 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)
(أريد إرسال "مرحبًا"، 0)
(مربّع السطر، 3)
(المربع <b>، 1)
(النص "هناك"، 0)
(نص "."، 0)

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

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

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

أشجار الممتلكات

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

يظهر هذا بأربع طرق:

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

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

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

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

يستخدم RenderingNG أشجار الملكية لأغراض عديدة، من بينها:

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

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

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

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

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

مثال

(المصدر)

<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 والنص "مرحبًا بالعالم".

يتم ترتيب قائمة عناصر العرض من البداية. في المثال أعلاه، يقع عنصر div الأخضر قبل علامة div الزرقاء في ترتيب DOM، ولكن ترتيب طلاء CSS يتطلب طلاء رمز div الأزرق السالب لفهرس z قبل (الخطوة 3) عنصر div الأخضر (الخطوة 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 ما يجب رسمه. (لاحظ أن رباعيات رسم السطح تحتوي على معرّفات الأسطح فقط، وليس زخارف).

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

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

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

التجميع

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

مثال

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

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

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