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

يعمل الموقع المرئي على تعديل العرض الإعلاني بدون انقطاع.

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

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

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

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

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

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

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

يمثل كل جزء جزءًا من عنصر 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
تجنُّب استخدام العناصر خارج الشاشة ومربّعات زخرفة وحدة معالجة الرسومات
إلغاء صلاحية الطلاء والنقطة النقطية بكفاءة ودقة.
قياس متغيّرات التصميم وسرعة عرض أكبر محتوى مرئي في "مؤشرات أداء الويب الأساسية"

يحتوي كل مستند ويب على أربع أشجار خصائص منفصلة: التحويل والمقطع والتأثير والتمرير.(*) تمثل شجرة التحويل عمليات تحويل 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، مرسوم بمقياس وترجمة التحويل.
سطح واجهة مستخدم المتصفّح: ID=1
- اجتياز العرض 0: اسحب إلى الناتج.
  - رسم وحدات رباعية لواجهة مستخدم المتصفِّح (متجانب أيضًا)
مساحة عرض "bar.com/index.html": رقم التعريف=2
- اجتياز العرض 0: اسحب إلى الناتج.
  - ارسم أرباعًا لمحتويات إطار iframe في #two، مع وضع موضعَي x وy لكل منهما.

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