इस पेज का अनुवाद Cloud Translation API से किया गया है.

ReportingNG में मुख्य डेटा स्ट्रक्चर

Chris Harrelson

Daniel Cheng

Philip Rogers

Koji Ishi

Ian Kilpatrick

Kyle Charbonneau

आइए, मुख्य डेटा स्ट्रक्चर पर नज़र डालते हैं. यह रेंडरिंग पाइपलाइन.

ये डेटा स्ट्रक्चर इस तरह हैं:

फ़्रेम ट्री लोकल और रिमोट नोड से मिलकर बने होते हैं. ये नोड, किस वेब पेज को दिखाते हैं दस्तावेज़ किस इमेज को रेंडर करने की प्रक्रिया में होते हैं और कौनसा ब्लिंक रेंडरर होता है.
नहीं बदला जा सकने वाला फ़्रैगमेंट ट्री, लेआउट कंस्ट्रेंट एल्गोरिदम.
प्रॉपर्टी ट्री में बदलाव, क्लिप, इफ़ेक्ट, और स्क्रोल की हैरारकी दिखती है एक वेब दस्तावेज़ होता है. इनका इस्तेमाल, पूरी पाइपलाइन में किया जाता है.
डिसप्ले लिस्ट और पेंट के हिस्से, रास्टर और लेयराइज़ेशन एल्गोरिदम के इनपुट हैं.
कंपोज़िटर फ़्रेम, सरफ़ेस, रेंडर सरफ़ेस, और जीपीयू टेक्सचर को एनकैप्सुलेट करते हैं टाइल, जिन्हें जीपीयू का इस्तेमाल करके ड्रॉ करने के लिए इस्तेमाल किया जाता है.

इन डेटा स्ट्रक्चर के बारे में जानने से पहले, नीचे दिया गया उदाहरण आर्किटेक्चर की समीक्षा वाले पेज पर जाएं. यह इस पूरे दस्तावेज़ में उदाहरण के साथ इस्तेमाल किया गया है. साथ ही, यह भी बताया गया है कि वह डेटा उस पर लागू होती हैं.

<!-- 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 इस वेब पेज को रेंडर करने के लिए दो प्रोसेस का इस्तेमाल करता है. उस वेब पेज के लिए, रेंडर करने की हर प्रोसेस में फ़्रेम ट्री को अपने अलग तरीके से दिखाया जाता है:

दो फ़्रेम ट्री, जो रेंडर करने की दो प्रोसेस को दिखा रहे हैं.

किसी अलग प्रोसेस में रेंडर होने वाले फ़्रेम को रिमोट फ़्रेम के तौर पर दिखाया जाता है. रिमोट फ़्रेम में वह कम से कम जानकारी होती है जो रेंडरिंग में प्लेसहोल्डर के तौर पर काम करने के लिए ज़रूरी है. जैसे कि इसके डाइमेंशन. रिमोट फ़्रेम में ऐसी कोई जानकारी मौजूद नहीं होती जो इसकी असल कॉन्टेंट को रेंडर करने के लिए ज़रूरी हो.

इसके उलट, लोकल फ़्रेम एक ऐसा फ़्रेम दिखाता है जो स्टैंडर्ड मोड से गुज़रता है रेंडरिंग पाइपलाइन. लोकल फ़्रेम में वह पूरी जानकारी होती है जिसे उस फ़्रेम के लिए डेटा (जैसे कि डीओएम ट्री और स्टाइल डेटा) को जिन्हें रेंडर करके दिखाया जा सकता है.

रेंडरिंग पाइपलाइन, डेटा के लेवल के हिसाब से काम करती है लोकल फ़्रेम ट्री फ़्रैगमेंट. 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 पैरंट फ़्रेम की वजह से foo.com/other-url iframe के दिखने पर असर पड़े, iframe को CSS से बदलकर या iframe के कुछ हिस्सों को उसके DOM में अन्य एलिमेंट से छिपाकर.

विज़ुअल प्रॉपर्टी अपडेट करने वाला वॉटरफ़ॉल

विज़ुअल प्रॉपर्टी, जैसे कि डिवाइस का स्केल फ़ैक्टर और व्यूपोर्ट का साइज़, रेंडर किए गए आउटपुट पर असर डालता है और इसे लोकल फ़्रेम ट्री फ़्रैगमेंट के बीच सिंक किया जाना चाहिए. हर लोकल फ़्रेम ट्री फ़्रैगमेंट के रूट में एक विजेट ऑब्जेक्ट होता है. विज़ुअल प्रॉपर्टी के अपडेट लागू होने से पहले, मुख्य फ़्रेम के विजेट पर जाते हैं तक शॉर्टकट बना सकते हैं.

