परफ़ॉर्मेंस रेंडरिंग

उपयोगकर्ताओं को यह पता चलता है कि साइटें और ऐप्लिकेशन ठीक से काम नहीं कर रहे हैं. इसलिए, रेंडरिंग की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना बहुत ज़रूरी है!

आज-कल वेब के उपयोगकर्ता उम्मीद करते हैं कि वे जिन पेजों को विज़िट करेंगे वे इंटरैक्टिव होंगे और आसान हो गए हैं. इनके लिए, आपको अपना समय और मेहनत ज़्यादा ध्यान में रखने की ज़रूरत है. पेज न सिर्फ़ तेज़ी से लोड होने चाहिए, बल्कि उपयोगकर्ता के इनपुट का तुरंत जवाब भी देने चाहिए अपनी पूरी लाइफ़साइकल में इन्हें बनाया है. असल में, उपयोगकर्ता अनुभव का यह पहलू इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) मेट्रिक आकलन करता है. बहुत अच्छा आईएनपी का मतलब है कि कोई पेज उपयोगकर्ता की खोज के हिसाब से, लगातार और भरोसेमंद तरीके से रिस्पॉन्सिव था ज़रूरतें पूरी करता है.

पेज को दिलचस्प बनाने वाली चीज़ों में JavaScript को उपयोगकर्ता के इंटरैक्शन के डेटा के तौर पर इस्तेमाल किया जाता है. इन्हें उपयोगकर्ता के तौर पर गिना जाता है यूज़र इंटरफ़ेस में विज़ुअल बदलावों की संभावना होती है. किसी उपयोगकर्ता की विज़ुअल में बदलाव इंटरफ़ेस कई प्रकार के काम का नतीजा होता है. इन्हें अक्सर एक साथ इस्तेमाल किया जाता है. रेंडरिंग की प्रोसेस पूरी करनी होगी और इस काम को जल्द से जल्द पूरा करना होगा, उपयोगकर्ता अनुभव तेज़ और भरोसेमंद लगता है.

उपयोगकर्ता के इंटरैक्शन पर तुरंत कार्रवाई करने वाले पेज लिखने के लिए, आपको ब्राउज़र, एचटीएमएल, JavaScript, और सीएसएस को कैसे हैंडल करता है. साथ ही, पक्का करता है कि आपका लिखा गया कोड—साथ ही, तीसरे पक्ष का कोई भी अन्य कोड, जो आपने शामिल किया हो—चलता है का बेहतर तरीके से इस्तेमाल करते हैं.

डिवाइस की रीफ़्रेश दरों के बारे में जानकारी

आज-कल ज़्यादातर डिवाइस अपनी स्क्रीन को एक सेकंड में 60 बार रीफ़्रेश करते हैं. हर रीफ़्रेश यह आपको दिखने वाला विज़ुअल आउटपुट देता है. इसे आम तौर पर फ़्रेम कहा जाता है. इस इस वीडियो में, फ़्रेम का कॉन्सेप्ट दिखाया गया है:

हालांकि, किसी डिवाइस की स्क्रीन हमेशा एक जैसी दर पर रीफ़्रेश होती है, तो ज़रूरी नहीं है कि किसी डिवाइस पर चलने के लिए हमेशा ज़रूरी फ़्रेम बनाए जा सकें मैच कर सकते हैं. उदाहरण के लिए, अगर कोई ऐनिमेशन या ट्रांज़िशन है चलाने के लिए, ब्राउज़र को डिवाइस की रीफ़्रेश दर से मिलान करना होगा, ताकि एक स्क्रीन रीफ़्रेश होने पर हर बार फ़्रेम रेंडर होने में लगने वाला समय.

यह देखते हुए कि सामान्य डिसप्ले हर सेकंड में 60 बार रीफ़्रेश होता है, कुछ इससे पता चलेगा कि हर फ़्रेम बनाने के लिए, ब्राउज़र में 16.66 मिलीसेकंड हैं. हालांकि, हकीकत में हर फ़्रेम के लिए ब्राउज़र का अपना ओवरहेड होता है, इसलिए सभी आपका काम 10 मिलीसेकंड में पूरा होना चाहिए. अगर आप ऐसा नहीं कर पाते हैं पूरी रकम का ध्यान रखते हुए, फ़्रेम रेट में गिरावट देखी जा सकती है, और पेज के कॉन्टेंट को भी स्क्रीन पर देखा जा सकता है. यह इस घटना को अक्सर जैंक कहा जाता है.

