JavaScript का इस्तेमाल अक्सर विज़ुअल बदलावों को ट्रिगर करने के लिए किया जाता है. कभी-कभी सीधे स्टाइल में बदलाव करने की ज़रूरत होती है. कभी-कभी कैलकुलेशन के ज़रिए विज़ुअल बदलाव किए जाते हैं. जैसे, कुछ डेटा खोजना या क्रम से लगाना. गलत समय पर या लंबे समय तक चलने वाला JavaScript, परफ़ॉर्मेंस से जुड़ी समस्याओं की आम वजह हो सकती है. इसलिए, जहां भी हो सके, आपको JavaScript के असर को कम करना चाहिए.
एलिमेंट जोड़ने और हटाने, एट्रिब्यूट, क्लास बदलने या ऐनिमेशन के ज़रिए डीओएम में बदलाव करने से, ब्राउज़र, एलिमेंट स्टाइल फिर से कैलकुलेट करता है. साथ ही, कई मामलों में पेज या उसके कुछ हिस्सों को लेआउट (या रीफ़्लो) करता है. इस प्रोसेस को कंप्यूटेड स्टाइल कैलकुलेशन कहा जाता है.
कंप्यूटिंग स्टाइल का पहला हिस्सा, मिलते-जुलते सिलेक्टर का सेट तैयार करना होता है. यह ब्राउज़र यह तय करता है कि दिए गए किसी एलिमेंट पर कौनसी क्लास, सूडो-सिलेक्टर, और आईडी लागू होते हैं.
प्रोसेस के दूसरे हिस्से में, मिलते-जुलते सिलेक्टर के स्टाइल के सभी नियम लेकर, यह पता लगाना शामिल है कि एलिमेंट की फ़ाइनल स्टाइल कौनसी है.
खास जानकारी
- स्टाइल कैलकुलेशन की लागत कम करने से, इंटरैक्शन के इंतज़ार में लगने वाला समय कैसे कम हो सकता है.
- अपने सिलेक्टर की जटिलता को कम करें; क्लास के हिसाब से काम करने वाले तरीके (उदाहरण के लिए, BEM) का इस्तेमाल करें.
- उन एलिमेंट की संख्या कम करें जिन पर स्टाइल कैलकुलेशन की गिनती की जानी चाहिए.
स्टाइल रीकैलकुलेशन का समय और इंटरैक्शन का इंतज़ार का समय
इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी), उपयोगकर्ता के हिसाब से बनाई गई रनटाइम परफ़ॉर्मेंस मेट्रिक है. इससे यह पता चलता है कि कोई पेज, उपयोगकर्ता के इनपुट के हिसाब से कितना रिस्पॉन्सिव है. इस मेट्रिक की मदद से, इंटरैक्शन के इंतज़ार में लगने वाले समय का आकलन किया जाता है. यह उपयोगकर्ता के पेज से इंटरैक्ट करने से लेकर, यूज़र इंटरफ़ेस में किए गए विज़ुअल अपडेट को दिखाने वाले अगले फ़्रेम को पेंट करने तक के समय को मापता है.
अगले फ़्रेम को पेंट करने में लगने वाला समय, इंटरैक्शन का एक अहम हिस्सा है. अगले फ़्रेम को प्रज़ेंट करने के लिए किया गया रेंडर करने का काम, कई हिस्सों में मिलकर बनता है. इसमें, लेआउट, पेंट, और कंपोज़िटिंग के काम से ठीक पहले होने वाली पेज स्टाइल की गणना भी शामिल है. हालांकि, इस लेख में सिर्फ़ स्टाइल कैलकुलेशन की लागत दी गई है, लेकिन इस बात पर ज़ोर देना ज़रूरी है कि इंटरैक्शन के लिए रेंडर करने के फ़ेज़ के किसी भी हिस्से को कम करने से, कैलकुलेशन के स्टाइल में लगने वाला कुल समय कम हो जाएगा.
अपने सिलेक्टर की जटिलता को कम करें
सबसे आसान मामले में, सीएसएस में सिर्फ़ एक क्लास से किसी एलिमेंट का रेफ़रंस दिया जा सकता है:
.title {
/* styles */
}
हालांकि, किसी भी प्रोजेक्ट के बढ़ने के साथ-साथ, सीएसएस देने वाली प्रोसेस ज़्यादा जटिल हो सकती है. इसकी वजह से, यहां ऐसे सिलेक्टर मिल सकते हैं जो कुछ इस तरह दिखते हैं:
.box:nth-last-child(-n+1) .title {
/* styles */
}
पेज पर ये स्टाइल कैसे लागू होती हैं, यह जानने के लिए ब्राउज़र को यह जानना पड़ता है कि "क्या यह title की क्लास वाला एलिमेंट है और उसके पैरंट में box की क्लास वाला 1वां चाइल्ड और 1 एलिमेंट है?" इसे समझने में काफ़ी समय हो सकता है. यह काफ़ी समय लग सकता है. यह काफ़ी समय लग सकता है. यह काफ़ी समय तक इस्तेमाल किया जा सकता है, जो इस्तेमाल किए गए ब्राउज़र और इस्तेमाल किए गए सिलेक्टर पर निर्भर करता है. इसके बजाय, सिलेक्टर को सही तरीके से क्लास में बदला जा सकता है:
.final-box-title {
/* styles */
}
आपको क्लास के नाम को लेकर समस्या हो सकती है, लेकिन ब्राउज़र के लिए यह काम बहुत आसान हो गया है. पिछले वर्शन में, यह जानने के लिए कि एलिमेंट अपना आखिरी टाइप है, ब्राउज़र को सबसे पहले अन्य सभी एलिमेंट के बारे में सब कुछ पता होना चाहिए. साथ ही, यह भी पता होना चाहिए कि क्या इसके बाद आने वाला कोई एलिमेंट, nth-last-child होगा, जो सिलेक्टर की क्लास मैच करने की तुलना में काफ़ी महंगा है.
स्टाइल किए जा रहे एलिमेंट की संख्या कम करें
परफ़ॉर्मेंस पर एक अन्य बात—जो आम तौर पर स्टाइल को अपडेट करने के कई तरीकों के लिए सबसे अहम है—वह है एलिमेंट में बदलाव होने पर ज़्यादा काम करना.
सामान्य शब्दों में कहें, तो एलिमेंट की कंप्यूट की गई स्टाइल का कैलकुलेशन करने के लिए, सिलेक्टर की संख्या और एलिमेंट की संख्या का गुणा सबसे ज़्यादा किया जाता है. इसकी वजह यह है कि हर एलिमेंट की हर स्टाइल के लिए कम से कम एक बार जांच करना ज़रूरी है, ताकि यह पता लगाया जा सके कि वह मैच करता है या नहीं.
स्टाइल कैलकुलेशन के दौरान पूरे पेज को अमान्य नहीं किया जाता, बल्कि अक्सर कुछ एलिमेंट को ही टारगेट किया जाता है. आधुनिक ब्राउज़र में, यह समस्या कम होती है, क्योंकि ज़रूरी नहीं है कि ब्राउज़र को उन सभी एलिमेंट की जांच करने की ज़रूरत हो जिन पर किसी बदलाव से संभावित रूप से असर हुआ है. दूसरी ओर, पुराने ब्राउज़र ऐसे कामों के लिए ज़रूरी नहीं होते कि उन्हें ऑप्टिमाइज़ किया जाए. जहां भी हो सके, आपको अमान्य एलिमेंट की संख्या कम करनी चाहिए.
अपनी स्टाइल रीकैलकुलेशन लागत को मापें
स्टाइल को फिर से कैलकुलेट करने पर होने वाले खर्च को मेज़र करने का एक तरीका, Chrome DevTools में परफ़ॉर्मेंस पैनल का इस्तेमाल करना है. शुरू करने के लिए, DevTools खोलें. इसके बाद, परफ़ॉर्मेंस लेबल वाले टैब पर जाएं. इसके बाद, 'रिकॉर्ड करें' पर टैप करें और पेज के साथ इंटरैक्ट करें. रिकॉर्डिंग बंद करने पर, आपको नीचे दी गई इमेज की तरह कुछ दिखेगा:
सबसे ऊपर दी गई पट्टी एक मिनिएचर फ़्लेम चार्ट है, जिसमें फ़्रेम प्रति सेकंड भी दिखाया जाता है. गतिविधि, पट्टी के निचले हिस्से के जितने करीब होती है, ब्राउज़र उतने ही तेज़ फ़्रेम को पेंट करता है. अगर आपको सबसे ऊपर, फ़्लेम चार्ट के ऊपर लाल रंग की धारियां दिख रही हैं, तो इसका मतलब है कि लंबे समय तक चलने वाले फ़्रेम की वजह से ऐसा हो रहा है.
अगर स्क्रोलिंग जैसे इंटरैक्शन के दौरान आपका कोई फ़्रेम लंबे समय तक चलता है, तो इस बात की ज़्यादा जांच की जाएगी. अगर आपके पास बैंगनी रंग का बड़ा ब्लॉक है, तो गतिविधि पर ज़ूम इन करें. इसके बाद, स्टाइल को फिर से कैलकुलेट करने के लिए हो सकने वाले काम के बारे में ज़्यादा जानकारी पाने के लिए, स्टाइल की फिर से गिनती करें लेबल वाले किसी काम को चुनें.
इस ग्रेड में, स्टाइल को फिर से कैलकुलेट करने का काम लंबे समय तक चलता है, जिसमें सिर्फ़ 25 मि॰से॰ से ज़्यादा समय लग रहा है.
इवेंट पर क्लिक करने पर, आपको एक कॉल स्टैक दिया जाता है. अगर रेंडरिंग का काम किसी उपयोगकर्ता के इंटरैक्शन की वजह से हुआ था, तो आपकी JavaScript की उस जगह को हटा दिया जाएगा जो स्टाइल में बदलाव को ट्रिगर करती है. इसके अलावा, आपको उन एलिमेंट की संख्या भी दिखती है जिन पर बदलाव से असर पड़ा है—इस मामले में सिर्फ़ 900 से ज़्यादा एलिमेंट—और स्टाइल कैलकुलेशन में लगने वाला समय. अपने कोड में समस्या का समाधान खोजने के लिए, इस जानकारी का इस्तेमाल किया जा सकता है.
ब्लॉक, एलिमेंट, मॉडिफ़ायर का इस्तेमाल करना
BEM (Block, Element, Modifier) जैसी कोडिंग की अप्रोच असल में सिलेक्टर से मैच होने वाली परफ़ॉर्मेंस से जुड़े फ़ायदे पाएं, क्योंकि यह सुझाव देती है कि हर चीज़ में एक क्लास है और जहां आपको हैरारकी चाहिए, तो उसे भी क्लास के नाम से जोड़ दिया जाता है:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
अगर आपको किसी मॉडिफ़ायर की ज़रूरत है, जैसे कि ऊपर दिए गए उदाहरण में, जहां हम आखिरी बच्चे के लिए कुछ खास करना चाहते हैं, तो उसे इस तरह जोड़ें:
.list__list-item--last-child {
/* Styles */
}
अगर आपको अपनी सीएसएस को व्यवस्थित करने का सही तरीका चाहिए, तो बीईएम से शुरुआत करना एक अच्छा तरीका है. ऐसा, दोनों के नज़रिए से किया जा सकता है और स्टाइल लुकअप को आसान बनाने की वजह से भी यह तरीका बेहतर हो सकता है.
अगर आपको बीईएम पसंद नहीं है, तो अपनी सीएसएस का इस्तेमाल करने के दूसरे तरीके भी हैं. हालांकि, आपको इस तरीके को समझने के साथ-साथ परफ़ॉर्मेंस से जुड़ी बातों का आकलन भी करना चाहिए.
रिसॉर्स
Unsplash की हीरो इमेज, जिसे मार्कस स्पिस्क ने लिखा है.