उदाहरण के लिए, जब व्यूपोर्ट का साइज़ बदलता है:

पिछले टेक्स्ट में बताई गई प्रोसेस का डायग्राम.

यह प्रोसेस तुरंत नहीं होती, इसलिए, डुप्लीकेट विज़ुअल प्रॉपर्टी में सिंक टोकन भी शामिल होता है. Viz कंपोज़िटर सभी लोकल फ़्रेम ट्री फ़्रैगमेंट का इंतज़ार करने के लिए इस सिंक टोकन का इस्तेमाल करता है ताकि कंपोज़िटर फ़्रेम को मौजूदा सिंक टोकन के साथ सबमिट किया जा सके. इस प्रोसेस में, कंपोज़िटर फ़्रेम को अलग-अलग विज़ुअल प्रॉपर्टी के साथ मिक्स करने से बचा जाता है.

नहीं बदला जा सकने वाला फ़्रैगमेंट ट्री

नहीं बदला जा सकने वाला फ़्रैगमेंट ट्री, रेंडरिंग के लेआउट स्टेज का आउटपुट होता है पाइपलाइन. यह पेज पर मौजूद सभी एलिमेंट की पोज़िशन और साइज़ के बारे में बताता है (बदलाव लागू किए बिना).

हर ट्री में फ़्रैगमेंट को दिखाना, जिसमें एक फ़्रैगमेंट को 'ज़रूरत के मुताबिक लेआउट' के तौर पर मार्क किया गया है.

हर फ़्रैगमेंट, डीओएम एलिमेंट का एक हिस्सा दिखाता है. आम तौर पर, हर एलिमेंट में सिर्फ़ एक फ़्रैगमेंट होता है, लेकिन प्रिंट करते समय इसे अलग-अलग पेजों में बांट देने से कई काम भी हो सकते हैं, या कॉलम चुनें.

लेआउट के बाद, हर फ़्रैगमेंट में बदलाव नहीं किया जा सकता और उसे फिर से कभी नहीं बदला जाता. अहम बात, हम कुछ अन्य पाबंदियां भी लगाते हैं. हम ये काम नहीं करते हैं:

किसी भी "ऊपर" की अनुमति दें ट्री में संदर्भ. (बच्चे अपने पैरंट के लिए पॉइंटर नहीं रख सकते.)
"बबल" लगातार डेटा (कोई बच्चा सिर्फ़ अपने बच्चों की जानकारी पढ़ता है, अपने माता-पिता की नहीं).

इन पाबंदियों की मदद से, हम बाद के लेआउट के लिए फ़्रैगमेंट का फिर से इस्तेमाल कर पाते हैं. इन पाबंदियों के बिना, हमें अक्सर पूरे पेड़ को फिर से जनरेट करना पड़ता. हालांकि, यह महंगा है.

ज़्यादातर लेआउट, आम तौर पर थोड़े समय के लिए होने वाले अपडेट होते हैं. उदाहरण के लिए, एक वेब ऐप्लिकेशन, जो उपयोगकर्ता के किसी एलिमेंट पर क्लिक करने के जवाब में यूज़र इंटरफ़ेस (यूआई) के छोटे हिस्से को अपडेट करता है. आम तौर पर, लेआउट को स्क्रीन पर असल में हुए बदलावों के हिसाब से ही काम करना चाहिए. ऐसा करने के लिए, हम पिछले ट्री के ज़्यादा से ज़्यादा हिस्सों का फिर से इस्तेमाल कर सकते हैं. इसका मतलब है कि (आम तौर पर) हमें सिर्फ़ पेड़ के स्पाइन को फिर से बनाने की ज़रूरत होती है.

आने वाले समय में, इस अनोखे डिज़ाइन की मदद से, हम दिलचस्प चीज़ें कर सकते हैं जैसे, अगर ज़रूरी हो, तो थ्रेड की सीमाओं के बीच में न बदले जा सकने वाले फ़्रैगमेंट ट्री को पास करना (किसी दूसरी थ्रेड पर बाद के चरण पूरे करने के लिए), बिना किसी रुकावट के लेआउट ऐनिमेशन के लिए कई ट्री जनरेट करें. या साथ-साथ अनुमान वाले लेआउट करते हैं. इससे हमें मल्टी-थ्रेडिंग लेआउट की सुविधा भी मिलती है.

इनलाइन फ़्रैगमेंट आइटम