हालांकि, आपको जिस तरह का काम करना है उसके आधार पर आपके टारगेट बदल जाते हैं. ऐनिमेशन के लिए 10 मिलीसेकंड की सीमा को पूरा करना ज़रूरी है, जहां स्क्रीन पर मौजूद ऑब्जेक्ट को दो फ़्रेम के बीच की फ़्रेम की सीरीज़ में इंटरपोलेट किया जाता है अंक. जब यूज़र इंटरफ़ेस में अलग-अलग बदलावों की बात करें, तो इसका मतलब है कि एक स्थिति से दूसरी स्थिति में जाने के बीच में किसी भी तरह की कोई गतिविधि नहीं हुई है का सुझाव दिया जाता है कि आप ऐसे बदलावों को उस समयावधि में लागू करें, जो तुरंत महसूस होता है उपयोगकर्ता है. ऐसे मामलों में, 100 मिलीसेकंड आम तौर पर बताया जाता है, लेकिन आईएनपी मेट्रिक की "अच्छी" थ्रेशोल्ड 200 मिलीसेकंड या उससे कम होता है, इस पर कई तरह के डिवाइसों का इस्तेमाल किया जा सकता है.

आपका लक्ष्य चाहे जो भी हो—चाहे वे ऐनिमेशन वाले कई फ़्रेम बना रहे हों जैंक से बचने के लिए या सिर्फ़ विज़ुअल में अलग-अलग बदलाव करने के लिए उपयोगकर्ता इंटरफ़ेस को जल्द से जल्द पढ़ सकते हैं—यह समझना कि ब्राउज़र का पिक्सल आपके काम के लिए पाइपलाइन का काम करना ज़रूरी है.

पिक्सल पाइपलाइन

आपको पांच मुख्य चीज़ों के बारे में जानने की ज़रूरत है. साथ ही, आपको ये बातें ध्यान में रखनी चाहिए वेब डेवलपर के तौर पर काम करते हैं. ये पांच क्षेत्र ऐसे हैं जहां आपके पास सबसे ज़्यादा पर कंट्रोल किया जाता है और हर एक पिक्सल-टू-स्क्रीन पाइपलाइन के मुख्य पॉइंट को दिखाता है:

