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

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 में पैनल. शुरू करने के लिए, यह तरीका अपनाएं:

1. DevTools खोलें.
2. परफ़ॉर्मेंस टैब पर जाएं.
3. Record पर क्लिक करें.
4. पेज के साथ इंटरैक्ट करना.

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

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

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

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

ब्लॉक, एलिमेंट, मॉडिफ़ायर का इस्तेमाल करना

कोडिंग करने के तरीके, जैसे कि BEM (Block, Element, मॉडिफ़ायर) चुनने वाले टूल की मदद से अपनी परफ़ॉर्मेंस को बेहतर बनाना. BEM का सुझाव है कि हर चीज़ की एक क्लास होती है और आपको हैरारकी की ज़रूरत होती है, भी क्लास के नाम में शामिल किया जाएगा:

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

अगर आपको मॉडिफ़ायर की ज़रूरत है, जैसा कि लास्ट-चाइल्ड वाले उदाहरण में दिखाया गया है, तो शामिल करें:

.list__list-item--last-child {
  /* Styles */
}

स्ट्रक्चर के आधार पर, सीएसएस को व्यवस्थित करने के लिए बीईएम एक अच्छा तरीका है के नज़रिए से बनाया जा सकता है और स्टाइल लुकअप के आसान होने की वजह से इसका प्रमोशन किया जा सकता है.

अगर आपको बीईएम पसंद नहीं है, तो अपनी सीएसएस से संपर्क करने के दूसरे तरीके भी हैं. हालांकि, आपको शुरू करने से पहले, उनकी परफ़ॉर्मेंस और एर्गोनॉमिक्स का आकलन करें.

संसाधन

• Blink में स्टाइल का अमान्य होना
• बीईएम (ब्लॉक, एलिमेंट, मॉडिफ़ायर)

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