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 में परफ़ॉर्मेंस पैनल का इस्तेमाल करना. शुरू करने के लिए, यह तरीका अपनाएं:
- DevTools खोलें.
- परफ़ॉर्मेंस टैब पर जाएं.
- रिकॉर्ड करें पर क्लिक करें.
- पेज के साथ इंटरैक्ट करें.
रिकॉर्डिंग बंद करने पर, आपको इस इमेज की तरह कुछ दिखेगा:
सबसे ऊपर दी गई पट्टी एक मिनिएचर फ़्लेम चार्ट है, जो हर सेकंड में फ़्रेम भी प्लॉट करता है. गतिविधि पट्टी के निचले हिस्से के जितने करीब होती है, ब्राउज़र उतने ही तेज़ फ़्रेम को पेंट करता है. अगर आपको सबसे ऊपर, फ़्लेम चार्ट के ऊपर लाल रंग की पट्टियां दिख रही हैं, तो इसका मतलब है कि लंबे समय तक चलने वाले फ़्रेम की वजह से काम चल रहा है.
इंटरैक्शन के दौरान लंबे समय तक चलने वाले फ़्रेम, जैसे कि स्क्रोलिंग अच्छे से देखे जा सकते हैं. अगर आपको बैंगनी रंग का बड़ा ब्लॉक दिखता है, तो गतिविधि पर ज़ूम इन करें. इसके बाद, स्टाइल को फिर से कैलकुलेट करें लेबल वाले किसी भी टास्क को चुनें. इससे आपको स्टाइल रीकैलकुलेट करने के महंगे काम के बारे में ज़्यादा जानकारी मिलेगी.
इवेंट पर क्लिक करने से इसका कॉल स्टैक दिखता है. अगर रेंडरिंग का काम किसी उपयोगकर्ता के इंटरैक्शन की वजह से होता है, तो इसे उस JavaScript को शामिल किया जाता है जिसकी वजह से स्टाइल में बदलाव हुआ था. यह उन एलिमेंट की संख्या भी दिखाता है जिन पर बदलाव का असर हुआ है—इस मामले में सिर्फ़ 900 से भी ज़्यादा एलिमेंट हैं—और स्टाइल कैलकुलेशन में कितना समय लगा. अपने कोड में समस्या का समाधान ढूंढने के लिए, इस जानकारी का इस्तेमाल करें.
ब्लॉक, एलिमेंट, मॉडिफ़ायर का इस्तेमाल करना
बीईएम (ब्लॉक, एलिमेंट, मॉडिफ़ायर) जैसी कोडिंग की प्रोसेस में, सिलेक्टर की मैचिंग में शामिल किए गए परफ़ॉर्मेंस से जुड़े फ़ायदे मिलते हैं. बीईएम का सुझाव है कि हर चीज़ का एक ही क्लास होता है. साथ ही, जहां आपको हैरारकी की ज़रूरत होती है, उस हैरारकी को भी क्लास के नाम में शामिल कर लिया जाता है:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
अगर आपको मॉडिफ़ायर की ज़रूरत है, जैसा कि पिछले बच्चे वाले उदाहरण में बताया गया है, तो इसे इस तरह से जोड़ा जा सकता है:
.list__list-item--last-child {
/* Styles */
}
BEM, आपकी सीएसएस को स्ट्रक्चर के हिसाब से व्यवस्थित करने का एक अच्छा शुरुआती पॉइंट है. इसकी वजह यह है कि जिस स्टाइल लुकअप को प्रमोट किया जाता है वह कई तरह से आसान होता है.
अगर आपको बीईएम पसंद नहीं है, तो अपने सीएसएस से संपर्क करने के दूसरे तरीके भी हैं. हालांकि, शुरू करने से पहले आपको उनकी परफ़ॉर्मेंस और उनके काम करने के तरीके का आकलन कर लेना चाहिए.
रिसॉर्स
Unsplash की हीरो इमेज, जिसे मार्कस स्पिस्क ने लिखा है.