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

Ilya Grigorik

प्रकाशित: 31 मार्च, 2014

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

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

खास जानकारी

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

सबसे पहले, ब्राउज़र DOM और CSSOM को "रेंडर ट्री" में मिला देता है, जो पेज पर दिखाई देने वाली सभी 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 में लेआउट को मेज़र करना

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

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

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

रेंडर किया गया हैलो वर्ल्ड पेज

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

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

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

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

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