ब्लॉक करने वाली सीएसएस रेंडर करें

Ilya Grigorik

पब्लिश किया गया: 31 मार्च, 2014

डिफ़ॉल्ट रूप से, सीएसएस को रेंडर करने से रोकने वाले रिसॉर्स के तौर पर माना जाता है. इसका मतलब है कि ब्राउज़र तब तक कोई भी प्रोसेस किया गया कॉन्टेंट रेंडर नहीं करेगा, जब तक सीएसएसओएम बन नहीं जाता. पक्का करें कि आपकी सीएसएस कम से कम हो और उसे जल्द से जल्द डिलीवर किया जाए. साथ ही, रेंडरिंग को अनब्लॉक करने के लिए, मीडिया टाइप और क्वेरी का इस्तेमाल करें.

रेंडर ट्री बनाने के दौरान, हमने देखा कि रेंडर ट्री बनाने के लिए, क्रिटिकल रेंडरिंग पाथ में डीओएम और सीएसएसओएम, दोनों की ज़रूरत होती है. इससे परफ़ॉर्मेंस पर अहम असर पड़ता है: एचटीएमएल और सीएसएस, दोनों ही रेंडर ब्लॉकिंग रिसॉर्स हैं. एचटीएमएल का इस्तेमाल करना ज़रूरी है, क्योंकि डीओएम के बिना हमारे पास रेंडर करने के लिए कुछ नहीं होगा. हालांकि, सीएसएस की ज़रूरत कम हो सकती है. अगर हम सीएसएस पर रेंडरिंग को ब्लॉक किए बिना किसी सामान्य पेज को रेंडर करने की कोशिश करें, तो क्या होगा?

खास जानकारी

• डिफ़ॉल्ट रूप से, सीएसएस को रेंडर ब्लॉकिंग रिसॉर्स माना जाता है.
• मीडिया टाइप और मीडिया क्वेरी की मदद से, हम कुछ सीएसएस रिसॉर्स को 'नॉन-रेंडर ब्लॉकिंग' के तौर पर मार्क कर सकते हैं.
• ब्राउज़र सभी सीएसएस रिसॉर्स डाउनलोड करता है, भले ही वे ब्लॉक किए गए हों या नहीं.

सीएसएस के साथ The New York Times

सीएसएस के बिना The New York Times (एफ़ओयूसी)

पिछले उदाहरण में, 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"). इसलिए, जब पेज को ब्राउज़र में पहली बार लोड किया जाता है, तो यह रेंडर ब्लॉकिंग नहीं करता.

आखिर में, ध्यान दें कि "रेंडर ब्लॉकिंग" का मतलब सिर्फ़ यह है कि ब्राउज़र को उस रिसॉर्स पर पेज के शुरुआती रेंडरिंग को रोकना है या नहीं. दोनों ही मामलों में, ब्राउज़र अब भी सीएसएस एसेट को डाउनलोड करता है. हालांकि, बिना ब्लॉक करने वाले रिसॉर्स के लिए, उसे कम प्राथमिकता दी जाती है.

सुझाव/राय दें या शिकायत करें