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