प्रकाशित: 31 मार्च, 2014
डिफ़ॉल्ट रूप से, सीएसएस को रेंडर करने से रोकने वाले रिसॉर्स के तौर पर माना जाता है. इसका मतलब है कि ब्राउज़र तब तक कोई भी प्रोसेस किया गया कॉन्टेंट रेंडर नहीं करेगा, जब तक सीएसएसओएम बन नहीं जाता. पक्का करें कि आपकी सीएसएस कम से कम हो और उसे जल्द से जल्द डिलीवर किया जाए. साथ ही, रेंडरिंग को अनब्लॉक करने के लिए, मीडिया टाइप और क्वेरी का इस्तेमाल करें.
रेंडर ट्री बनाने के दौरान, हमने देखा कि रेंडर ट्री बनाने के लिए, क्रिटिकल रेंडरिंग पाथ में डीओएम और सीएसएसओएम, दोनों की ज़रूरत होती है. इससे परफ़ॉर्मेंस पर एक अहम असर पड़ता है: एचटीएमएल और सीएसएस, दोनों ही रेंडर होने से रोकने वाले रिसॉर्स हैं. एचटीएमएल में साफ़ तौर पर जानकारी मौजूद है, क्योंकि डीओएम के बिना हमारे पास रेंडर करने के लिए कुछ नहीं होता. हालांकि, हो सकता है कि सीएसएस के लिए ज़रूरी शर्तें पूरी न हों. अगर हम सीएसएस पर रेंडरिंग को ब्लॉक किए बिना किसी सामान्य पेज को रेंडर करने की कोशिश करते हैं, तो क्या होगा?
खास जानकारी
- डिफ़ॉल्ट रूप से, सीएसएस को रेंडर रोकने वाला रिसॉर्स माना जाता है.
- मीडिया टाइप और मीडिया क्वेरी की मदद से, हम कुछ सीएसएस रिसॉर्स को नॉन-रेंडर ब्लॉकिंग के तौर पर मार्क कर सकते हैं.
- ब्राउज़र सभी सीएसएस रिसॉर्स डाउनलोड करता है, भले ही वे ब्लॉक किए गए हों या नहीं.
पहले के उदाहरण में, 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"). इसलिए, जब पेज को ब्राउज़र में पहली बार लोड किया जाता है, तो यह रेंडर ब्लॉकिंग नहीं करता.
आखिर में, ध्यान दें कि "रेंडरिंग ब्लॉक करना" इससे सिर्फ़ यह पता चलता है कि ब्राउज़र को उस रिसॉर्स पर पेज की शुरुआती रेंडरिंग को होल्ड करना है या नहीं. दोनों ही मामलों में, ब्राउज़र अब भी सीएसएस एसेट को डाउनलोड करता है. हालांकि, बिना ब्लॉक करने वाले रिसॉर्स के लिए, इसकी प्राथमिकता कम होती है.