अगर साइटें और ऐप्लिकेशन ठीक से काम नहीं करते हैं, तो उपयोगकर्ताओं को इसकी जानकारी मिल जाती है. इसलिए, रेंडरिंग की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना ज़रूरी है!
आज के वेब उपयोगकर्ताओं को उम्मीद होती है कि वे जिन पेजों पर जाते हैं वे इंटरैक्टिव और आसान हों. इसलिए, आपको अपने समय और मेहनत को इसी पर ज़्यादा से ज़्यादा खर्च करना चाहिए. पेज न सिर्फ़ तेज़ी से लोड होने चाहिए, बल्कि अपने पूरे लाइफ़साइकल के दौरान उपयोगकर्ता के इनपुट का तुरंत जवाब भी देने चाहिए. असल में, उपयोगकर्ता अनुभव के इस पहलू को इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) मेट्रिक से मेज़र किया जाता है. अच्छी आईएनपी का मतलब है कि पेज, उपयोगकर्ता की ज़रूरतों के हिसाब से लगातार और भरोसेमंद तरीके से काम कर रहा था.
किसी पेज को तेज़ बनाने के लिए, उपयोगकर्ता के इंटरैक्शन के जवाब में, जितने ज़्यादा JavaScript कोड को लागू किया जाता है उतना ही पेज तेज़ लगता है. हालांकि, उपयोगकर्ताओं को यूज़र इंटरफ़ेस में विज़ुअल बदलावों का इंतज़ार होता है. यूज़र इंटरफ़ेस में विज़ुअल बदलाव, कई तरह के कामों की वजह से होते हैं. इन्हें अक्सर रेंडरिंग कहा जाता है. यह काम जल्द से जल्द होना चाहिए, ताकि उपयोगकर्ता को तेज़ और भरोसेमंद अनुभव मिल सके.
उपयोगकर्ता के इंटरैक्शन के तुरंत जवाब देने वाले पेज लिखने के लिए, आपको यह समझना होगा कि ब्राउज़र, एचटीएमएल, JavaScript, और सीएसएस को कैसे मैनेज करता है. साथ ही, यह भी पक्का करना होगा कि आपका कोड और शामिल किया गया तीसरे पक्ष का कोड, ज़्यादा से ज़्यादा बेहतर तरीके से काम करे.
डिवाइस के रीफ़्रेश रेट के बारे में जानकारी
ज़्यादातर डिवाइसों की स्क्रीन, एक सेकंड में 60 बार रीफ़्रेश होती है. हर रीफ़्रेश, आपको विज़ुअल आउटपुट दिखाता है. इसे आम तौर पर फ़्रेम कहा जाता है. इस वीडियो में, फ़्रेम के कॉन्सेप्ट के बारे में बताया गया है:
डिवाइस की स्क्रीन हमेशा एक ही दर से रीफ़्रेश होती है. हालांकि, ऐसा हो सकता है कि डिवाइस पर चलने वाले ऐप्लिकेशन, उस रीफ़्रेश रेट से मेल खाने के लिए ज़रूरत के मुताबिक फ़्रेम न जनरेट कर पाएं. उदाहरण के लिए, अगर कोई ऐनिमेशन या ट्रांज़िशन चल रहा है, तो स्क्रीन के हर बार रीफ़्रेश होने पर एक फ़्रेम जनरेट करने के लिए, ब्राउज़र को डिवाइस के रीफ़्रेश रेट से मेल खाना होगा.
आम तौर पर, डिसप्ले हर सेकंड में 60 बार रीफ़्रेश होता है. इसका मतलब है कि ब्राउज़र के पास हर फ़्रेम को जनरेट करने के लिए 16.66 मिलीसेकंड होते हैं. हालांकि, असल में ब्राउज़र में हर फ़्रेम के लिए अलग से समय लगता है. इसलिए, आपको 10 मिलीसेकंड में अपना सारा काम पूरा करना होगा. इस बजट को पूरा न करने पर, फ़्रेम रेट कम हो जाता है और पेज का कॉन्टेंट स्क्रीन पर झटके के साथ चलता है. इस तरह की समस्या को अक्सर जैंक कहा जाता है.
हालांकि, आपके टारगेट, किए जा रहे काम के हिसाब से बदलते रहते हैं. ऐनिमेशन के लिए, 10 मिलीसेकंड का थ्रेशोल्ड पूरा करना ज़रूरी है. इसमें स्क्रीन पर मौजूद ऑब्जेक्ट को दो बिंदुओं के बीच फ़्रेम की सीरीज़ में इंटरपोलेशन किया जाता है. यूज़र इंटरफ़ेस में अलग-अलग तरह के बदलाव करने के लिए, हमारा सुझाव है कि आप ऐसे बदलावों को एक तय समयसीमा में पूरा करें, ताकि उपयोगकर्ता को लगे कि बदलाव तुरंत हो गया है. ऐसे मामलों में, 100 मिलीसेकंड का आंकड़ा अक्सर दिया जाता है. हालांकि, आईएनपी मेट्रिक का "अच्छा" थ्रेशोल्ड 200 मिलीसेकंड या उससे कम होता है, ताकि अलग-अलग क्षमताओं वाले ज़्यादा से ज़्यादा डिवाइसों को शामिल किया जा सके.
आपके लक्ष्य चाहे जो भी हों, जैसे कि ऐनिमेशन में रुकावट से बचने के लिए ज़रूरी फ़्रेम जनरेट करना या यूज़र इंटरफ़ेस में जल्द से जल्द विज़ुअल में बदलाव करना, आपके काम के लिए ब्राउज़र की पिक्सल पाइपलाइन के काम करने का तरीका समझना ज़रूरी है.
पिक्सल पाइपलाइन
वेब डेवलपर के तौर पर, आपको इन पांच मुख्य चीज़ों के बारे में जानना चाहिए और इन पर ध्यान देना चाहिए. इन पांच क्षेत्रों पर आपका सबसे ज़्यादा कंट्रोल होता है. साथ ही, इनमें से हर एक पिक्सल-टू-स्क्रीन पाइपलाइन में एक अहम पॉइंट को दिखाता है:
- JavaScript: आम तौर पर, JavaScript का इस्तेमाल ऐसे कामों को मैनेज करने के लिए किया जाता है जिनसे यूज़र इंटरफ़ेस में विज़ुअल बदलाव होते हैं. उदाहरण के लिए, यह jQuery का
animateफ़ंक्शन, डेटासेट को क्रम से लगाना या पेज में DOM एलिमेंट जोड़ना हो सकता है. हालांकि, विज़ुअल में बदलाव करने के लिए JavaScript का इस्तेमाल करना ज़रूरी नहीं है: सीएसएस ऐनिमेशन, सीएसएस ट्रांज़िशन, और वेब ऐनिमेशन एपीआई, पेज के कॉन्टेंट को ऐनिमेट कर सकते हैं. - स्टाइल कैलकुलेशन: यह प्रोसेस यह पता लगाने की है कि मिलते-जुलते सिलेक्टर के आधार पर, कौनसे सीएसएस नियम किन एचटीएमएल एलिमेंट पर लागू होते हैं. उदाहरण के लिए,
.headlineएक सीएसएस सिलेक्टर का उदाहरण है. यह किसी भी एचटीएमएल एलिमेंट पर लागू होता है, जिसमेंclassएट्रिब्यूट की वैल्यू के तौर परheadlineक्लास शामिल हो. इसके बाद, नियमों के बारे में पता चलने पर उन्हें लागू किया जाता है और हर एलिमेंट के लिए फ़ाइनल स्टाइल का हिसाब लगाया जाता है. - लेआउट: जब ब्राउज़र को पता चल जाता है कि किसी एलिमेंट पर कौनसे नियम लागू होते हैं, तो वह पेज की ज्यामिति का हिसाब लगाना शुरू कर सकता है. जैसे, एलिमेंट कितना स्पेस लेते हैं और वे स्क्रीन पर कहां दिखते हैं. वेब के लेआउट मॉडल का मतलब है कि एक एलिमेंट का असर दूसरे एलिमेंट पर पड़ सकता है. उदाहरण के लिए,
<body>एलिमेंट की चौड़ाई से, आम तौर पर ट्री में मौजूद उसके चाइल्ड एलिमेंट के डाइमेंशन पर असर पड़ता है. इसलिए, ब्राउज़र के लिए यह प्रोसेस काफ़ी मुश्किल हो सकती है. - पेंट: पेंटिंग, पिक्सल भरने की प्रोसेस है. इसमें, पेज पर एलिमेंट के लेआउट का हिसाब लगाने के बाद, टेक्स्ट, रंग, इमेज, बॉर्डर, शैडो, और एलिमेंट के हर विज़ुअल पहलू को ड्रॉ करना शामिल है. आम तौर पर, ड्रॉइंग कई प्लैटफ़ॉर्म पर की जाती है. इन्हें लेयर कहा जाता है.
- कंपोज़िट: पेज के हिस्सों को कई लेयर पर खींचा गया हो सकता है. इसलिए, उन्हें स्क्रीन पर सही क्रम में लागू करना ज़रूरी है, ताकि पेज उम्मीद के मुताबिक रेंडर हो. यह खास तौर पर उन एलिमेंट के लिए ज़रूरी है जो एक-दूसरे पर ओवरलैप होते हैं. किसी गड़बड़ी की वजह से, एक एलिमेंट दूसरे के ऊपर गलत तरीके से दिख सकता है.
पिक्सल पाइपलाइन के इनमें से हर हिस्से में, ऐनिमेशन में रुकावट आने या यूज़र इंटरफ़ेस में छोटे-मोटे विज़ुअल बदलावों के लिए भी फ़्रेम पेंट करने में देरी होने का मौका होता है. इसलिए, यह समझना ज़रूरी है कि आपका कोड, पाइपलाइन के किन हिस्सों को ट्रिगर करता है. साथ ही, यह भी जांचना ज़रूरी है कि क्या आपके पास पिक्सल पाइपलाइन के सिर्फ़ उन हिस्सों में बदलाव करने का विकल्प है जो उन्हें रेंडर करने के लिए ज़रूरी हैं.
आपने "पेंट" के साथ "रेस्टर करें" शब्द का इस्तेमाल सुना होगा. ऐसा इसलिए है, क्योंकि पेंटिंग दो टास्क होते हैं:
- ड्रॉ कॉल की सूची बनाना.
- पिक्सल भरना.
बाद वाले को "रेस्टराइज़ेशन" कहा जाता है. इसलिए, जब भी आपको DevTools में पेंट रिकॉर्ड दिखें, तो आपको यह समझना चाहिए कि इसमें रेस्टराइज़ेशन शामिल है. कुछ आर्किटेक्चर में, ड्रॉ कॉल और रेस्टराइज़ेशन की सूची बनाने का काम अलग-अलग थ्रेड पर किया जाता है. हालांकि, डेवलपर के तौर पर आपके पास इस पर कंट्रोल नहीं होता.
यह ज़रूरी नहीं है कि हर फ़्रेम पर, आपको पाइपलाइन के हर हिस्से को देखना पड़े. असल में, किसी फ़्रेम में विज़ुअल में बदलाव करने पर, पाइपलाइन आम तौर पर तीन तरीकों से काम करती है. ये तरीके, JavaScript, सीएसएस या वेब ऐनिमेशन एपीआई में से किसी एक का इस्तेमाल करके किए गए बदलाव पर लागू होते हैं.
1. JS / CSS > स्टाइल > लेआउट > पेंट > कंपोजिट
अगर किसी "लेआउट" प्रॉपर्टी में बदलाव किया जाता है, जैसे कि एलिमेंट की चौड़ाई, ऊंचाई या उसकी जगह (जैसे कि left या top CSS प्रॉपर्टी) जैसी ज्यामिति में बदलाव करने वाली प्रॉपर्टी, तो ब्राउज़र को सभी अन्य एलिमेंट की जांच करनी होगी और पेज को "फिर से फ़्लो" करना होगा. जिन हिस्सों पर असर पड़ा है उन्हें फिर से पेंट करना होगा. साथ ही, पेंट किए गए आखिरी एलिमेंट को फिर से एक साथ कंपोज करना होगा.
2. JS / CSS > स्टाइल > पेंट > कंपोजिट
अगर आपने सीएसएस में किसी एलिमेंट के लिए "सिर्फ़ पेंट" प्रॉपर्टी बदली है, जैसे कि background-image, color या box-shadow जैसी प्रॉपर्टी, तो पेज पर विज़ुअल अपडेट करने के लिए, लेआउट चरण ज़रूरी नहीं है. जहां भी हो सके, लेआउट चरण को छोड़कर, लेआउट से जुड़े काम से बचें. ऐसा करने से, आपको ज़्यादा खर्च नहीं करना पड़ेगा. साथ ही, अगले फ़्रेम को बनाने में लगने वाला समय भी कम हो जाएगा.
3. JS / CSS > स्टाइल > कंपोजिट
अगर आपने ऐसी प्रॉपर्टी में बदलाव किया है जिसके लिए लेआउट या पेंट, दोनों की ज़रूरत नहीं है, तो ब्राउज़र सीधे कॉम्पोज़ करने के चरण पर जा सकता है. यह पिक्सल पाइपलाइन के ज़रिए, पेज के लाइफ़साइकल में ज़्यादा दबाव वाले पॉइंट के लिए सबसे सस्ता और सबसे ज़्यादा पसंद किया जाने वाला पाथ है. जैसे, ऐनिमेशन या स्क्रोलिंग. दिलचस्प जानकारी: Chromium, पेज को स्क्रोल करने की सुविधा को ऑप्टिमाइज़ करता है, ताकि जहां भी हो सके वहां यह सुविधा सिर्फ़ कंपोजिटर थ्रेड पर काम करे. इसका मतलब है कि अगर कोई पेज काम नहीं कर रहा है, तब भी आपके पास पेज को स्क्रोल करने और उसके उन हिस्सों को देखने का विकल्प होता है जो पहले स्क्रीन पर दिखाए गए थे.
वेब परफ़ॉर्मेंस, काम को कम करने का तरीका है. साथ ही, ज़रूरी काम को ज़्यादा से ज़्यादा बेहतर तरीके से करने का तरीका भी है. ज़्यादातर मामलों में, ब्राउज़र के साथ काम करना ज़रूरी होता है, न कि उसके ख़िलाफ़. ध्यान रखें कि पहले पाइपलाइन में दिखाया गया काम, कंप्यूटेशनल लागत के हिसाब से अलग-अलग होता है. कुछ टास्क, अन्य टास्क के मुकाबले ज़्यादा महंगे होते हैं!
आइए, पाइपलाइन के अलग-अलग हिस्सों के बारे में जानें. हम आम तौर पर होने वाली समस्याओं के बारे में बताएंगे. साथ ही, उनका पता लगाने और उन्हें ठीक करने का तरीका भी बताएंगे.
ब्राउज़र रेंडरिंग ऑप्टिमाइज़ेशन
परफ़ॉर्मेंस, उपयोगकर्ताओं के लिए अहम होती है. उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, वेब डेवलपर को ऐसी वेबसाइटें बनानी चाहिए जो उपयोगकर्ता के इंटरैक्शन पर तुरंत प्रतिक्रिया दें और आसानी से रेंडर हों. परफ़ॉर्मेंस विशेषज्ञ पॉल लुइस, ऐप्लिकेशन के रुकने या फ़्रीज़ होने की समस्या को ठीक करने और ऐसे वेब ऐप्लिकेशन बनाने में आपकी मदद करेंगे जो हर सेकंड 60 फ़्रेम की परफ़ॉर्मेंस बनाए रखते हैं. इस कोर्स के बाद, आपको ऐप्लिकेशन की प्रोफ़ाइल बनाने और रेंडरिंग की परफ़ॉर्मेंस ठीक न होने की वजहों का पता लगाने के लिए ज़रूरी टूल मिल जाएंगे. आपको ब्राउज़र की रेंडरिंग की प्रोसेस के बारे में भी जानकारी मिलेगी. साथ ही, ऐसे पैटर्न भी मिलेंगे जिनकी मदद से तेज़ी से ऐसी वेबसाइटें बनाई जा सकती हैं जिनका इस्तेमाल करना लोगों को अच्छा लगे.
यह Udacity के ज़रिए ऑफ़र किया जाने वाला मुफ़्त कोर्स है. इसे किसी भी समय लिया जा सकता है.