शैली की गणना के दायरे और जटिलता को कम करें

Jeremy Wagner

Paul Lewis

JavaScript अक्सर विज़ुअल बदलावों के लिए ट्रिगर होता है. कभी-कभी इसकी वजह से फिर स्टाइल में बदलाव करके और कभी-कभी कैलकुलेशन के ज़रिए भी विज़ुअल में बदलाव हो सकते हैं, जैसे कि डेटा को खोजना या क्रम से लगाना. खराब समय के लिए या लंबे समय तक चलने वाला JavaScript, परफ़ॉर्मेंस से जुड़ी समस्याओं की आम वजह हो सकता है. इसके अलावा, इसलिए, कोशिश करनी चाहिए कि जहां भी हो सके वहां असर कम से कम हो.

स्टाइल का कैलकुलेशन

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

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

इंटरैक्शन लेटेंसी में स्टाइल को दोबारा कैलकुलेट करने की भूमिका

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

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

सिलेक्टर की मुश्किलें कम करें

सीएसएस सिलेक्टर को आसान बनाने से, आपके पेज की स्टाइल कैलकुलेशन को तेज़ी से करने में मदद मिल सकती है. सबसे आसान सिलेक्टर, सीएसएस में एलिमेंट को सिर्फ़ क्लास के नाम के साथ रेफ़र करते हैं:

.title {
  /* styles */
}

हालांकि, जैसे-जैसे कोई प्रोजेक्ट बढ़ता है, उसमें ज़्यादा जटिल सीएसएस की ज़रूरत होती है. इस वजह से, प्रोजेक्ट को खत्म किया जा सकता है उन सिलेक्टर को चुनें जो इस तरह दिखते हैं:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

यह तय करने के लिए कि पेज पर ये स्टाइल कैसे लागू होंगे, ब्राउज़र को "क्या यह एक ऐसा एलिमेंट है जिसकी title क्लास और उसकी पैरंट क्लास box, इसके पैरंट एलिमेंट का माइनस-nवां-प्लस-1 चाइल्ड एलिमेंट है? इसे ठीक करने की कोशिश की जा रही है ब्राउज़र को काम करने में कुछ समय लग सकता है. इसे आसान बनाने के लिए, सिलेक्टर का इस्तेमाल करें:

.final-box-title {
  /* styles */
}

ये बदले जाने वाले क्लास नाम अजीब लग सकते हैं, लेकिन इनसे ब्राउज़र का ज़्यादा आसान होता है. उदाहरण के लिए, पिछले वर्शन में, ब्राउज़र को एक एलिमेंट अपने टाइप का आखिरी एलिमेंट है. उसे सभी चीज़ों के बारे में पहले अन्य एलिमेंट जो यह तय करते हैं कि क्या इसके बाद आने वाला कोई एलिमेंट nth-last-child होना चाहिए. कंप्यूटर की मदद से, यह तरीका बहुत महंगा हो सकता है सिलेक्टर को किसी एलिमेंट से मैच करने की सुविधा मिलती है.

स्टाइल किए जा रहे एलिमेंट की संख्या कम करें

परफ़ॉर्मेंस पर एक और विचार—और अक्सर उस चीज़ को चुनने के लिए बहुत ज़रूरी होता है जो जटिलता—किसी एलिमेंट के बदलने पर होने वाले काम की संख्या है.

सामान्य शब्दों में, कंप्यूट किए गए एलिमेंट की स्टाइल को कैलकुलेट करने में सबसे खराब लागत तत्वों की संख्या का गुणा करने वाले की संख्या से गुणा किया जाता है, क्योंकि ब्राउज़र हर स्टाइल के लिए, हर एलिमेंट की कम से कम एक बार जांच करनी होगी, ताकि यह देखा जा सके कि मैच करता है.

