पब्लिश किया गया: 31 मार्च, 2014
डिफ़ॉल्ट रूप से, सीएसएस को रेंडर रोकने वाले रिसॉर्स के तौर पर माना जाता है. इसका मतलब है कि ब्राउज़र, प्रोसेस किए गए किसी भी कॉन्टेंट को तब तक रेंडर नहीं करेगा, जब तक सीएसएसओएम नहीं बन जाता. पक्का करें कि आपका सीएसएस लीन हो. साथ ही, इसे जल्द से जल्द डिलीवर करें. इसके अलावा, रेंडरिंग को अनब्लॉक करने के लिए, मीडिया टाइप और क्वेरी का इस्तेमाल करें.
रेंडर ट्री बनाने के दौरान, हमने देखा कि अहम रेंडरिंग पाथ के लिए, रेंडर ट्री बनाने के लिए DOM और CSSOM दोनों की ज़रूरत होती है. इससे परफ़ॉर्मेंस पर अहम असर पड़ता है: एचटीएमएल और सीएसएस, दोनों ही रेंडर रोकने वाले रिसॉर्स हैं. एचटीएमएल के बारे में तो साफ़ तौर पर कहा जा सकता है, क्योंकि DOM के बिना हम कुछ भी रेंडर नहीं कर पाएंगे. हालांकि, सीएसएस की ज़रूरत के बारे में कम ही कहा जा सकता है. अगर हम सीएसएस पर रेंडरिंग को ब्लॉक किए बिना, किसी सामान्य पेज को रेंडर करने की कोशिश करें, तो क्या होगा?
खास जानकारी
- डिफ़ॉल्ट रूप से, सीएसएस को रेंडर रोकने वाले रिसॉर्स के तौर पर माना जाता है.
- मीडिया टाइप और मीडिया क्वेरी की मदद से, हम कुछ सीएसएस रिसॉर्स को रेंडर रोकने वाले रिसॉर्स के तौर पर मार्क कर सकते हैं.
- ब्राउज़र, सभी सीएसएस रिसॉर्स डाउनलोड करता है. भले ही, वे रेंडर रोकने वाले हों या नहीं.
ऊपर दिए गए उदाहरण में, New York Times की वेबसाइट को सीएसएस के साथ और उसके बिना दिखाया गया है. इससे पता चलता है कि सीएसएस उपलब्ध होने तक रेंडरिंग क्यों ब्लॉक की जाती है. सीएसएस के बिना, पेज का इस्तेमाल नहीं किया जा सकता. आम तौर पर, दाईं ओर दिखने वाले अनुभव को बिना स्टाइल वाले कॉन्टेंट का फ़्लैश (FOUC) कहा जाता है. ब्राउज़र, DOM और CSSOM दोनों उपलब्ध होने तक रेंडरिंग को ब्लॉक करता है.
सीएसएस, रेंडर रोकने वाला रिसॉर्स है. इसे जल्द से जल्द और तेज़ी से क्लाइंट तक पहुंचाएं, ताकि पहले रेंडर होने में लगने वाले समय को ऑप्टिमाइज़ किया जा सके.
हालांकि, अगर हमारे पास कुछ सीएसएस स्टाइल हैं जिनका इस्तेमाल सिर्फ़ कुछ खास स्थितियों में किया जाता है, तो क्या होगा? जैसे, जब पेज प्रिंट किया जा रहा हो या उसे बड़े मॉनिटर पर प्रोजेक्ट किया जा रहा हो. अगर हमें इन रिसॉर्स पर रेंडरिंग को ब्लॉक न करना पड़े, तो यह अच्छी बात होगी.
सीएसएस "मीडिया टाइप" और "मीडिया क्वेरी" की मदद से, हम इन इस्तेमाल के उदाहरणों को हल कर सकते हैं:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
एक मीडिया क्वेरी में एक मीडिया टाइप और शून्य या उससे ज़्यादा एक्सप्रेशन होते हैं. ये एक्सप्रेशन, मीडिया की खास सुविधाओं की शर्तों की जांच करते हैं. उदाहरण के लिए, हमारी पहली स्टाइल शीट के एलान में कोई मीडिया टाइप या क्वेरी नहीं दी गई है. इसलिए, यह सभी स्थितियों में लागू होती है. इसका मतलब है कि यह हमेशा रेंडर रोकने वाली होती है. दूसरी ओर, दूसरी स्टाइल शीट का एलान सिर्फ़ तब लागू होता है, जब कॉन्टेंट प्रिंट किया जा रहा हो. ऐसा हो सकता है कि आपको प्रिंट के लिए लेआउट को फिर से व्यवस्थित करना हो, फ़ॉन्ट बदलने हों, और डिज़ाइन से जुड़े अन्य अहम पहलुओं में बदलाव करना हो. इसलिए, इस स्टाइल शीट के एलान के लिए, पेज के पहली बार लोड होने पर रेंडरिंग को ब्लॉक करने की ज़रूरत नहीं होती. आखिर में, स्टाइल शीट के आखिरी एलान में एक "मीडिया क्वेरी" दी गई है, जिसे ब्राउज़र एक्ज़ीक्यूट करता है. अगर शर्तें पूरी होती हैं, तो ब्राउज़र, स्टाइल शीट डाउनलोड और प्रोसेस होने तक रेंडरिंग को ब्लॉक करता है.
मीडिया क्वेरी का इस्तेमाल करके, हम अपनी प्रस्तुति को खास इस्तेमाल के उदाहरणों के हिसाब से बना सकते हैं. जैसे, डिसप्ले बनाम प्रिंट. इसके अलावा, हम स्क्रीन ओरिएंटेशन में बदलाव, साइज़ बदलने के इवेंट वगैरह जैसी डाइनैमिक स्थितियों के हिसाब से भी प्रस्तुति को बना सकते हैं. स्टाइल शीट ऐसेट का एलान करते समय, मीडिया टाइप और क्वेरी पर खास ध्यान दें. इनसे, अहम रेंडरिंग पाथ की परफ़ॉर्मेंस पर काफ़ी असर पड़ता है.
यहां कुछ उदाहरण दिए गए हैं:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- पहला एलान, रेंडर रोकने वाला है और यह सभी स्थितियों में लागू होता है.
- दूसरा एलान भी रेंडर रोकने वाला है:
"all"डिफ़ॉल्ट टाइप है. इसलिए, अगर आपने कोई टाइप तय नहीं किया है, तो इसे अपने-आप"all"पर सेट कर दिया जाता है. इसलिए, पहला और दूसरा एलान एक ही हैं. - तीसरे एलान में एक डाइनैमिक मीडिया क्वेरी है, जिसका आकलन पेज लोड होने पर किया जाता है. पेज लोड होने के दौरान, डिवाइस के स्क्रीन की दिशा के आधार पर,
portrait.cssरेंडर रोकने वाला हो सकता है या नहीं भी हो सकता है. - आखिरी एलान सिर्फ़ तब लागू होता है, जब पेज प्रिंट किया जा रहा हो (
"print"). इसलिए, ब्राउज़र में पेज के पहली बार लोड होने पर, यह रेंडर रोकने वाला नहीं होता.
आखिर में, ध्यान दें कि "रेंडर रोकने वाला" का मतलब सिर्फ़ यह है कि ब्राउज़र को उस रिसॉर्स पर पेज की शुरुआती रेंडरिंग को रोकना होगा या नहीं. दोनों ही मामलों में, ब्राउज़र अब भी सीएसएस ऐसेट डाउनलोड करता है. हालांकि, रेंडर न रोकने वाले रिसॉर्स के लिए, इसकी प्राथमिकता कम होती है.