रेंडर-ट्री बनाना, लेआउट, और पेंट

Ilya Grigorik

पब्लिश किया गया: 31 मार्च, 2014

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

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

खास जानकारी

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

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

रेंडर ट्री बनाने के लिए, DOM और CSSOM को जोड़ा जाता है

रेंडर ट्री बनाने के लिए, ब्राउज़र ये काम करता है:

  1. डीओएम ट्री के रूट से शुरू करके, हर दिखने वाले नोड को ट्रैवर्स करें.

    • कुछ नोड नहीं दिखते हैं. उदाहरण के लिए, स्क्रिप्ट टैग, मेटा टैग वगैरह. इन्हें इसलिए हटा दिया जाता है, क्योंकि ये रेंडर किए गए आउटपुट में नहीं दिखते.
    • कुछ नोड, सीएसएस का इस्तेमाल करके छिपाए जाते हैं और उन्हें रेंडर ट्री से भी हटा दिया जाता है. उदाहरण के लिए, ऊपर दिए गए उदाहरण में स्पैन नोड, रेंडर ट्री से छिपा हुआ है. इसकी वजह यह है कि हमारे पास एक खास नियम है, जो उस पर "display: none" प्रॉपर्टी सेट करता है.

  2. दिखने वाले हर नोड के लिए, CSSOM के उन नियमों को ढूंढें जो उस नोड से मेल खाते हों और उन्हें लागू करें.

  3. कॉन्टेंट और उनकी कैलकुलेट की गई स्टाइल के साथ दिखने वाले नोड को उत्सर्जित करें.

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

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

पेज पर मौजूद हर ऑब्जेक्ट का सटीक साइज़ और पोज़िशन जानने के लिए, ब्राउज़र रेंडर ट्री के रूट से शुरू होता है और उसे ट्रैवर्स करता है. इस उदाहरण पर ध्यान दें:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

इसे आज़माएँ

पिछले उदाहरण के <body> में दो नेस्ट किए गए <div> हैं: पहला (पैरंट) <div>, नोड के डिसप्ले साइज़ को व्यूपोर्ट की चौड़ाई के 50% पर सेट करता है. साथ ही, पैरंट में मौजूद दूसरा <div>, अपने width को अपने पैरंट के 50% पर सेट करता है. इसका मतलब है कि व्यूपोर्ट की चौड़ाई का 25%.

लेआउट की जानकारी का हिसाब लगाना

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

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

इसमें कुछ समय लग सकता है, क्योंकि ब्राउज़र को काफ़ी काम करना पड़ता है. हालांकि, Chrome DevTools, पहले बताए गए तीनों चरणों के बारे में कुछ जानकारी दे सकता है. हमारे मूल "हैलो वर्ल्ड" उदाहरण के लेआउट स्टेज की जांच करें:

DevTools में लेआउट को मेज़र करना

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

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

आखिरकार, पेज व्यूपोर्ट में दिखने लगता है:

रेंडर किया गया &#39;नमस्ते दुनिया&#39; पेज

ब्राउज़र के काम करने के तरीके के बारे में यहां खास जानकारी दी गई है:

  1. एचटीएमएल मार्कअप को प्रोसेस करें और डीओएम ट्री बनाएं.
  2. सीएसएस मार्कअप को प्रोसेस करें और CSSOM ट्री बनाएं.
  3. डीओएम और सीएसएसओएम को रेंडर ट्री में जोड़ें.
  4. हर नोड की ज्यामिति का हिसाब लगाने के लिए, रेंडर ट्री पर लेआउट चलाएं.
  5. स्क्रीन पर अलग-अलग नोड पेंट करें.

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

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

सुझाव/राय दें या शिकायत करें