स्टाइल कैलकुलेशन के तहत, अमान्य होने के बजाय कुछ एलिमेंट को सीधे तौर पर टारगेट किया जा सकता है पूरा पेज. मॉडर्न ब्राउज़र में, इसमें समस्या कम दिखती है, क्योंकि यह ज़रूरी नहीं है कि ब्राउज़र उन सभी एलिमेंट की जांच करे जो किसी बदलाव से प्रभावित हो सकते हैं. दूसरी ओर, पुराने ब्राउज़र ऐसे कामों के लिए हमेशा ऑप्टिमाइज़ नहीं होते. जगह अमान्य एलिमेंट की संख्या कम करें.

स्टाइल को रीकैलकुलेट करने की लागत का आकलन करें

कई तरीकों से स्टाइल रीकैलकुलेशन की लागत का आकलन किया जा सकता है ब्राउज़र खोलें. हर मेट्रिक, इस बात पर निर्भर करती है कि उसे ब्राउज़र में मेज़र करना है या नहीं या अगर आपको यह मेज़र करना है कि यह प्रोसेस लेने के लिए डिज़ाइन किया गया है.

Chrome DevTools में स्टाइल को रीकैलकुलेट करने की लागत मापें

स्टाइल को दोबारा कैलकुलेट करने की लागत को मेज़र करने का एक तरीका यह है कि आप परफ़ॉर्मेंस का इस्तेमाल करें Chrome DevTools में पैनल. शुरू करने के लिए, यह तरीका अपनाएं:

1. DevTools खोलें.
2. परफ़ॉर्मेंस टैब पर जाएं.
3. चुनने वाले के आंकड़े चेकबॉक्स पर सही का निशान लगाएं (ज़रूरी नहीं).
4. Record पर क्लिक करें.
5. पेज के साथ इंटरैक्ट करना.

रिकॉर्डिंग बंद करने पर, आपको इस इमेज की तरह कुछ दिखेगा:

सबसे ऊपर मौजूद पट्टी, एक मिनिएचर फ़्लेम चार्ट है. इसमें हर फ़्रेम के हिसाब से सेकंड. गतिविधि, पट्टी के निचले हिस्से के जितना पास होगी, उतनी ही तेज़ी से कार्रवाई होगी ब्राउज़र द्वारा फ़्रेम पेंट किए जा रहे हों. अगर आपको फ़्लेम चार्ट अगले लेवल पर दिखता है दिखाई देता है, जिसकी वजह से कोई काम आ रहा है. लंबे समय तक चलने वाले फ़्रेम शामिल हैं.

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

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

अगर आपने चुनने वाले के आंकड़े चेकबॉक्स पर सही का निशान लगाया है ट्रेस करने से पहले परफ़ॉर्मेंस पैनल सेटिंग में जाएं और फिर सबसे नीचे पैनल में उसी नाम से एक अतिरिक्त टैब होगा.

यह पैनल हर सिलेक्टर की लागत के बारे में काम का डेटा देता है. इससे आपको की पहचान करनी होगी.

ज़्यादा जानकारी के लिए, सीएसएस सिलेक्टर के आंकड़ों से जुड़ा दस्तावेज़ देखें.

असली उपयोगकर्ताओं के लिए, स्टाइल को रीकैलकुलेट करने की लागत मापें

अगर आपको यह जानने में दिलचस्पी है कि स्टाइल को रीकैलकुलेट करने में कितना समय लगता है आपकी वेबसाइट के असली उपयोगकर्ता, लंबी ऐनिमेशन फ़्रेम एपीआई ऐसा करने के लिए ज़रूरी टूल उपलब्ध हैं. इस API का डेटा web-vitals JavaScript लाइब्रेरी, इसमें स्टाइल रीकैलकुलेशन का समय भी शामिल है.

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

संसाधन

• Chrome DevTools में सिलेक्टर के आंकड़े
• Blink में स्टाइल का अमान्य होना
• इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी)
• web-vitals JavaScript लाइब्रेरी
• फ़ील्ड में स्टाइल को रीकैलकुलेट करने में लगने वाला समय मापें

मार्कस स्पाइस्क की किताब Unस्प्लैश की हीरो इमेज.