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

Ilya Grigorik

पब्लिश की गई तारीख: 31 मार्च, 2014

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

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

खास जानकारी

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

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

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

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

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

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

  2. दिखने वाले हर नोड के लिए, मैच करने वाले सही सीएसएसओएम नियम ढूंढें और उन्हें लागू करें.

  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 में लेआउट को मेज़र करना.

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

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

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

रेंडर किया गया पेज, जिसमें लिखा है 'नमस्ते, वेब परफ़ॉर्मेंस के छात्रों!' और एक प्यारे कुत्ते का मीम दिखाया गया है, जिसमें कहा गया है कि आप बहुत अच्छे हैं.

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

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

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

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