• JavaScript: JavaScript का इस्तेमाल आम तौर पर, काम के लिए किया जाता है. यूज़र इंटरफ़ेस में विज़ुअल बदलाव किए जा सकते हैं. उदाहरण के लिए, यह jQuery animate फ़ंक्शन का इस्तेमाल करना, डेटासेट को क्रम से लगाना या पेज में DOM एलिमेंट जोड़ना. विज़ुअल बदलावों को ट्रिगर करने के लिए JavaScript की ज़रूरत नहीं है. हालांकि: CSS ऐनिमेशन, सीएसएस ट्रांज़िशन, और वेब ऐनिमेशन एपीआई ये काम कर सकते हैं ऐनिमेशन वाले पेज का कॉन्टेंट.
• स्टाइल का हिसाब लगाना: इससे पता लगाया जा सकता है कि कौनसे सीएसएस नियमों का पता चलता है मैचिंग सिलेक्टर के आधार पर, उन एचटीएमएल एलिमेंट पर लागू करें. उदाहरण के लिए, .headline, सीएसएस सिलेक्टर का एक उदाहरण है, जो किसी भी एचटीएमएल एलिमेंट पर लागू होता है मान लें कि class एट्रिब्यूट की वैल्यू में headline क्लास शामिल है. इन्होंने भेजा: वहां, नियम के ज्ञात होने के बाद, उन्हें लागू किया जाता है और प्रत्येक एलिमेंट की गिनती की जाती है.
• लेआउट: जब ब्राउज़र को पता चल जाता है कि किसी एलिमेंट पर कौनसे नियम लागू होते हैं, तो वह पेज की ज्यामिति गणना करना शुरू कर देते हैं, जैसे कि कितने स्पेस एलिमेंट लिया जा सकता है और वे स्क्रीन पर कहां दिखेंगे. वेब के लेआउट मॉडल का मतलब है किसी एक एलिमेंट का असर दूसरों पर पड़ सकता है. उदाहरण के लिए, <body> की चौड़ाई आम तौर पर, वह एलिमेंट अपने चाइल्ड एलिमेंट के डाइमेंशन पर पूरी तरह असर डालता है. से लिंक नहीं करना है, ताकि ब्राउज़र के लिए यह प्रक्रिया पूरी तरह से शामिल हो सके.
• पेंट: पेंटिंग, पिक्सल भरने की प्रोसेस है. इसमें ड्रॉइंग शामिल है टेक्स्ट, रंग, इमेज, बॉर्डर, शैडो, और खास तौर पर हर विज़ुअल को पेज पर एलिमेंट के लेआउट के बाद उनका पहलू. आम तौर पर, यह ड्रॉइंग कई जगहों पर की जाती है. इन्हें लेयर कहा जाता है.
• कंपोज़िट: पेज के हिस्सों को कई लेयर होती हैं, तो उन्हें स्क्रीन पर सही क्रम में लागू किया जाना चाहिए. पेज सही तरीके से रेंडर होता हो. यह खास तौर पर उन एलिमेंट के लिए ज़रूरी है जो दूसरे को ओवरलैप करती है, क्योंकि किसी गलती की वजह से कोई एक एलिमेंट दिख सकता है बटन को दूसरे के ऊपर रखा जाए.

पिक्सल पाइपलाइन के इन हिस्सों में से हर एक हिस्से से, ऐनिमेशन में जैंक करें या अलग-अलग विज़ुअल के लिए भी फ़्रेम की पेंटिंग में देरी करें यूज़र इंटरफ़ेस में बदलाव किए जा सकते हैं. इसलिए, यह समझना ज़रूरी है कि पाइपलाइन के कौनसे हिस्से ट्रिगर होते हैं, और इसकी जांच कैसे की जा सकती है अपने बदलावों को सिर्फ़ पिक्सल पाइपलाइन के उन हिस्सों तक सीमित रखें जो उन्हें रेंडर नहीं कर पाएगा.

शायद आपने "रास्टराइज़ करें" शब्द सुना हो इसका इस्तेमाल "पेंट" के साथ किया जाता है. यह ऐसा इसलिए है, क्योंकि पेंटिंग असल में दो काम है:

1. ड्रॉ कॉल की सूची बनाई जा रही है.
2. पिक्सल भरी जा रही है.

बाद वाले को "रास्टराइज़ेशन" कहा जाता है. इसलिए, जब भी आपको DevTools की तरह, यह रास्टराइज़ेशन भी है. कुछ आर्किटेक्चर, ड्रॉ कॉल और रास्टराइज़ेशन की सूची बनाने का काम अलग-अलग थ्रेड हैं, लेकिन डेवलपर के रूप में यह आपके कंट्रोल में नहीं है.

यह ज़रूरी नहीं है कि हर फ़्रेम में, पाइपलाइन के हर हिस्से को हमेशा छुए जाएं. असल में, दिए गए फ़िल्टर के लिए आम तौर पर पाइपलाइन तीन तरीकों से काम करती है फ्रेम करें, जब आप JavaScript, CSS, या वेब से कोई विज़ुअल परिवर्तन करते हैं ऐनिमेशन एपीआई.

1. जेएस / सीएसएस > स्टाइल > लेआउट > पेंट > मिश्रित

"लेआउट" बदलने पर प्रॉपर्टी, जैसे कि वह प्रॉपर्टी जो किसी एलिमेंट के ज्यामिति, जैसे कि चौड़ाई, ऊंचाई या इसकी पोज़िशन (जैसे, left या top सीएसएस प्रॉपर्टी), ब्राउज़र को अन्य सभी एलिमेंट और "रीफ़्लो" की जांच करनी होगी यह करें. जिन जगहों पर असर हुआ है उन्हें फिर से पेंट करने की ज़रूरत है. इसके बाद, उन पर पेंट किया जाएगा तत्वों को वापस एक साथ मिलाना होगा.

