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