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