इनलाइन कॉन्टेंट (मुख्य तौर पर स्टाइल किया गया टेक्स्ट) में थोड़े अलग तरीके का इस्तेमाल किया जाता है. बॉक्स और पॉइंटर वाली ट्री स्ट्रक्चर के बजाय, हम ट्री को दिखाने वाली फ़्लैट सूची में इनलाइन कॉन्टेंट को दिखाते हैं. इसका मुख्य फ़ायदा यह है कि इनलाइन के लिए एक फ़्लैट सूची का इस्तेमाल तेज़ी से किया जा सकता है, इनलाइन डेटा-स्ट्रक्चर की जांच या क्वेरी करने के लिए इस्तेमाल किए जा सकते हैं. और मेमोरी की बचत होती है. यह वेब रेंडरिंग की परफ़ॉर्मेंस, क्योंकि टेक्स्ट को रेंडर करना बहुत जटिल है. और बहुत ज़्यादा ऑप्टिमाइज़ न किए जाने तक, पाइपलाइन का सबसे धीमा हिस्सा बन सकता है.

हर एक के लिए एक फ़्लैट सूची बनाई जाती है इनलाइन फ़ॉर्मैट के लिए कॉन्टेक्स्ट ताकि इनलाइन लेआउट सबट्री को गहराई से खोजा जा सके. सूची की हर एंट्री (ऑब्जेक्ट, डिसेंडेंट की संख्या) का ट्यूपल होती है. उदाहरण के लिए, इस 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)
(टेक्स्ट "there", 0)
(टेक्स्ट ".", 0)

इस डेटा स्ट्रक्चर का इस्तेमाल कई लोग करते हैं: Accessibility API, और ज्यामिति एपीआई, जैसे कि getClientRects और contenteditable. हर सुविधा की ज़रूरी शर्तें अलग-अलग होती हैं. ये कॉम्पोनेंट सुविधा कर्सर के ज़रिए फ़्लैट डेटा स्ट्रक्चर को ऐक्सेस करते हैं.

कर्सर में एपीआई मौजूद हैं, जैसे कि MoveToNext, MoveToNextLine, CursorForChildren. यह कर्सर, टेक्स्ट कॉन्टेंट के लिए बहुत असरदार होता है. इसकी कई वजहें हैं:

गहराई के पहले खोज क्रम में इटरेट करना बहुत तेज़ है. इसका इस्तेमाल अक्सर किया जाता है, क्योंकि यह कैरेट (कैरेट) को मूव करने जैसा ही होता है. यह फ़्लैट सूची है, इसलिए डेप्थ-फ़र्स्ट सर्च (गहराई से पहले की जाने वाली खोज) में सिर्फ़ अरे ऑफ़सेट को बढ़ाया जाता है, तेज़ी से दोहराने और मेमोरी स्थान उपलब्ध कराने के लिए कर सकते हैं.
यह वाइड-फ़र्स्ट सर्च की सुविधा देता है, जो तब ज़रूरी होता है, जब, उदाहरण के लिए, लाइन और इनलाइन बॉक्स के बैकग्राउंड को पेंट करते हुए.
डिसेंडेंट की संख्या जानने से, अपने अगले सिबलिंग पर तेज़ी से पहुंचा जा सकता है (बस अरे ऑफ़सेट को उस संख्या से बढ़ाएं).

प्रॉपर्टी ट्री

डीओएम, एलिमेंट का एक ट्री (साथ ही टेक्स्ट नोड) होता है. साथ ही, सीएसएस कई तरह के स्टाइल को एलिमेंट में बदल दिया जाता है.

यह चार तरीकों से दिखता है:

लेआउट: लेआउट कंस्ट्रेंट एल्गोरिदम के इनपुट.
पेंट: एलिमेंट को पेंट करने और रास्टर करने का तरीका (लेकिन इसके डिसेंडेंट नहीं).
विज़ुअल: डीओएम सबट्री पर लागू किए गए रास्टर/ड्रॉ इफ़ेक्ट, जैसे कि ट्रांसफ़ॉर्म, फ़िल्टर, और क्लिपिंग.
स्क्रोल करना: ऐक्सिस की अलाइन और गोल वाला कोना इसमें शामिल सबट्री को क्लिप करने और स्क्रोल करने के लिए इस्तेमाल किया जाता है.

प्रॉपर्टी ट्री ऐसे डेटा स्ट्रक्चर हैं जो बताते हैं कि विज़ुअल और स्क्रोलिंग इफ़ेक्ट, डीओएम एलिमेंट पर कैसे लागू होते हैं. इसकी मदद से, कई तरह के सवालों के जवाब दिए जा सकते हैं. जैसे: कहां, दिया गया DOM एलिमेंट दिया गया होता है. इसके लेआउट का साइज़ और पोज़िशन क्या है? साथ ही: विज़ुअल और स्क्रोलिंग इफ़ेक्ट लागू करने के लिए, जीपीयू ऐक्शन के किस क्रम का इस्तेमाल होना चाहिए?

