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

هياكل البيانات الرئيسية وأدوارها في RenderingNG

Chris Harrelson

Daniel Cheng

Philip Rogers

Koji Ishi

Ian Kilpatrick

Kyle Charbonneau

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

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

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

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

<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، وذلك من خلال تحويله باستخدام CSS أو استبعاد أجزاء من إطار iframe من خلال عناصر أخرى في DOM الخاص به.

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

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

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

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

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

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

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

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

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

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

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

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

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

عناصر التجزئة المضمّنة

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

وكملاحظة تاريخية مثيرة للاهتمام، يشبه ذلك إلى حدٍّ كبير الطريقة التي يتّبعها Internet Explorer في تمثيل نموذج العناصر في المستند (DOM)، إذ تم إنشاؤه في البداية بطريقة مشابهة لمحرِّر النصوص.

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

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

(يُرجى العلم أنّه تم ضبط السمة width على 0 بحيث يلتف الخط بين "Hi" و "هناك".) عندما يتم تمثيل سياق التنسيق المضمّن لهذا الموقف كشجرة، يبدو على النحو التالي:

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

تبدو هذه القائمة الثابتة على النحو التالي:

(مربّع السطر، 2)
(مربع <span>، 1)
(أرسل كلمة "مرحبًا" 0)
(مربّع السطر، 3)
(المربّع <b>، 1)
(أرسل رسالة نصية إلى "هناك" 0)
(النص ".", 0)

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

يتضمّن المؤشر واجهات برمجة تطبيقات، مثل 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>

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

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

ملاحظة: هناك العديد من التعقيدات الأخرى التي حذفتُها من هذا الرسم البياني، مثل العُقد التي تمثّل إطار العرض المرئي والعُقد المستخدَمة في تحسينات الأداء الداخلي للمحرّك، مثل إزاحة الرسم وعزله. بالإضافة إلى ذلك، لا يشير هذا الرسم البياني إلى الروابط بين الأشجار. على سبيل المثال، يتم تطبيق التمويه 3 بكسل في مساحة تحويل #one rotate.

عرض القوائم وأجزاء الطلاء

يحتوي عنصر العرض على أوامر رسم منخفضة المستوى (يُرجى الاطّلاع هنا) يمكن تحويلها إلى نقطية باستخدام 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` بحجم 800x600 ولون أبيض.	`drawRect` بحجم 100x100 في الموضع 0,0 ولونه أزرق	`drawRect` بمقاس 80x18 في الموضع 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` بحجم 800x600 ولون أبيض.	`drawRect` بمقاس 80x18 في الموضع 8,8 ولونه أخضر.	`drawRect` بحجم 35x20 في الموضع 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` بحجم 800x600 ولون أبيض.	`drawRect` بحجم 100x100 في الموضع 0,0 ولون وردي.	`drawTextBlob` مع الموضع 0,0 والنص "مرحبًا بالعالم".	`drawRect` بحجم 75x200 في الموضع 0,0 واللون برتقالي.	`drawTextBlob` مع الموضع 0,0 والنص "أنا أسقط".

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

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

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

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

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

إذا قام المستخدم بالتمرير #scroll، فسيتم نقل الطبقة المركّبة الثانية، ولكن لن تكون هناك حاجة إلى البكسلة.

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

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

إطارات التركيب: الأسطح وأسطح العرض ومربّعات زخرفة وحدة معالجة الرسومات

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

الشاشات

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

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

أربعة أقسام:

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

المساحات الرباعية والأسطح

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

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

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

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

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

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

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

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

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

التجميع

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

مثال

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

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

الخلاصة

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

رسومات "أونا كرافيتس"