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