वेब पर विज़ुअल और स्क्रोल करने वाले इफ़ेक्ट को इस्तेमाल करना बहुत ही मुश्किल है. इसलिए, प्रॉपर्टी ट्री की सबसे ज़रूरी चीज़ यह है कि सिंगल डेटा स्ट्रक्चर का इस्तेमाल करेंगे, जो उनके स्ट्रक्चर और मतलब को सटीक तौर पर दिखाएगा. साथ ही, डीओएम और सीएसएस की बाकी जटिलता को भी हटाएं. इससे हमें कंपोज़िटिंग और स्क्रोलिंग के एल्गोरिदम को ज़्यादा भरोसे के साथ लागू करने में मदद मिलती है. खास तौर पर:

संभावित तौर पर गड़बड़ी वाली ज्यामिति और अन्य कैलकुलेशन उन्हें एक ही जगह पर ऐक्सेस किया जा सकता है.
प्रॉपर्टी ट्री को बनाने और अपडेट करने से जुड़ी जटिलता को रेंडर करने वाले एक पाइपलाइन स्टेज में अलग किया गया है.
प्रॉपर्टी ट्री को अलग-अलग थ्रेड और प्रोसेस पर भेजना, फ़ुल डीओएम स्टेट की तुलना में ज़्यादा आसान और तेज़ है, इससे उन्हें कई कामों में इस्तेमाल किया जा सकता है.
इस्तेमाल के जितने ज़्यादा उदाहरण होंगे, ऊपर मौजूद ज्यामिति कैश मेमोरी में से, हमें जितनी ज़्यादा सुविधाएं मिलेंगी, क्योंकि वे एक-दूसरे के दस्तावेज़ों का कैश मेमोरी में सेव करता है.

रेमिविंगएन, कई कामों के लिए प्रॉपर्टी ट्री का इस्तेमाल करता है, जिनमें ये शामिल हैं:

पेंट से कंपोज़िटिंग, और मुख्य थ्रेड से कंपोज़िटिंग अलग-अलग की जा रही है.
एक बेहतर कंपोज़िटिंग / ड्रॉ रणनीति तय करना.
मेज़र करना IntersectionObserver ज्यामिति शामिल करें.
ऑफ़स्क्रीन एलिमेंट और जीपीयू टेक्सचर टाइल के लिए, काम से बचने का तरीका.
पेंट और रास्टर को कुशलता से और सही तरीके से अमान्य किया जा रहा हो.
मेज़र करना लेआउट शिफ़्ट और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय.

हर वेब दस्तावेज़ में चार अलग-अलग प्रॉपर्टी ट्री होते हैं: ट्रांसफ़ॉर्म, क्लिप, इफ़ेक्ट, और स्क्रोल.(*) ट्रांसफ़ॉर्म ट्री, सीएसएस ट्रांसफ़ॉर्म और स्क्रोलिंग को दिखाता है. (स्क्रोल ट्रांसफ़ॉर्म को 2D ट्रांसफ़ॉर्म मैट्रिक्स के तौर पर दिखाया जाता है.) क्लिप ट्री ओवरफ़्लो क्लिप. इफ़ेक्ट ट्री अन्य सभी विज़ुअल इफ़ेक्ट को दिखाता है: ओपैसिटी, फ़िल्टर, मास्क, ब्लेंड मोड, और अन्य प्रकार के क्लिप जैसे क्लिप-पाथ. स्क्रोल ट्री में स्क्रोल करके, जैसे कि स्क्रोल करने का तरीक़ा एक साथ चेन बना सकते हैं; कंपोज़िटर थ्रेड पर स्क्रोल करने के लिए इसकी ज़रूरत होती है. प्रॉपर्टी ट्री का हर नोड, DOM एलिमेंट के ज़रिए लागू किए गए स्क्रोल या विज़ुअल इफ़ेक्ट को दिखाता है. अगर कई चीज़ों के असर होने पर, एक ही एलिमेंट के लिए, हर ट्री में एक से ज़्यादा प्रॉपर्टी ट्री नोड हो सकते हैं.

हर ट्री की टोपोलॉजी, डीओएम की खास जानकारी की तरह है. उदाहरण के लिए, अगर ओवरफ़्लो क्लिप वाले तीन डीओएम एलिमेंट हैं, तो तीन क्लिप ट्री नोड होंगे, और क्लिप ट्री की बनावट ओवरफ़्लो क्लिप के बीच ब्लॉक संबंध. पेड़ों के बीच में लिंक भी होते हैं. ये लिंक रिलेटिव डीओएम हैरारकी को दिखाते हैं, और इसलिए, नोड के लागू होने का क्रम. उदाहरण के लिए, अगर डीओएम एलिमेंट पर ट्रांसफ़ॉर्मेशन, फ़िल्टर वाले दूसरे डीओएम एलिमेंट के नीचे है, तो फ़िल्टर से पहले ट्रांसफ़ॉर्म ऐक्शन लागू होता है.