2. जेएस / सीएसएस > स्टाइल > पेंट > मिश्रित

अगर आपने "सिर्फ़ पेंट वाला बटन" बदला है, तो सीएसएस में मौजूद किसी एलिमेंट की प्रॉपर्टी—उदाहरण के लिए, प्रॉपर्टी जैसे कि background-image, color या box-shadow—लेआउट चरण पेज को विज़ुअल अपडेट करने के लिए ज़रूरी नहीं है. लेआउट को हटाकर, चरण—जहां संभव हो—तो आप लेआउट के संभावित महंगे काम से बचते हैं हालांकि, इस वजह से अगला फ़्रेम तैयार होने में काफ़ी समय लग रहा था.

3. जेएस / सीएसएस > स्टाइल > मिश्रित

अगर आप कोई ऐसी प्रॉपर्टी बदलते हैं जिसके लिए किसी भी लेआउट या पेंट की ज़रूरत नहीं है, तो ब्राउज़र सीधे कंपोज़िटिंग चरण पर जा सकते हैं. यह सबसे सस्ता और सबसे ज़्यादा किराया है यह एक खास पाथवे है जो जैसे कि ऐनिमेशन या स्क्रोलिंग. मज़ेदार तथ्य: Chromium ऑप्टिमाइज़ करता है पेज को स्क्रोल करना होता है, ताकि यह पूरी तरह से कंपोज़िटर थ्रेड पर हो जहां का मतलब है कि भले ही पेज काम नहीं कर रहा हो, लेकिन आप पेज को स्क्रोल करें और स्क्रीन पर पहले बनाए गए हिस्सों को देखें.

वेब परफ़ॉर्मेंस का मतलब, काम को बचाने की कला है और वह काम की क्षमता को बढ़ाता है किसी भी ज़रूरी काम के लिए किया जा सकता है. कई मामलों में, इसका मतलब है कि ब्राउज़र के साथ नहीं, बल्कि उसके ख़िलाफ़ नहीं. यह ध्यान रखना ज़रूरी है कि आम तौर पर, मॉडल, कंप्यूटेशनल कॉस्ट के हिसाब से अलग-अलग हैं; कुछ टास्क अक्सर दूसरों की तुलना में ज़्यादा महंगे होते हैं!

आइए, अब प्रोसेस के अलग-अलग हिस्सों के बारे में बात करें. हम सेटिंग पर गौर करेंगे साथ ही, उनका विश्लेषण करने और उन्हें ठीक करने का तरीका भी जानेंगे.

ब्राउज़र रेंडरिंग ऑप्टिमाइज़ेशन

वेब डेवलपर और उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, ऐप्लिकेशन की परफ़ॉर्मेंस अहम होती है ऐसी वेबसाइटें बनाने की ज़रूरत है जो उपयोगकर्ता के इंटरैक्शन और रेंडर होने में तुरंत प्रतिक्रिया दें बिना किसी रुकावट के. परफ़ॉर्मेंस विशेषज्ञ पॉल लुईस, जैंक और झटकों को रोकने में मदद करेंगे ऐसे वेब ऐप्लिकेशन बना सकता है जो 60 फ़्रेम प्रति सेकंड की परफ़ॉर्मेंस बनाए रखते हैं. आप निकलेंगे इस कोर्स में, ऐप्लिकेशन की प्रोफ़ाइल बनाने और इसकी वजहों को पहचानने के लिए, आपके लिए ज़रूरी टूल दिए गए हैं रेंडरिंग परफ़ॉर्मेंस में गिरावट. आपको ब्राउज़र की रेंडरिंग भी एक्सप्लोर करनी होगी के पैटर्न को जानने की कोशिश करते हैं. इससे तेज़ी से वेबसाइट बनाने में आसानी होती है. उपयोगकर्ताओं को इस्तेमाल करना अच्छा लगेगा.

यह कोर्स Udacity में मुफ़्त में उपलब्ध है. आपके पास किसी भी समय इसमें हिस्सा लेने का विकल्प है.