ऑफ़स्क्रीन कॉन्टेंट को रेंडर करने की प्रोसेस को स्किप करके, लोड होने के शुरुआती समय में सुधार करें.
कॉन्टेंट बनाने
content-visibility
प्रॉपर्टी को Chromium 85 में लॉन्च किया जाएगा. यह सबसे असरदार नई सीएसएस में से एक हो सकती है
प्रॉपर्टी. content-visibility,
उपयोगकर्ता एजेंट को लेआउट और पेंटिंग जैसे एलिमेंट को रेंडर करने के काम को स्किप करना होगा,
ज़रूरत पड़ने तक. क्योंकि रेंडरिंग को स्किप कर दिया जाता है, अगर आपके
कॉन्टेंट स्क्रीन पर नहीं दिखता है और content-visibility प्रॉपर्टी का इस्तेमाल करने पर
उपयोगकर्ता के पेजों को ज़्यादा तेज़ी से लोड किया जाता है. यह आपको
कॉन्टेंट. बहुत व्यवस्थित.
content-visibility: auto को कॉन्टेंट के अलग-अलग हिस्सों पर लागू करने से, शुरुआती लोड होने पर रेंडरिंग की परफ़ॉर्मेंस सात गुना बढ़ जाती है. ज़्यादा जानने के लिए आगे पढ़ें.ब्राउज़र समर्थन
content-visibility, सीएसएस कंटेनमेंट में मौजूद प्रिमिटिव पर निर्भर करता है
खास जानकारी. जब content-visibility सिर्फ़
अभी के लिए Chromium 85 के साथ काम करता है (और इसकी वैल्यू "है
प्रोटोटाइपिंग" के लिए,
Firefox), कंटेनमेंट स्पेसिफ़िकेशन सबसे आधुनिक वर्शन में काम करता है
ब्राउज़र से कनेक्ट होता है.
सीएसएस कंटेनमेंट
सीएसएस को कंट्रोल करने का मुख्य और अहम लक्ष्य, रेंडरिंग को चालू करना है के उम्मीद के मुताबिक अलग-अलग करके वेब कॉन्टेंट की परफ़ॉर्मेंस को बेहतर बनाया है पेज के बाकी हिस्से से एक DOM सबट्री.
बुनियादी रूप से, एक डेवलपर ब्राउज़र को बता सकता है कि पेज के कौनसे हिस्से एन्कैप्सुलेट किए गए हैं सामग्री के एक सेट के रूप में, जिसकी मदद से ब्राउज़र बिना किसी भेदभाव के सामग्री के बारे में तर्क कर सकते हैं सबट्री के बाहर की स्थिति पर ध्यान देने की ज़रूरत होती है. यह जानना कि कॉन्टेंट का कौनसा हिस्सा (सबट्री) में आइसोलेटेड कॉन्टेंट होता है. इसका मतलब है कि ब्राउज़र, तय करें.
चार तरह की CSS
कंटेनमेंट,
हर contain सीएसएस प्रॉपर्टी के लिए एक संभावित वैल्यू, जिसे जोड़ा जा सकता है
इसे मानों की स्पेस-सेपरेटेड लिस्ट में डालें:
size: एलिमेंट के साइज़ कंटेनमेंट से यह पक्का होता है कि एलिमेंट का बॉक्स इसके लिए, वंशज की जांच करने की ज़रूरत नहीं पड़ती. इसका मतलब है कि हम ये काम कर सकते हैं: अगर हमें सिर्फ़ डिसेंडेंट का लेआउट स्किप करना है, तो एलिमेंट.layout: लेआउट कंटेनमेंट का मतलब है कि डिसेंडेंट, पेज पर मौजूद अन्य बॉक्स का बाहरी लेआउट. इसकी मदद से, हम आने वाले समय में प्रोसेस को आगे बढ़ा सकते हैं डिसेंडेंट का लेआउटstyle: स्टाइल कंटेनमेंट से यह पक्का होता है कि जिन प्रॉपर्टी पर असर पड़ सकता है उसके डिसेंडेंट के अलावा भी कई चीज़ें, एलिमेंट (जैसे कि काउंटर) से एस्केप नहीं होती हैं. यह की मदद से हम डिसेंडेंट के लिए स्टाइल कंप्यूटेशन को छोड़ सकते हैं, अगर हम अन्य एलिमेंट पर स्टाइल की गणना करना चाहते हैं.paint: पेंट कंटेनमेंट से यह पक्का होता है कि कंटेनर के डिसेंडेंट अपनी सीमाओं से बाहर प्रदर्शित नहीं करते. कोई भी चीज़, एलिमेंट को ओवरफ़्लो नहीं कर सकती, और अगर कोई एलिमेंट ऑफ़-स्क्रीन है या किसी और तरह से दिख नहीं रहा है, तो इसके डिसेंडेंट भी नहीं दिखेगा. इससे हमें पेंटिंग की प्रोसेस को स्किप करने की सुविधा मिलती है डिसेंडेंट, अगर एलिमेंट ऑफ़स्क्रीन है.
content-visibility के साथ रेंडरिंग का काम स्किप किया जा रहा है
यह पता लगाना मुश्किल हो सकता है कि कौनसे कंटेनमेंट वैल्यू का इस्तेमाल करना चाहिए. ऐसा इसलिए, क्योंकि ब्राउज़र
ऑप्टिमाइज़ेशन सिर्फ़ तब काम करता है, जब इसके लिए कोई सही सेट चुना गया हो. आप
वैल्यू इस्तेमाल करके देखें कि क्या काम करता है
सबसे अच्छा, या आप
प्रॉपर्टी की ज़रूरी शर्तें लागू करने के लिए, content-visibility नाम की दूसरी सीएसएस प्रॉपर्टी का इस्तेमाल कर सकता है
अपने-आप कंट्रोल कर लिया जाएगा. content-visibility पक्का करता है कि आपको सबसे ज़्यादा
के साथ ब्राउज़र आपकी साइट पर बहुत कम मेहनत करता है.
डेवलपर.
कॉन्टेंट दिखने की सेटिंग में कई वैल्यू इस्तेमाल की जा सकती हैं, लेकिन इनमें से सिर्फ़ auto वैल्यू है
जिससे परफ़ॉर्मेंस में तुरंत सुधार होता है. एक ऐसा एलिमेंट जिसमें
content-visibility: auto को layout, style, और paint कंटेनमेंट मिला. अगर आपने
एलिमेंट स्क्रीन पर दिख रहा हो, लेकिन उपयोगकर्ता के काम का न हो
एलिमेंट ऐसे होंगे जिनकी सबट्री में फ़ोकस या चुने गए एलिमेंट होंगे), तो
साथ ही, size कंटेनमेंट भी बढ़ता है (और यह रुक जाता है)
पेंटिंग
और
हिट-टेस्टिंग
कॉन्टेंट के हिसाब से).
इसका क्या मतलब है? कम शब्दों में कहें, तो अगर एलिमेंट स्क्रीन पर नहीं दिखता, तो इसके डिसेंडेंट हैं रेंडर नहीं हुआ. ब्राउज़र इस बात पर विचार किए बिना एलिमेंट का साइज़ तय करता है सबमिट कर देता है और वह वहीं रुक जाता है. ज़्यादातर इमेज, जैसे कि स्टाइलिंग एलिमेंट की सबट्री के लेआउट और लेआउट को छोड़ दिया जाता है.
जैसे-जैसे एलिमेंट, व्यूपोर्ट के करीब पहुंचता है, ब्राउज़र size को नहीं जोड़ता
कंटेनमेंट और उसके कॉन्टेंट की पेंटिंग और हिट-टेस्टिंग शुरू कर देता है. यह
इससे रेंडरिंग के काम को उपयोगकर्ता को सही समय पर पूरा करने में मदद मिलती है.
सुलभता के बारे में जानकारी
content-visibility: auto की एक सुविधा यह भी है कि स्क्रीन पर दिखने वाला कॉन्टेंट, दस्तावेज़ के ऑब्जेक्ट मॉडल में उपलब्ध रहता है. इस वजह से, सुलभता ट्री (visibility: hidden के उलट) में भी ऐसा ही होता है. इसका मतलब है कि पेज के लोड होने या रेंडरिंग की परफ़ॉर्मेंस से समझौता किए बिना, कॉन्टेंट को पेज पर खोजा जा सकता है और उस पर नेविगेट किया जा सकता है.
हालांकि, इसका दूसरा हिस्सा यह है कि display: none या visibility: hidden जैसी स्टाइल वाली सुविधाओं वाले लैंडमार्क एलिमेंट, स्क्रीन से बाहर होने पर भी सुलभता ट्री में दिखेंगे. ऐसा इसलिए, क्योंकि ब्राउज़र इन स्टाइल को तब तक रेंडर नहीं करेगा, जब तक वे व्यूपोर्ट में नहीं जुड़ जाते. सुलभता ट्री में इन्हें दिखने से रोकने के लिए, aria-hidden="true" को भी जोड़ना न भूलें. इससे इन गड़बड़ियों की संभावना और बढ़ सकती है.
उदाहरण: यात्रा ब्लॉग
content-visibility: auto को लागू किया है. नतीजों से पता चलता है कि शुरुआती पेज लोड होने पर, रेंडरिंग में लगने वाला समय 232 मि॰से॰ से 30 मि॰से॰ तक हो गया है.आम तौर पर, यात्रा से जुड़े ब्लॉग में कुछ तस्वीरों के साथ कई कहानियां होती हैं. साथ ही, जानकारी देने वाला टेक्स्ट. यहां बताया गया है कि किसी सामान्य ब्राउज़र पर जब वह नेविगेट करता है, तो क्या होता है यात्रा ब्लॉग:
- नेटवर्क से पेज का एक हिस्सा डाउनलोड किया गया है. इसके अलावा, सभी ज़रूरी अपडेट भी जोड़े गए हैं संसाधन.
- यह ब्राउज़र स्टाइल और पेज का पूरा कॉन्टेंट दिखाता है ऐसा इसलिए, क्योंकि उपयोगकर्ता को वह कॉन्टेंट दिखेगा या नहीं.
- ब्राउज़र, पहले चरण पर वापस चला जाता है. ऐसा तब तक होता है, जब तक सभी पेज और संसाधन डाउनलोड किया गया.
चरण 2 में, ब्राउज़र ऐसी सभी सामग्री को प्रोसेस करता है, जो बदल गए हैं. यह किसी भी नए एलिमेंट की स्टाइल और लेआउट को अपडेट करता है. साथ ही, नए अपडेट की वजह से शायद इनमें ज़्यादा बदलाव हुए हों. यह रेंडर हो रहा है काम. इसमें समय लगता है.
अब देखें कि अगर आप इनमें से हर एक पर content-visibility: auto लगाते हैं, तो क्या होता है
ब्लॉग में अलग-अलग स्टोरी. सामान्य लूप समान होता है: ब्राउज़र
पेज के कई हिस्सों को डाउनलोड और रेंडर करता है. हालांकि, अंतर
काम किया है जो वह दूसरे चरण में करता है.
कॉन्टेंट दिखने की सुविधा की मदद से, यह फ़िलहाल, उपयोगकर्ता को दिख रहे हों (ये स्क्रीन पर दिखते हैं). हालांकि, प्रोसेस करते समय जो पूरी तरह से स्क्रीन पर दिखाई नहीं देती है, ब्राउज़र रेंडरिंग के काम को छोड़ देगा और सिर्फ़ एलिमेंट बॉक्स की स्टाइल और लेआउट की जानकारी दे सकते हैं.
इस पेज को लोड करने का परफ़ॉर्मेंस ऐसा होगा, जैसे कि इसमें पूरी स्क्रीन पर कॉन्टेंट मौजूद हो स्टोरी और हर ऑफ़-स्क्रीन स्टोरी के लिए खाली बॉक्स. इसकी परफ़ॉर्मेंस काफ़ी अच्छी पहले से बेहतर है. रेंडर करने की लागत के मुकाबले 50% या उससे ज़्यादा की कमी लोड हो रहा है. अपने उदाहरण में, हम 232 मि॰से॰ के रेंडर होने में लगने वाले समय से लेकर, रेंडरिंग में 30 मि॰से॰ का समय लगता है. यह परफ़ॉर्मेंस में 7 गुना बढ़ोतरी है.
इन फ़ायदों का फ़ायदा पाने के लिए आपको क्या करना होगा? सबसे पहले, हम कॉन्टेंट को सेक्शन में बांटें:
content-visibility: auto पाने के लिए, story क्लास के साथ कॉन्टेंट को अलग-अलग सेक्शन में छोटा करने का उदाहरण. कोडपेन पर डेमो देखेंइसके बाद, हम सेक्शन पर यह स्टाइल नियम लागू करते हैं:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
contain-intrinsic-size के साथ एलिमेंट का सामान्य साइज़ तय करना
content-visibility के संभावित फ़ायदों को पाने के लिए, ब्राउज़र
कॉन्टेंट के रेंडरिंग के नतीजों को पक्का करने के लिए, साइज़ का कंटेनमेंट लागू करना ज़रूरी है
एलिमेंट के साइज़ पर कोई असर नहीं पड़ता. इसका मतलब है कि एलिमेंट
दिखेगा, जैसे कि वह खाली था. अगर एलिमेंट की ऊंचाई तय नहीं की गई है
तो इसकी ऊंचाई 0 होगी.
यह सही नहीं होगा, क्योंकि स्क्रोलबार का साइज़ शिफ़्ट हो जाएगा, हर उस कहानी पर निर्भर करते हैं जिसकी लंबाई शून्य से कम है.
अच्छी बात यह है कि सीएसएस, contain-intrinsic-size नाम की एक और प्रॉपर्टी उपलब्ध कराती है, जिसमें
असरदार तरीके से एलिमेंट का नैचुरल साइज़ तय करता है, अगर एलिमेंट
साइज़ कंटेनमेंट से प्रभावित. हमारे उदाहरण में, हम इसे 1000px पर इस तरह सेट कर रहे हैं:
सेक्शन की ऊंचाई और चौड़ाई का अनुमान.
इसका मतलब है कि यह इस तरह से दिखेगा, जैसे कि इसके एक ही बच्चे के होने की वजह से " मूल आकार" वाला एक बच्चा हो
करते हैं, जिससे यह पक्का होता है कि आपके बिना साइज़ के divs अब भी जगह ले सकें.
contain-intrinsic-size, रेंडर किए गए कॉन्टेंट के बजाय, प्लेसहोल्डर साइज़ की तरह काम करता है.
Chromium 98 और उसके बाद के वर्शन में, एक नया auto उपलब्ध है
contain-intrinsic-size के लिए कीवर्ड. तय किए जाने पर, ब्राउज़र याद रखेगा
अगर पिछली बार रेंडर किया गया साइज़ कोई है, तो उसका साइज़ और डेवलपर के दिए गए प्लेसहोल्डर की जगह उसका इस्तेमाल करें
साइज़. उदाहरण के लिए, अगर आपने contain-intrinsic-size: auto 300px बताया है, तो
एलिमेंट हर डाइमेंशन में 300px के असल साइज़ के साथ शुरू होगा. हालांकि, ऐसा सिर्फ़ एक बार किया जाएगा
एलिमेंट का कॉन्टेंट रेंडर किया जाता है, तो वह रेंडर किए गए असल साइज़ में बना रहेगा.
रेंडरिंग के साइज़ में बाद में होने वाले बदलाव भी याद रखे जाएंगे. इसका मतलब है कि अगर
content-visibility: auto वाले एलिमेंट को स्क्रोल करें. इसके बाद, उसे वापस स्क्रोल करें
ऑफ़स्क्रीन करता है, तो यह अपने आप अपनी आदर्श चौड़ाई और ऊंचाई बनाए रखेगा और वापस नहीं आएगा
प्लेसहोल्डर के साइज़ के हिसाब से. यह सुविधा खास तौर पर इनफ़ाइनाइट स्क्रोलर,
यह सुविधा, समय के साथ साइज़ का अनुमान लगाने वाली सुविधा को अपने-आप बेहतर बना सकती है.
उस पेज को एक्सप्लोर करता है.
content-visibility: hidden का इस्तेमाल करके कॉन्टेंट छिपाया जा रहा है
अगर आपको कॉन्टेंट को रेंडर होने से पहले ही छोड़ना है, तो इससे कोई फ़र्क़ नहीं पड़ता है कि वह कॉन्टेंट है या नहीं
कैश मेमोरी में सेव की गई रेंडरिंग की स्थिति का फ़ायदा उठाते समय, स्क्रीन पर दिखता है? दर्ज करें:
content-visibility: hidden.
content-visibility: hidden प्रॉपर्टी से आपको ये सभी फ़ायदे मिलते हैं
content-visibility: auto की तरह, रेंडर नहीं किया गया कॉन्टेंट और कैश मेमोरी में सेव की गई रेंडरिंग की स्थिति
करते हैं. हालांकि, auto के उलट, यह अपने-आप शुरू नहीं होता
ऑन-स्क्रीन रेंडर होने में मदद मिलती है.
इससे आपको ज़्यादा कंट्रोल मिलता है, जिससे किसी एलिमेंट का कॉन्टेंट छिपाया जा सकता है और तो उन्हें तुरंत दिखाया जाएगा.
एलिमेंट का कॉन्टेंट छिपाने के अन्य सामान्य तरीकों से इसकी तुलना करें:
display: none: एलिमेंट को छिपा देता है और उसकी रेंडरिंग स्थिति को खत्म कर देता है. यह इसका मतलब है कि एंड स्क्रीन पर किसी एलिमेंट को दिखाना उतना ही महंगा है जितना कि एक ही कॉन्टेंट.visibility: hidden: एलिमेंट को छिपा देता है और उसकी रेंडरिंग स्थिति को बनाए रखता है. यह दस्तावेज़ से तत्व को सही मायनों में नहीं हटाता, क्योंकि यह (और यह सबट्री है) पेज पर ज्यामितीय जगह लेता है और उस पर अब भी क्लिक किया जा सकता है. यह जब भी ज़रूरत हो, तब रेंडरिंग की स्थिति को अपडेट किया जाता है. भले ही, विज्ञापन को छिपाया गया हो.
दूसरी ओर, content-visibility: hidden, एलिमेंट को छिपा देता है
रेंडर होने की स्थिति को बनाए रखता है, ताकि अगर कोई बदलाव करने की ज़रूरत हो
होता है, वे केवल तभी होते हैं जब एलीमेंट फिर से दिखाया जाता है (यानी
content-visibility: hidden प्रॉपर्टी हटाई गई).
content-visibility: hidden के लिए इस्तेमाल के कुछ सबसे बेहतर उदाहरण ये हैं:
और मेज़रमेंट लेआउट की सुविधा भी मिलती है. वे इन चीज़ों के लिए भी बेहतर होते हैं
सिंगल पेज ऐप्लिकेशन (एसपीए). इनऐक्टिव ऐप्लिकेशन व्यू को डीओएम में इसके साथ छोड़ा जा सकता है
content-visibility: hidden ने अपना डिसप्ले बंद किया, लेकिन उनका रखरखाव नहीं किया
कैश मेमोरी में सेव किया गया डेटा है. इससे व्यू के फिर से चालू होने पर, तुरंत रेंडर हो जाता है.
इंटरैक्शन पर नेक्स्ट पेंट (आईएनपी) का असर
INP ऐसी मेट्रिक है जो इस बात का आकलन करती है कि पेज पर उपयोगकर्ता के इनपुट का भरोसेमंद तरीके से जवाब दिया जा सकता है या नहीं. मुख्य थ्रेड पर बहुत ज़्यादा काम होने की वजह से, रिस्पॉन्सिवनेस पर असर पड़ सकता है. इसमें रेंडरिंग काम भी शामिल है.
किसी पेज पर रेंडरिंग के काम को कम करने का मतलब यह है कि मुख्य थ्रेड को उपयोगकर्ता के इनपुट का जवाब देने का मौका दिया जा रहा है. इसमें रेंडरिंग का काम शामिल है. साथ ही, जहां ज़रूरी हो वहां content-visiblity सीएसएस प्रॉपर्टी का इस्तेमाल करने से, रेंडरिंग के काम में कमी आ सकती है. खास तौर पर, जब रेंडरिंग और लेआउट का ज़्यादातर काम पूरा हो जाता है.
रेंडरिंग के काम को कम करने से, आईएनपी पर सीधा असर पड़ता है. जब उपयोगकर्ता ऐसे पेज के साथ इंटरैक्ट करते हैं जो ऑफ़स्क्रीन एलिमेंट के लेआउट और रेंडरिंग को रोकने के लिए, content-visibility प्रॉपर्टी का सही तरीके से इस्तेमाल करता है, तो इसका मतलब है कि मुख्य थ्रेड को उपयोगकर्ताओं को दिखने वाले ज़रूरी काम का जवाब देने का मौका दिया जा रहा है. इससे कुछ स्थितियों में, आपके पेज का आईएनपी बेहतर हो सकता है.
नतीजा
content-visibility और सीएसएस कंटेनमेंट स्पेसिफ़िकेशन का मतलब है, बेहतरीन परफ़ॉर्मेंस
बूस्ट सीधे आपकी सीएसएस फ़ाइल पर आ रहे हैं. इस बारे में ज़्यादा जानकारी पाने के लिए,
प्रॉपर्टी के लिए, यहां देखें: