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