हर डीओएम एलिमेंट में एक प्रॉपर्टी ट्री स्टेट होती है, जो 4-ट्यूपल है (ट्रांसफ़ॉर्म, क्लिप, इफ़ेक्ट, स्क्रोल) जो सबसे नज़दीकी एंसेस्टर क्लिप के बारे में बताता है, ट्रांसफ़ॉर्म और उस एलिमेंट पर लागू होने वाले ट्री नोड को प्रभावित कर सकता है. यह बहुत सुविधाजनक है, क्योंकि इस जानकारी से हमें क्लिप की पूरी सूची, उनमें बदलाव करने, और उन पर लागू होने वाले इफ़ेक्ट और किस क्रम में है. इससे हमें यह पता चलता है कि वह स्क्रीन पर कहां है और उसे कैसे बनाया जा सकता है.

ध्यान दें: (*) यहां चार पेड़ हैं, क्योंकि स्क्रोल करने की सुविधा सिर्फ़ शामिल सबट्री पर लागू होती है. स्क्रोलर में किसी एलिमेंट को तब शामिल किया जाता है, जब वह उससे स्क्रोल करता है, और position:absolute और position: fixed एलिमेंट, अक्सर पहले से स्क्रोल करने वाले एलिमेंट से बचते हैं, उन मामलों में जहां स्क्रोल करने वाला एलिमेंट, शामिल ब्लॉक चेन में नहीं होता है (किसी 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. डिसप्ले आइटम आम तौर पर आसान होते हैं. इनमें ड्रॉइंग करने के लिए कुछ निर्देश दिए जाते हैं, जैसे कि बॉर्डर या बैकग्राउंड बनाना. पेंट ट्री, लेआउट ट्री और सीएसएस पेंटिंग ऑर्डर के बाद उससे जुड़े फ़्रैगमेंट के ऊपर फिर से चलता है ताकि डिसप्ले आइटम की सूची बनाई जा सके.

उदाहरण के लिए:

नीले रंग का बॉक्स, जिस पर 'नमस्ते दुनिया' लिखा है एक हरा आयत है.

<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>

यह एचटीएमएल और सीएसएस नीचे दी गई डिसप्ले सूची बनाएगा, जहां हर सेल एक डिसप्ले आइटम है:

व्यू का बैकग्राउंड	`#blue` बैकग्राउंड	`#green` बैकग्राउंड	`#green` इनलाइन टेक्स्ट
`drawRect`, जिसका साइज़ 800x600 है और जो सफ़ेद रंग का है.	`drawRect` की पोज़िशन 0,0 है और इसका साइज़ 100x100 है. इसका रंग नीला है.	`drawRect`, जिसका साइज़ 80x18 है, जिसकी पोज़िशन 8,8 है और रंग हरा है.	`drawTextBlob` की पोज़िशन 8,8 है और टेक्स्ट "नमस्ते वर्ल्ड" टेक्स्ट है.

डिसप्ले आइटम की सूची को आगे के क्रम में रखा गया है. ऊपर दिए गए उदाहरण में, हरे रंग का div DOM क्रम में नीले div से पहले है, लेकिन सीएसएस पेंट ऑर्डर के लिए ज़रूरी है कि नेगेटिव z-इंडेक्स नीला div पेंट हो हरे रंग के div के पहले (चरण 3) (चरण 4.1). डिसप्ले आइटम मोटे तौर पर सीएसएस पेंट ऑर्डर स्पेसिफ़िकेशन के ऐटॉमिक स्टेप से मेल खाते हैं. एक डीओएम एलिमेंट से कई डिसप्ले आइटम बन सकते हैं, जैसे कि कैसे #green में बैकग्राउंड के लिए एक डिसप्ले आइटम और इनलाइन टेक्स्ट के लिए दूसरा डिसप्ले आइटम है. सीएसएस पेंट ऑर्डर स्पेसिफ़िकेशन की पूरी जटिलता को दिखाने के लिए, जानकारी का यह स्तर ज़रूरी है, जैसे कि नेगेटिव मार्जिन से बनाया गया इंटरलीविंग:

हरे रंग का आयत, जिसके कुछ हिस्से पर स्लेटी रंग का बॉक्स लगा है और बॉक्स में 'नमस्ते वर्ल्ड' लिखा है.

<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 है और रंग हरा है.	8,16 पोज़िशन पर, 35x20 साइज़ वाला `drawRect` और स्लेटी रंग.	`drawTextBlob` की पोज़िशन 8,8 है और टेक्स्ट "नमस्ते वर्ल्ड" टेक्स्ट है.

डिसप्ले आइटम सूची को सेव किया जाता है और बाद के अपडेट के ज़रिए फिर से इस्तेमाल किया जाता है. अगर पेंट ट्री के चलने के दौरान लेआउट ऑब्जेक्ट में कोई बदलाव नहीं हुआ, इसके डिसप्ले आइटम पिछली सूची से कॉपी किए गए हैं. अतिरिक्त ऑप्टिमाइज़ेशन, सीएसएस पेंट ऑर्डर स्पेसिफ़िकेशन की प्रॉपर्टी पर निर्भर करता है: अलग-अलग कॉन्टेक्स्ट प्रोसेसर का इस्तेमाल करें. अगर स्टैकिंग कॉन्टेक्स्ट में कोई लेआउट ऑब्जेक्ट नहीं बदला गया है, तो पेंट ट्री की वॉकिंग, स्टैकिंग के संदर्भ को छोड़कर आगे बढ़ती है और पिछली सूची से प्रदर्शन आइटम के पूरे क्रम को कॉपी करता है.

पेंट ट्री की वॉक के दौरान, प्रॉपर्टी ट्री की मौजूदा स्थिति को बनाए रखा जाता है और डिसप्ले आइटम की सूची "ग्रुप" में ग्रुप की जाती है की प्रॉपर्टी एक जैसी होती है. यह नीचे दिए गए उदाहरण में दिखाया गया है:

गुलाबी रंग का बॉक्स, जिसमें नारंगी रंग का बॉक्स झुका हुआ है.

<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 में दिखाया गया है.

पेंट के टुकड़ों की क्रम वाली सूची, इसमें डिसप्ले आइटम और प्रॉपर्टी ट्री की स्थिति के ग्रुप होते हैं. रेंडरिंग पाइपलाइन के लेयराइज़ चरण के इनपुट हैं. पेंट के हिस्सों की पूरी सूची को एक कंपोज़िट की गई लेयर में मर्ज किया जा सकता है और रास्टराइज़ किया जा सकता है. हालांकि, हर बार उपयोगकर्ता स्क्रोल करने पर महंगे रास्टराइज़ेशन की ज़रूरत पड़ती है. पेंट के हर हिस्से के लिए एक कंपोज़िट लेयर बनाई जा सकती है और री-रास्टराइज़ेशन से बचने के लिए, अलग-अलग रास्टराइज़ किया जाता है. हालांकि, इससे जीपीयू मेमोरी जल्दी खत्म हो जाती है. लेयर बनाने के चरण में, जीपीयू मेमोरी के बीच संतुलन बनाना पड़ता है और चीज़ें बदलने पर लागत कम होती है. डिफ़ॉल्ट रूप से डेटा को कई हिस्सों में मर्ज करना, एक अच्छा सामान्य तरीका है. साथ ही, पेंट के ऐसे हिस्सों को मर्ज न करें जिनमें प्रॉपर्टी ट्री की स्थितियां हों, लेकिन कंपोज़िटर थ्रेड पर इनके बदलाव होने की उम्मीद होती है. जैसे, कंपोज़िटर-थ्रेड स्क्रोलिंग या कंपोज़िटर-थ्रेड ट्रांसफ़ॉर्म ऐनिमेशन के साथ.

ऊपर दिए गए उदाहरण में, दो कंपोज़िट लेयर बनाई जानी चाहिए:

ड्रॉइंग कमांड के साथ एक 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 प्रोसेस में सबमिट करें. कंपोज़िटर फ़्रेम से यह पता चलता है कि रास्टराइज़ किए गए कॉन्टेंट को एक साथ कैसे जोड़ा जाए और जीपीयू का इस्तेमाल करके, असरदार तरीके से ड्रॉ करें.

टाइल

सैद्धांतिक तौर पर, तो रेंडर प्रोसेस या ब्राउज़र प्रोसेस कंपोज़िटर पिक्सल को अडजस्ट कर सकता है एक टेक्स्चर में बदल जाएं और उस टेक्सचर को Viz पर सबमिट कर दें. इसे दिखाने के लिए, डिसप्ले कंपोज़िटर को सिर्फ़ पिक्सल कॉपी करना होगा उस सिंगल टेक्सचर से फ़्रेम बफ़र में सही जगह पर आएँ (उदाहरण के लिए, स्क्रीन). हालांकि, अगर वह कंपोज़िटर डिफ़ॉल्ट रूप से एक पिक्सल की ज़रूरत होगी, तो पूरे व्यूपोर्ट को फिर से रास्टराइज़ करना होगा और Viz पर नया टेक्सचर सबमिट करना होगा.

इसके बजाय, व्यूपोर्ट को टाइल में बांट दिया गया है. अलग जीपीयू टेक्सचर टाइल, हर टाइल को व्यूपोर्ट के हिस्से के लिए रास्टराइज़ किए गए पिक्सल के साथ बैक करती है. इसके बाद, रेंडरर अलग-अलग टाइल को अपडेट कर सकता है या बस स्क्रीन पर मौजूदा टाइल की जगह बदलें. उदाहरण के लिए, किसी वेबसाइट को स्क्रोल करते समय, मौजूदा टाइल की पोज़िशन ऊपर होती है और कभी-कभी पेज में नीचे मौजूद कॉन्टेंट के लिए, नई टाइल को रास्टराइज़ करना होगा.

चार टाइल. — इस इमेज में, चार टाइल के साथ खिली धूप वाले दिन की इमेज दिखाई गई है. जब स्क्रोल किया जाता है, तब पांचवीं टाइल दिखती है. इनमें से एक टाइल में सिर्फ़ एक ही रंग (आसमान नीला) होता है, और सबसे ऊपर एक वीडियो और iframe मौजूद है.

क्वाड और सर्फ़ेस

जीपीयू टेक्सचर टाइल खास तरह के क्वाड होती हैं, जो टेक्सचर की किसी एक कैटगरी के लिए बस एक फ़ैंसी नाम है. क्वाड, इनपुट टेक्सचर की पहचान करता है. साथ ही, इसमें विज़ुअल इफ़ेक्ट को बदलने और लागू करने का तरीका भी बताता है. उदाहरण के लिए, कॉन्टेंट की सामान्य टाइल में एक ट्रांसफ़ॉर्म होता है. इससे टाइल ग्रिड में उनके x और y की पोज़िशन को पता चलता है.

जीपीयू टेक्सचर टाइल.

इन रास्टराइज़ की गई टाइल को रेंडर पास में रैप किया जाता है, जो क्वाड की सूची होती है. रेंडर पास में, पिक्सल की कोई जानकारी नहीं होती है; इसके बजाय, इसमें हर क्वाड को कहां और कैसे ड्रॉ करना है, इसके निर्देश दिए गए हैं. इससे, मनचाहे पिक्सल आउटपुट तैयार किए जा सकते हैं. हर जीपीयू टेक्सचर टाइल के लिए, ड्रॉ क्वाड होता है. डिसप्ले कंपोज़िटर को बस क्वाड की सूची के ज़रिए, बार-बार उन्हें खास विज़ुअल इफ़ेक्ट के साथ ड्रॉ करना, का इस्तेमाल करें. रेंडर पास के लिए ड्रॉ क्वाड कंपोज़िटिंग जीपीयू पर बेहतर तरीके से किए जा सकते हैं, क्योंकि अनुमति वाले विज़ुअल इफ़ेक्ट को बड़ी सावधानी से चुना जाता है, ताकि वे सीधे जीपीयू सुविधाओं से मैप हों.

रास्टराइज़ की गई टाइल के अलावा, कई तरह के ड्रॉ क्वाड भी होते हैं. उदाहरण के लिए, सॉलिड कलर ड्रॉ क्वाड ऐसे होते हैं जो किसी टेक्सचर का इस्तेमाल नहीं करते, या वीडियो या कैनवस जैसे बिना टाइल वाले टेक्सचर के लिए, टेक्सचर ड्रॉ क्वाड का इस्तेमाल करें.

एक कंपोज़िटर फ़्रेम के लिए, एक और कंपोज़िटर फ़्रेम एम्बेड करना भी मुमकिन है. उदाहरण के लिए, ब्राउज़र कंपोज़िटर, ब्राउज़र यूज़र इंटरफ़ेस (यूआई) के साथ कंपोज़िटर फ़्रेम बनाता है, और एक खाली रेक्टैंगल, जहां रेंडर कंपोज़िटर का कॉन्टेंट एम्बेड किया जाएगा. इसका एक और उदाहरण है साइट आइसोलेटेड iframe. यह एम्बेड करने की प्रोसेस प्लैटफ़ॉर्म से पूरी की जाती है.

जब कोई कंपोज़िटर एक कंपोज़िटर फ़्रेम सबमिट करता है, तो उसके साथ एक आइडेंटिफ़ायर भी दिया जाता है. इसे सर्फ़ेस आईडी कहते हैं. इसकी मदद से, दूसरे कंपोज़िटर फ़्रेम को रेफ़रंस के तौर पर एम्बेड किया जा सकता है. किसी खास सरफ़ेस आईडी के साथ सबमिट किए गए नए कंपोज़िटर फ़्रेम को Viz स्टोर करता है. इसके बाद, कोई दूसरा कंपोज़िटर फ़्रेम इसे सर्फ़ेस ड्रॉ क्वाड के ज़रिए देख सकता है, और इसलिए विज़ को पता है कि क्या ड्रॉ करना है. (ध्यान दें कि सरफ़ेस ड्रॉ क्वाड में सिर्फ़ सरफ़ेस आईडी होते हैं, टेक्सचर नहीं.)

इंटरमीडिएट रेंडर पास

कुछ विज़ुअल इफ़ेक्ट, जैसे कि कई फ़िल्टर या ऐडवांस ब्लेंड मोड, आवश्यक है कि दो या ज़्यादा क्वाड किसी मध्यवर्ती टेक्स्चर के लिए बनाए जाएं. इसके बाद, बीच के टेक्सचर को जीपीयू (या किसी अन्य इंटरमीडिएट टेक्सचर) पर डेस्टिनेशन बफ़र में इस्तेमाल किया जाता है, साथ ही, विज़ुअल इफ़ेक्ट को भी लागू किया जा सकता है. इसकी अनुमति देने के लिए, एक कंपोज़िटर फ़्रेम में असल में रेंडर पास की सूची होती है. रूट रेंडर होने में हमेशा एक पास मौजूद रहता है. जिसे आखिर में बनाया जाता है और जिसका डेस्टिनेशन फ़्रेम बफ़र से मेल खाता है. ऐसा भी हो सकता है.

एक से ज़्यादा रेंडर होने की संभावना, नाम के बारे में बताती है "रेंडर पास." हर पास को जीपीयू पर, एक से ज़्यादा "पास" में, क्रम से लागू किया जाना चाहिए, वहीं, एक पास की मदद से जीपीयू की गणना की जा सकती है.

एक साथ दिखाना

Viz पर एकाधिक कंपोज़िटर फ़्रेम सबमिट किए गए हैं, और उन्हें स्क्रीन पर साथ ले जाना होगा. ऐसा एग्रीगेशन के चरण से पूरा किया जाता है, जो उन्हें सिंगल, एग्रीगेट किया गया कंपोज़िटर फ़्रेम. एग्रीगेशन, सरफ़ेस ड्रॉ क्वाड को उनके बताए गए कंपोज़िटर फ़्रेम से बदल देता है. यह बीच में दिखने वाले ग़ैर-ज़रूरी टेक्स्चर या ऑफ़स्क्रीन कॉन्टेंट को ऑप्टिमाइज़ करने का भी मौका है. उदाहरण के लिए, कई मामलों में किसी साइट के लिए कंपोज़िटर फ़्रेम, अलग किए गए iframe के बारे में बताता है को इसके अलग टेक्सचर की ज़रूरत नहीं होती और सही ड्रॉ क्वाड के ज़रिए सीधे फ़्रेम बफ़र में डाला जा सकता है. एग्रीगेशन फ़ेज़ ऐसे ऑप्टिमाइज़ेशन का पता लगाता है और उन्हें ऐसी ग्लोबल जानकारी के आधार पर लागू करता है जिसे अलग-अलग रेंडर कंपोज़िटर ऐक्सेस नहीं कर सकते.

उदाहरण

ये रहे कंपोज़िटर फ़्रेम, जो शुरुआत से ही उदाहरण को दिखाते हैं यह पोस्ट.

foo.com/index.html प्लैटफ़ॉर्म: id=0
- रेंडर पास 0: आउटपुट पाने के लिए ड्रॉ करें.
  - रेंडर पास ड्रॉ क्वाड: तीन पिक्सल ब्लर के साथ ड्रॉ करें और रेंडर पास 0 में क्लिप करें.
    - रेंडर पास 1:
      - #one iframe की टाइल कॉन्टेंट के लिए क्वाड बनाएं. हर आइटम के लिए x और y पोज़िशन का इस्तेमाल करें.
  - सरफ़ेस ड्रॉ क्वाड: आईडी 2 के साथ, स्केल और ट्रांसलेशन ट्रांसफ़ॉर्म के साथ बनाया गया है.
ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) का सरफ़ेस: ID=1
- रेंडर पास 0: आउटपुट पाने के लिए ड्रॉ करें.
  - ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) के लिए क्वाड बनाएं (टाइल भी किया गया)
bar.com/index.html प्लैटफ़ॉर्म: आईडी=2
- रेंडर पास 0: आउटपुट पाने के लिए ड्रॉ करें.
  - #two iframe की सामग्री के लिए क्वाड बनाएं और हर एक के लिए x और y की जगह रखें.

यूना क्रवेट्स के इलस्ट्रेशन.