content-vision: वह नई सीएसएस प्रॉपर्टी, जो आपकी रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाती है

ऑफ़स्क्रीन कॉन्टेंट को रेंडर करने की प्रोसेस को स्किप करके, लोड होने के शुरुआती समय में सुधार करें.

Una Kravets

Jeremy Wagner

Vladimir Levin

content-visibility प्रॉपर्टी, Chromium 85 में लॉन्च की जा रही है. यह पेज लोड की परफ़ॉर्मेंस को बेहतर बनाने के लिए, सबसे असरदार नई CSS प्रॉपर्टी में से एक हो सकती है. content-visibility चालू करता है उपयोगकर्ता एजेंट को लेआउट और पेंटिंग जैसे एलिमेंट को रेंडर करने के काम को स्किप करना होगा, ज़रूरत पड़ने तक. क्योंकि रेंडरिंग को स्किप कर दिया जाता है, अगर आपके कॉन्टेंट स्क्रीन पर नहीं दिखता है और content-visibility प्रॉपर्टी का इस्तेमाल करने पर उपयोगकर्ता के पेजों को ज़्यादा तेज़ी से लोड किया जाता है. इससे स्क्रीन पर मौजूद कॉन्टेंट के साथ तेज़ी से इंटरैक्ट किया जा सकता है. बहुत व्यवस्थित.

ब्राउज़र समर्थन

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" को भी जोड़ना न भूलें. इससे इन गड़बड़ियों की संभावना और बढ़ सकती है.

उदाहरण: ट्रैवल ब्लॉग

आम तौर पर, ट्रैवल ब्लॉग में कुछ तस्वीरों के साथ कहानियों का एक सेट और जानकारी देने वाला कुछ टेक्स्ट होता है. यहां बताया गया है कि किसी सामान्य ब्राउज़र पर जब वह नेविगेट करता है, तो क्या होता है यात्रा ब्लॉग:

1. नेटवर्क से पेज का एक हिस्सा डाउनलोड किया गया है. इसके अलावा, सभी ज़रूरी अपडेट भी जोड़े गए हैं संसाधन.
2. यह ब्राउज़र स्टाइल और पेज का पूरा कॉन्टेंट दिखाता है ऐसा इसलिए, क्योंकि उपयोगकर्ता को वह कॉन्टेंट दिखेगा या नहीं.
3. ब्राउज़र, पहले चरण पर वापस चला जाता है. ऐसा तब तक होता है, जब तक सभी पेज और संसाधन डाउनलोड किया गया.

चरण 2 में, ब्राउज़र ऐसी सभी सामग्री को प्रोसेस करता है, जो बदल गए हैं. यह किसी भी नए एलिमेंट की स्टाइल और लेआउट को अपडेट करता है. साथ ही, नए अपडेट की वजह से शायद इनमें ज़्यादा बदलाव हुए हों. यह रेंडरिंग का काम है. इसमें समय लगता है.

अब देखें कि अगर आप इनमें से हर एक पर content-visibility: auto लगाते हैं, तो क्या होता है ब्लॉग में अलग-अलग स्टोरी. सामान्य लूप समान होता है: ब्राउज़र पेज के कई हिस्सों को डाउनलोड और रेंडर करता है. हालांकि, अंतर काम किया है जो वह दूसरे चरण में करता है.

कॉन्टेंट दिखने की सुविधा की मदद से, यह फ़िलहाल, उपयोगकर्ता को दिख रहे हों (ये स्क्रीन पर दिखते हैं). हालांकि, प्रोसेस करते समय जो पूरी तरह से स्क्रीन पर दिखाई नहीं देती है, ब्राउज़र रेंडरिंग के काम को छोड़ देगा और सिर्फ़ एलिमेंट बॉक्स की स्टाइल और लेआउट की जानकारी दे सकते हैं.

इस पेज को लोड करने की परफ़ॉर्मेंस वैसी ही होगी, जैसे कि इसमें स्क्रीन पर पूरी तरह से दिखने वाली खबरें और स्क्रीन पर न दिखने वाली हर खबर के लिए खाली बॉक्स हों. इसकी परफ़ॉर्मेंस काफ़ी अच्छी पहले से बेहतर है. रेंडर करने की लागत के मुकाबले 50% या उससे ज़्यादा की कमी लोड हो रहा है. अपने उदाहरण में, हम 232 मि॰से॰ के रेंडर होने में लगने वाले समय से लेकर, रेंडरिंग में 30 मि॰से॰ का समय लगता है. इसका मतलब है कि परफ़ॉर्मेंस में सात गुना की बढ़ोतरी हुई है.

इन फ़ायदों का फ़ायदा पाने के लिए आपको क्या करना होगा? सबसे पहले, हम कॉन्टेंट को सेक्शन में बांटते हैं:

इसके बाद, हम सेक्शन पर यह स्टाइल नियम लागू करते हैं:

.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 और उसके बाद के वर्शन में, contain-intrinsic-size के लिए एक नया auto कीवर्ड है. तय किए जाने पर, ब्राउज़र याद रखेगा अगर पिछली बार रेंडर किया गया साइज़ कोई है, तो उसका साइज़ और डेवलपर के दिए गए प्लेसहोल्डर की जगह उसका इस्तेमाल करें साइज़. उदाहरण के लिए, अगर आपने 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 और सीएसएस कंटेनमेंट स्पेसिफ़िकेशन का मतलब है कि बेहतरीन परफ़ॉर्मेंस बूस्ट सीधे आपकी सीएसएस फ़ाइल पर आ रहे हैं. इन प्रॉपर्टी के बारे में ज़्यादा जानकारी के लिए, ये देखें:

• सीएसएस कंटेनमेंट की खास जानकारी
• सीएसएस पर MDN Docs कंटेनमेंट
• CSSWG के ड्राफ़्ट