JavaScript की वजह से अक्सर विज़ुअल बदलाव होते हैं. कभी-कभी यह स्टाइल में बदलाव करके सीधे तौर पर बदलाव करता है, तो कभी-कभी कैलकुलेशन के ज़रिए बदलाव करता है. जैसे, डेटा खोजना या सॉर्ट करना. गलत समय पर या लंबे समय तक चलने वाला JavaScript, परफ़ॉर्मेंस से जुड़ी समस्याओं की एक सामान्य वजह हो सकती है. इसलिए, आपको इसका असर कम करने की कोशिश करनी चाहिए.
स्टाइल कैलकुलेशन
डीओएम में एलिमेंट जोड़ने और हटाने, एट्रिब्यूट, क्लास बदलने या ऐनिमेशन चलाने से, ब्राउज़र को एलिमेंट की स्टाइल फिर से कैलकुलेट करनी पड़ती हैं. साथ ही, कई मामलों में पेज के कुछ या पूरे हिस्से का लेआउट भी फिर से कैलकुलेट करना पड़ता है. इस प्रोसेस को स्टाइल कैलकुलेशन कहते हैं.
ब्राउज़र, स्टाइल कैलकुलेट करने के लिए, मैचिंग सिलेक्टर का सेट बनाता है. इससे यह तय किया जाता है कि किसी एलिमेंट पर कौनसी क्लास, स्यूडो-सिलेक्टर, और आईडी लागू होती हैं. इसके बाद, यह मैचिंग सिलेक्टर से स्टाइल के नियमों को प्रोसेस करता है और यह पता लगाता है कि एलिमेंट की फ़ाइनल स्टाइल क्या हैं.
इंटरैक्शन में लगने वाले समय में, स्टाइल को फिर से कैलकुलेट करने की भूमिका
पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी), उपयोगकर्ता के अनुभव पर आधारित रनटाइम परफ़ॉर्मेंस मेट्रिक है. इससे यह आकलन किया जाता है कि कोई पेज, उपयोगकर्ता के इनपुट का जवाब देने के मामले में कुल मिलाकर कितना रिस्पॉन्सिव है. इससे, इंटरैक्शन में लगने वाले समय का आकलन किया जाता है. यह समय, उपयोगकर्ता के पेज के साथ इंटरैक्ट करने से लेकर ब्राउज़र के अगले फ़्रेम को पेंट करने तक का होता है. इस फ़्रेम में, उपयोगकर्ता इंटरफ़ेस में किए गए विज़ुअल अपडेट दिखते हैं.
किसी इंटरैक्शन का एक अहम हिस्सा, अगले फ़्रेम को पेंट करने में लगने वाला समय होता है. अगले फ़्रेम को दिखाने के लिए किया गया रेंडरिंग का काम कई हिस्सों से मिलकर बना होता है. इनमें पेज की स्टाइल का कैलकुलेशन भी शामिल है. यह कैलकुलेशन, लेआउट, पेंट, और कंपोज़िटिंग के काम से ठीक पहले होता है. इस गाइड में, स्टाइल कैलकुलेशन की लागत पर फ़ोकस किया गया है. हालांकि, इंटरैक्शन की कुल रेंडरिंग अवधि को कम करने से, उसकी कुल लेटेन्सी भी कम हो जाती है.
अपने सिलेक्टर की जटिलता कम करें
सीएसएस सिलेक्टर को आसान बनाने से, आपके पेज की स्टाइल कैलकुलेशन की स्पीड बढ़ सकती है. सबसे आसान सिलेक्टर, सीएसएस में सिर्फ़ एक क्लास के नाम से किसी एलिमेंट को रेफ़रंस देते हैं:
.title {
/* styles */
}
हालांकि, किसी भी प्रोजेक्ट के बढ़ने पर, उसमें ज़्यादा जटिल सीएसएस की ज़रूरत होती है. ऐसे में, आपको ऐसे सिलेक्टर मिल सकते हैं जो इस तरह दिखते हैं:
.box:nth-last-child(-n+1) .title {
/* styles */
}
यह तय करने के लिए कि ये स्टाइल पेज पर कैसे लागू होती हैं, ब्राउज़र को यह सवाल पूछना पड़ता है कि "क्या यह title क्लास वाला एलिमेंट है, जिसका पैरंट box क्लास वाला एलिमेंट है और जो अपने पैरंट एलिमेंट का माइनस-एनथ-प्लस-1 चाइल्ड है? ब्राउज़र को यह पता लगाने में कुछ समय लग सकता है. इसे आसान बनाने के लिए, सिलेक्टर को ज़्यादा खास क्लास के नाम में बदला जा सकता है:
.final-box-title {
/* styles */
}
बदली गई क्लास के नाम अजीब लग सकते हैं, लेकिन इनसे ब्राउज़र का काम आसान हो जाता है. उदाहरण के लिए, पिछले वर्शन में, ब्राउज़र को यह जानने के लिए कि कोई एलिमेंट अपने टाइप का आखिरी एलिमेंट है, उसे पहले यह जानना होगा कि उसके बाद आने वाले एलिमेंट, nth-last-child हो सकते हैं या नहीं. इसके लिए, उसे अन्य सभी एलिमेंट के बारे में जानना होगा. यह, किसी एलिमेंट को सिर्फ़ उसकी क्लास के नाम के आधार पर सिलेक्टर से मैच करने की तुलना में, ज़्यादा कंप्यूटेशन वाला काम हो सकता है.
स्टाइल किए जा रहे एलिमेंट की संख्या कम करें
परफ़ॉर्मेंस से जुड़ी एक और ज़रूरी बात यह है कि किसी एलिमेंट में बदलाव होने पर, कितना काम करना पड़ता है. यह बात, सिलेक्टर की जटिलता से ज़्यादा अहम होती है.
आम तौर पर, कंप्यूटेड एलिमेंट की स्टाइल कैलकुलेट करने की सबसे खराब स्थिति में लागत, एलिमेंट की संख्या को सिलेक्टर की संख्या से गुणा करने पर मिलती है. ऐसा इसलिए, क्योंकि ब्राउज़र को हर स्टाइल के हिसाब से, हर एलिमेंट की कम से कम एक बार जांच करनी होती है, ताकि यह पता चल सके कि वह स्टाइल उस एलिमेंट पर लागू होती है या नहीं.
स्टाइल कैलकुलेशन, पूरे पेज को अमान्य करने के बजाय, सीधे कुछ एलिमेंट को टारगेट कर सकती हैं. आजकल के ब्राउज़र में, यह समस्या कम होती है, क्योंकि ब्राउज़र को हमेशा उन सभी एलिमेंट की जांच करने की ज़रूरत नहीं होती जिन पर किसी बदलाव का असर पड़ सकता है. वहीं, पुराने ब्राउज़र को ऐसे कामों के लिए हमेशा ऑप्टिमाइज़ नहीं किया जाता. आपको अमान्य किए गए एलिमेंट की संख्या कम करनी चाहिए.
स्टाइल को फिर से कैलकुलेट करने की लागत मेज़र करना
ब्राउज़र में, स्टाइल को फिर से कैलकुलेट करने की लागत को मेज़र करने के दो तरीके हैं. इनमें से हर तरीका, इस बात पर निर्भर करता है कि आपको अपने डेवलपमेंट एनवायरमेंट में ब्राउज़र में इसे मेज़र करना है या अपनी वेबसाइट पर असल उपयोगकर्ताओं के लिए, इस प्रोसेस में लगने वाले समय को मेज़र करना है.
Chrome DevTools में, स्टाइल को फिर से कैलकुलेट करने की लागत मेज़र करना
स्टाइल को फिर से कैलकुलेट करने की लागत मेज़र करने का एक तरीका, Chrome DevTools में परफ़ॉर्मेंस पैनल का इस्तेमाल करना है. शुरू करने के लिए, यह तरीका अपनाएं:
- DevTools खोलें.
- परफ़ॉर्मेंस टैब पर जाएं.
- सिलेक्टर के आंकड़े चेकबॉक्स को चुनें. यह ज़रूरी नहीं है.
- रिकॉर्ड करें पर क्लिक करें.
- पेज के साथ इंटरैक्ट करें.
रिकॉर्डिंग बंद करने पर, आपको कुछ ऐसी इमेज दिखेगी:
सबसे ऊपर मौजूद स्ट्रिप, फ़्लेम चार्ट का छोटा वर्शन है. इसमें फ़्रेम प्रति सेकंड भी प्लॉट किए जाते हैं. स्ट्रिप में गतिविधि जितनी नीचे की ओर होती है, ब्राउज़र उतनी ही तेज़ी से फ़्रेम पेंट करता है. अगर आपको फ़्लेम चार्ट सबसे ऊपर लाल बार के साथ दिखता है, तो इसका मतलब है कि आपके पास ऐसा काम है जिसकी वजह से फ़्रेम लंबे समय तक चलते हैं.
स्क्रोल करने जैसे इंटरैक्शन के दौरान, लंबे समय तक चलने वाले फ़्रेम पर ज़्यादा ध्यान देना चाहिए. अगर आपको बैंगनी रंग का बड़ा ब्लॉक दिखता है, तो गतिविधि को ज़ूम इन करें और स्टाइल को फिर से कैलकुलेट करें लेबल वाले किसी भी काम को चुनें. इससे, स्टाइल को फिर से कैलकुलेट करने के संभावित रूप से महंगे काम के बारे में ज़्यादा जानकारी मिलेगी.
इवेंट पर क्लिक करने से, उसका कॉल स्टैक दिखता है. अगर रेंडरिंग का काम, उपयोगकर्ता के इंटरैक्शन की वजह से हुआ है, तो यह उस JavaScript को कॉल करता है जिसने स्टाइल में बदलाव को ट्रिगर किया है. इससे यह भी पता चलता है कि बदलाव से कितने एलिमेंट पर असर पड़ा है. इस मामले में, 900 से ज़्यादा एलिमेंट पर असर पड़ा है. साथ ही, यह भी पता चलता है कि स्टाइल कैलकुलेशन में कितना समय लगा. इस जानकारी का इस्तेमाल करके, अपने कोड में समस्या को ठीक करने की कोशिश की जा सकती है.
अगर आपने ट्रेस करने से पहले, परफ़ॉर्मेंस पैनल की सेटिंग में the सिलेक्टर के आंकड़े चेकबॉक्स को चुना है, तो ट्रेस में सबसे नीचे वाले पैनल में, उसी नाम का एक और टैब दिखेगा.
इस पैनल में, हर सिलेक्टर की तुलनात्मक लागत के बारे में काम का डेटा मिलता है. इससे, महंगे सीएसएस सिलेक्टर की पहचान की जा सकती है.
ज़्यादा जानकारी के लिए, सीएसएस सिलेक्टर के आंकड़ों का दस्तावेज़ देखें.
असल उपयोगकर्ताओं के लिए, स्टाइल को फिर से कैलकुलेट करने की लागत मेज़र करना
अगर आपको यह जानना है कि आपकी वेबसाइट के
असल उपयोगकर्ताओं के लिए, स्टाइल को फिर से कैलकुलेट करने में कितना समय लगता है, तो Long Animation Frames API
आपको ऐसा करने के लिए ज़रूरी टूल देता है. इस एपीआई का डेटा, the
web-vitals JavaScript लाइब्रेरी,
में जोड़ा गया है. इसमें, स्टाइल को फिर से कैलकुलेट करने में लगने वाला समय भी शामिल है.
अगर आपको लगता है कि किसी इंटरैक्शन की प्रस्तुति में होने वाली देरी, पेज के आईएनपी में अहम योगदान देती है, तो आपको यह पता लगाना होगा कि उस समय का कितना हिस्सा, पेज पर स्टाइल को फिर से कैलकुलेट करने में लगता है. ज़्यादा जानकारी के लिए, फ़ील्ड में स्टाइल को फिर से कैलकुलेट करने में लगने वाले समय को मेज़र करने का तरीका पढ़ें.