CSSOM और DOM ट्री को एक रेंडर ट्री में मिलाया जाता है. इसके बाद, उसका इस्तेमाल दिखने वाले हर एलिमेंट के लेआउट को कंप्यूट करने के लिए किया जाता है. यह पेंट प्रोसेस के लिए इनपुट के तौर पर काम करता है, जो पिक्सल को स्क्रीन पर रेंडर करता है. रेंडरिंग की बेहतर परफ़ॉर्मेंस के लिए, इनमें से हर चरण को ऑप्टिमाइज़ करना ज़रूरी है.
ऑब्जेक्ट मॉडल बनाने से जुड़े पिछले सेक्शन में, हमने एचटीएमएल और सीएसएस इनपुट के आधार पर DOM और CSSOM ट्री बनाए थे. हालांकि, ये दोनों ऐसे इंडिपेंडेंट ऑब्जेक्ट हैं जो दस्तावेज़ के अलग-अलग पहलुओं को कैप्चर करते हैं: एक में कॉन्टेंट के बारे में जानकारी दी जाती है और दूसरा, स्टाइल से जुड़े उन नियमों के बारे में बताता है जो दस्तावेज़ पर लागू होते हैं. हम दोनों को मर्ज कैसे करते हैं और ब्राउज़र से स्क्रीन पर पिक्सल रेंडर कैसे करते हैं?
खास जानकारी
- DOM और CSSOM ट्री जोड़कर रेंडर ट्री बनाया जाता है.
- रेंडर ट्री में सिर्फ़ वही नोड होते हैं जो पेज को रेंडर करने के लिए ज़रूरी होते हैं.
- लेआउट हर ऑब्जेक्ट की सटीक पोज़िशन और साइज़ का पता लगाता है.
- आखिरी चरण पेंट है, जो फ़ाइनल रेंडर ट्री में ले जाता है और स्क्रीन पर पिक्सल को रेंडर करता है.
सबसे पहले, ब्राउज़र DOM और CSSOM को एक "रेंडर ट्री" में मिलाता है, जो पेज पर दिखने वाला सारा DOM कॉन्टेंट और हर नोड के लिए CSSOM शैली की सारी जानकारी कैप्चर करता है.
रेंडर ट्री बनाने के लिए, ब्राउज़र मोटे तौर पर ये काम करता है:
डीओएम ट्री के रूट से शुरू करते हुए, दिखने वाले हर नोड को पार करें.
- कुछ नोड नहीं दिखते (उदाहरण के लिए, स्क्रिप्ट टैग, मेटा टैग वगैरह). इसे हटा दिया जाता है, क्योंकि वे रेंडर किए गए आउटपुट में नहीं दिखते.
- कुछ नोड, सीएसएस की मदद से छिपे होते हैं और उन्हें रेंडर ट्री से भी हटा दिया जाता है. उदाहरण के लिए, ऊपर दिए गए उदाहरण में स्पैन नोड, रेंडर ट्री में मौजूद नहीं है, क्योंकि हमने साफ़ तौर पर एक नियम बनाया है जो इस पर "display: none" प्रॉपर्टी को सेट करता है.
दिखने वाले हर नोड के लिए, मेल खाने वाले CSSOM नियम ढूंढें और उन्हें लागू करें.
कॉन्टेंट और उनकी कंप्यूट की गई स्टाइल के साथ दिखने वाले नोड हटाएं.
आखिरी आउटपुट एक रेंडर ट्री होता है, जिसमें स्क्रीन पर दिखने वाले हर कॉन्टेंट के कॉन्टेंट और स्टाइल की जानकारी होती है. रेंडर ट्री सेट करके, हम "लेआउट" चरण पर जा सकते हैं.
इस बिंदु तक, हमने दिखाए जाने वाले नोड और उनकी कंप्यूट की गई स्टाइल का हिसाब लगा लिया है. हालांकि, हमने डिवाइस के व्यूपोर्ट में उनकी सटीक पोज़िशन और साइज़ का हिसाब नहीं लगाया है.--यह "लेआउट" चरण है, जिसे "रीफ़्लो" भी कहा जाता है.
पेज पर मौजूद हर ऑब्जेक्ट के सटीक साइज़ और पोज़िशन का पता लगाने के लिए, ब्राउज़र रेंडर ट्री के मूल से शुरू होता है और उसे पार करता है. आइए, एक आसान सा उदाहरण देखते हैं:
<!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>
ऊपर दिए गए पेज के मुख्य हिस्से में नेस्ट किए गए दो div शामिल हैं: पहला (पैरंट) div, नोड के डिसप्ले साइज़ को व्यूपोर्ट की चौड़ाई के 50% पर सेट करता है और दूसरा div---पैरंट में शामिल---उसकी चौड़ाई को उसके पैरंट का 50% सेट करता है; यानी, व्यूपोर्ट की चौड़ाई का 25%.
लेआउट प्रोसेस का आउटपुट एक "बॉक्स मॉडल" है, जो व्यूपोर्ट में हर एलिमेंट की सटीक पोज़िशन और साइज़ को सटीक रूप से कैप्चर करता है: स्क्रीन पर मौजूद सभी मिलते-जुलते मापों को ऐब्सलूट पिक्सल में बदल दिया जाता है.
आखिर में, अब हमें पता है कि कौनसे नोड दिख रहे हैं और उनकी कंप्यूट की गई स्टाइल और ज्यामिति, तो हम इस जानकारी को आखिरी चरण में भेज सकते हैं. इससे रेंडर ट्री में मौजूद हर नोड, स्क्रीन पर मौजूद असल पिक्सल में बदल जाता है. इस चरण को अक्सर "पेंटिंग" या "रास्टराइज़िंग" कहा जाता है.
इसमें कुछ समय लग सकता है क्योंकि ब्राउज़र को थोड़ा काम करना पड़ता है. हालांकि, Chrome DevTools, ऊपर बताए गए तीनों चरणों के बारे में कुछ अहम जानकारी दे सकता है. आइए, अपनी मूल "नमस्ते दुनिया" उदाहरण के लिए लेआउट स्टेज देखते हैं:
- "लेआउट" इवेंट, टाइमलाइन में रेंडर ट्री बनाने, उसकी पोज़िशन, और साइज़ का कैलकुलेशन कैप्चर करता है.
- लेआउट पूरा होने के बाद, ब्राउज़र "पेंट सेटअप" और "पेंट" इवेंट से जुड़ी समस्या पैदा करता है. ये इवेंट, रेंडर ट्री को स्क्रीन पर पिक्सल में बदल देते हैं.
ट्री को रेंडर करने, उसका लेआउट बनाने, और उसे पेंट करने में लगने वाला समय, दस्तावेज़ के साइज़, लागू की गई स्टाइल, और उस डिवाइस पर निर्भर करता है जिस पर वह इस्तेमाल किया जा रहा है: दस्तावेज़ जितना बड़ा होगा, ब्राउज़र में उतना ही काम करना होगा, स्टाइल जितना मुश्किल होगा, पेंटिंग में भी ज़्यादा समय लगेगा. उदाहरण के लिए, एक ठोस रंग को पेंट करने में "सस्ती" समय लग सकता है. वहीं, ड्रॉप शैडो को कंप्यूट और रेंडर करने में "महंगा" होता है.
यह पेज अब व्यूपोर्ट में दिख रहा है:
यहां ब्राउज़र के चरणों का क्विक रीकैप दिया गया है:
- एचटीएमएल मार्कअप को प्रोसेस करें और डीओएम ट्री बनाएं.
- सीएसएस मार्कअप को प्रोसेस करें और CSSOM ट्री बनाएं.
- DOM और CSSOM को एक रेंडर ट्री में मिलाएं.
- हर नोड की ज्यामिति की गिनती करने के लिए, रेंडर ट्री पर लेआउट चलाएं.
- हर नोड को स्क्रीन पर पेंट करें.
हमारा डेमो पेज सामान्य दिख सकता है. हालांकि, इसमें कुछ काम करने की ज़रूरत होती है. अगर DOM या CSSOM में बदलाव किया गया था, तो आपको यह प्रोसेस दोहरानी होगी, ताकि यह पता लगाया जा सके कि स्क्रीन पर कौनसे पिक्सल को फिर से रेंडर करने की ज़रूरत होगी.
क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ करना, ऊपर दिए गए क्रम में पहले से लेकर पांचवें चरण को पूरा करने में लगने वाले कुल समय को कम करने की प्रक्रिया है. ऐसा करने से, कॉन्टेंट जल्द से जल्द स्क्रीन पर रेंडर होता है. साथ ही, शुरुआती रेंडर के बाद, स्क्रीन अपडेट होने में लगने वाला समय भी कम होता है. इसका मतलब है कि इंटरैक्टिव कॉन्टेंट के लिए रीफ़्रेश दर ज़्यादा है.