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

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

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

खास जानकारी

  • डिफ़ॉल्ट रूप से, सीएसएस को रेंडर करने वाले रिसॉर्स के तौर पर माना जाता है.
  • मीडिया टाइप और मीडिया क्वेरी की मदद से, हम कुछ सीएसएस रिसॉर्स को रेंडर नहीं किए गए ब्लॉकिंग के तौर पर मार्क कर सकते हैं.
  • ब्राउज़र, सीएसएस के सभी संसाधनों को डाउनलोड करता है. भले ही, वह ब्लॉक करने या ब्लॉक न किए जाने वाले व्यवहार पर ध्यान देता हो.
सीएसएस के साथ NYTimes
The New York Times with CSS
सीएसएस के बिना NYTimes
The New York Times with CSS (FOUC)

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

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

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