प्रकाशित: 31 मार्च, 2014
ब्राउज़र पेज को रेंडर कर सके, उससे पहले उसे DOM का निर्माण करना होगा और CSSOM ट्री. इस वजह से, हमें यह पक्का करना होगा कि हम एचटीएमएल और सीएसएस को ब्राउज़र में जल्द से जल्द बदलें.
खास जानकारी
- बाइट → वर्ण → टोकन → नोड → ऑब्जेक्ट मॉडल.
- एचटीएमएल मार्कअप को दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) में बदल दिया जाता है; सीएसएस मार्कअप है एक सीएसएस ऑब्जेक्ट मॉडल (CSSOM) में बदल जाता है.
- डीओएम और सीएसएसओएम, अलग-अलग डेटा स्ट्रक्चर हैं.
- Chrome DevTools के परफ़ॉर्मेंस पैनल की मदद से, डीओएम और सीएसएसओएम के निर्माण और प्रोसेसिंग की लागत को कैप्चर और जांचा जा सकता है.
डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
सबसे आसान मामले से शुरू करें: कुछ टेक्स्ट और एक इमेज वाला सादा HTML पेज. ब्राउज़र इस पेज को कैसे प्रोसेस करता है?
- कन्वर्ज़न: ब्राउज़र, डिस्क से बाहर की एचटीएमएल की रॉ बाइट को पढ़ता है या नेटवर्क, जो उन्हें फ़ाइल को कोड में बदलने का तरीका (उदाहरण के लिए, UTF-8).
- टोकन बनाना: ब्राउज़र, वर्णों की स्ट्रिंग को अलग-अलग टोकन में बदल देता है. जैसे,
<html>,<body>. यह बदलाव, W3C के HTML5 स्टैंडर्ड के मुताबिक किया जाता है. साथ ही, ऐंगल ब्रैकेट में मौजूद अन्य स्ट्रिंग को भी बदला जाता है. हर टोकन का एक खास मतलब होता है और उसके अपने नियम होते हैं. - लेक्सिंग: इससे जनरेट हुए टोकन "ऑब्जेक्ट" में बदल जाते हैं, जिससे पता चलता है कि प्रॉपर्टी और नियम भी शामिल हैं.
- DOM बनाना: आखिर में, एचटीएमएल मार्कअप अलग-अलग टैग के बीच के संबंधों को तय करता है (कुछ टैग दूसरे टैग में होते हैं). इसलिए, बनाए गए ऑब्जेक्ट को ट्री डेटा स्ट्रक्चर में लिंक किया जाता है. यह स्ट्रक्चर, मूल मार्कअप में तय किए गए पैरंट-चाइल्ड रिलेशनशिप को भी कैप्चर करता है: एचटीएमएल ऑब्जेक्ट, बॉडी ऑब्जेक्ट का पैरंट होता है, बॉडी ऑब्जेक्ट, पैराग्राफ़ ऑब्जेक्ट का पैरंट होता है. ऐसा तब तक होता है, जब तक दस्तावेज़ का पूरा रेप्रज़ेंटेशन नहीं बन जाता.
इस पूरी प्रोसेस का फ़ाइनल आउटपुट, हमारे आसान पेज का दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) होता है. ब्राउज़र, पेज की आगे की प्रोसेसिंग के लिए इसका इस्तेमाल करता है.
जब भी ब्राउज़र एचटीएमएल मार्कअप को प्रोसेस करता है, तो वह पहले से तय किए गए सभी चरणों से गुज़रता है: बाइट को वर्ण में बदलना, टोकन की पहचान करना, टोकन को नोड में बदलना, और डीओएम ट्री बनाना. इस पूरी प्रोसेस में कुछ समय लग सकता है. खास तौर पर, अगर हमें ज़्यादा एचटीएमएल प्रोसेस करना है.
अगर Chrome DevTools खोला जाता है और पेज लोड होने के दौरान टाइमलाइन रिकॉर्ड की जाती है, तो इस चरण को पूरा करने में लगने वाला असल समय देखा जा सकता है. पिछले उदाहरण में, हमें एचटीएमएल के एक हिस्से को डीओएम ट्री में बदलने में ~5 मिलीसेकंड लगे. इस प्रोसेस में बहुत ज़्यादा समय लग सकता है. अगर ब्राउज़र को बहुत ज़्यादा एचटीएमएल प्रोसेस करना पड़ता है, तो स्मूद ऐनिमेशन बनाने में समस्या आ सकती है.
DOM ट्री, दस्तावेज़ मार्कअप की प्रॉपर्टी और रिलेशनशिप को कैप्चर करता है. हालांकि, इससे हमें यह पता नहीं चलता कि रेंडर होने पर एलिमेंट कैसा दिखेगा. यह सीएसएसओएम की ज़िम्मेदारी है.
सीएसएस ऑब्जेक्ट मॉडल (CSSOM)
जब ब्राउज़र हमारे बुनियादी पेज का डीओएम बना रहा था, तब उसे दस्तावेज़ के <head> में एक <link> एलिमेंट मिला, जो बाहरी सीएसएस स्टाइल शीट: style.css का रेफ़रंस दे रहा था. यह अनुमान लगाकर कि पेज को रेंडर करने के लिए, उसे इस संसाधन की ज़रूरत है, वह तुरंत इस संसाधन के लिए अनुरोध भेजता है. इस अनुरोध के जवाब में, यह कॉन्टेंट मिलता है:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
हम सीधे एचटीएमएल मार्कअप (इनलाइन) में अपनी स्टाइल का एलान कर सकते थे, लेकिन अपनी सीएसएस को एचटीएमएल से अलग रखने से, हम कॉन्टेंट और डिज़ाइन को अलग-अलग इकाइयों के तौर पर देख सकते हैं: डिज़ाइनर सीएसएस पर काम कर सकते हैं, डेवलपर एचटीएमएल के साथ-साथ अन्य चीज़ों पर फ़ोकस कर सकते हैं.
एचटीएमएल की तरह ही, हमें मिले सीएसएस नियमों को ऐसे में बदलना होगा जिसे ब्राउज़र समझ सके और उस पर काम कर सके. इसलिए, हम HTML प्रक्रिया को दोहराते हैं, लेकिन एचटीएमएल के बजाय सीएसएस के लिए:
सीएसएस बाइट को वर्णों, फिर टोकन, और फिर नोड में बदला जाता है. आख़िर में, उन्हें एक ट्री स्ट्रक्चर में लिंक कर दिया जाता है, जिसे "सीएसएस ऑब्जेक्ट मॉडल" कहा जाता है (CSSOM):
CSSOM की ट्री संरचना क्यों होती है? अंतिम सेट की गणना करते समय पेज पर मौजूद किसी भी ऑब्जेक्ट के लिए स्टाइल सेट करता है, तो ब्राउज़र नियम उस नोड पर लागू होगा (उदाहरण के लिए, अगर वह किसी बॉडी एलीमेंट का चाइल्ड है, तो सभी बॉडी स्टाइल लागू होते हैं) और इसके बाद कंप्यूट की गई स्टाइल को बार-बार बेहतर बनाता है खास नियम लागू करके; इसका मतलब है कि नियम "कैसकेड डाउन" होते हैं.
इसे ज़्यादा बेहतर तरीके से समझने के लिए, पहले बताए गए CSSOM ट्री को देखें. कोई भी टेक्स्ट
जो <span> टैग में मौजूद है, उसमें बॉडी एलिमेंट में रखा गया है
फ़ॉन्ट का साइज़ 16 पिक्सल है और इसमें लाल रंग का टेक्स्ट है—font-size डायरेक्टिव कैस्केड है
body से span तक. हालांकि, अगर कोई span पैराग्राफ़ (p) टैग का चाइल्ड है, तो उसका कॉन्टेंट नहीं दिखाया जाता.
यह भी ध्यान दें कि पहले बताया गया ट्री, पूरा CSSOM ट्री नहीं है. इसमें सिर्फ़ वे स्टाइल दिखती हैं जिन्हें हमने अपनी स्टाइल शीट में बदलने का फ़ैसला लिया है. हर ब्राउज़र, स्टाइल का एक डिफ़ॉल्ट सेट उपलब्ध कराता है. इसे "उपयोगकर्ता एजेंट स्टाइल" भी कहा जाता है. जब हम अपनी कोई स्टाइल उपलब्ध नहीं कराते, तो हमें यही स्टाइल दिखती हैं. हमारी स्टाइल, इन डिफ़ॉल्ट स्टाइल को बदल देती हैं.
सीएसएस की प्रोसेसिंग में कितना समय लगता है, यह जानने के लिए टाइमलाइन को DevTools और "स्टाइल की फिर से गणना करें" खोजें इवेंट: DOM पार्सिंग के उलट, टाइमलाइन में अलग से "पार्स सीएसएस" नहीं दिखती का इस्तेमाल करता है और इसके बजाय कैप्चर कर लेता है पार्सिंग और CSSOM ट्री निर्माण, साथ ही रिकर्सिव कैलकुलेशन कंप्यूट की गई स्टाइल का इस्तेमाल करें.
हमारी सामान्य स्टाइल हेट को प्रोसेस करने में ~0.6 मिलीसेकंड लगते हैं. साथ ही, यह पेज के आठ एलिमेंट पर असर डालती है. हालांकि, यह समय काफ़ी नहीं है, लेकिन फिर भी यह समय लगता है. हालांकि, आठ एलिमेंट कहां से आए? CSSOM और DOM, अलग-अलग डेटा स्ट्रक्चर हैं! ऐसा लगता है कि ब्राउज़र कोई अहम चरण छिपा रहा है. इसके बाद, रेंडर ट्री के बारे में बताया जाएगा. यह डीओएम और सीएसएसओएम को आपस में जोड़ता है.