खास तौर पर मोबाइल पर चमकदार फ़्रेम रेट पाने के लिए, पेंट करने से बचना ज़रूरी है. हालांकि, कभी-कभी सबसे असामान्य जगहों पर पेंट उगते हैं. इस लेख में बताया गया है कि ऐनिमेशन वाले GIF की वजह से, अनचाहे पेंट क्यों आ सकते हैं. साथ ही, इस लेख में इसे आसानी से ठीक करने का तरीका भी बताया गया है.
प्यार भरी ज़िंदगी
जैसा कि आपको पता होगा कि मॉडर्न ब्राउज़र, डीओएम एलिमेंट के ग्रुप को लेयर कहलाने वाली अलग-अलग "इमेज" में पेंट कर सकते हैं. कभी-कभी पूरे पेज पर एक ही लेयर होती है. कभी-कभी सैकड़ों या बहुत कम मामलों में - हज़ारों!
जब DOM एलिमेंट को एक लेयर में एक साथ ग्रुप किया जाता है और उनमें से कोई एक एलिमेंट विज़ुअल तौर पर बदल जाता है, तो हमें न सिर्फ़ बदले गए एलिमेंट को पेंट करना पड़ता है, बल्कि लेयर के उन सभी एलिमेंट को भी पेंट करना पड़ता है जो बदले गए एलिमेंट को ओवरलैप करते हैं. किसी चीज़ को दूसरे के ऊपर पेंट करने से, ओवरराइट किए गए पिक्सल हमेशा के लिए "गुम" हो जाते हैं. अगर आपको ओरिजनल पिक्सल वापस चाहिए, तो आपको उन्हें फिर से पेंट करना होगा.
इसलिए, कभी-कभी हम एक एलिमेंट को दूसरे एलिमेंट से अलग करना चाहते हैं, ताकि इसे पेंट करते समय हमें उन दूसरे एलिमेंट को फिर से पेंट न करना पड़े जिनमें बदलाव नहीं हुआ है. उदाहरण के लिए, जब किसी तय पेज के हेडर को स्क्रोल किए जा सकने वाले कॉन्टेंट के साथ जोड़ा जाता है, तो आपको हर बार कॉन्टेंट स्क्रोल करने पर हेडर को फिर से पेंट करना होगा. साथ ही, दिखने वाली नई सामग्री को भी फिर से पेंट करना होगा. हेडर को किसी अलग लेयर में रखकर, ब्राउज़र स्क्रोलिंग को ऑप्टिमाइज़ कर सकता है. स्क्रोल करने पर ब्राउज़र, लेयर को इधर-उधर ले जा सकता है. ऐसा जीपीयू की मदद से किया जा सकता है. साथ ही, किसी भी लेयर को बार-बार पेंट करने से बचा जा सकता है.
हर अतिरिक्त लेयर, मेमोरी का इस्तेमाल करती है और अतिरिक्त परफ़ॉर्मेंस को बढ़ाती है. इसलिए, हमारा लक्ष्य यह है कि बेहतर परफ़ॉर्मेंस को बनाए रखते हुए, पेज को कम से कम लेयर में बांटा जाए.
एनिमेटेड GIF के साथ इन सब का क्या मतलब है?
आइए इस फ़ोटो पर एक नज़र डालें:
यह किसी सामान्य ऐप्लिकेशन के लिए संभावित लेयर सेटअप है. यहां चार लेयर हैं: उनमें से तीन (लेयर 2 से 4) इंटरफ़ेस एलिमेंट हैं; बैक लेयर एक लोडर है, जो ऐनिमेशन वाला GIF होता है. सामान्य फ़्लो में, आपका ऐप्लिकेशन लोड होने के दौरान लोडर (लेयर 1) दिखता है. जैसे-जैसे हर चीज़ पूरी होगी, आपको दूसरी लेयर भी दिखेगी. अहम जानकारी: आपको ऐनिमेशन वाला GIF छिपाना होगा.
लेकिन मुझे इसे छिपाने की क्या ज़रूरत है?!
यह अच्छा सवाल है. एक बढ़िया दुनिया में, ब्राउज़र यह जांचेगा कि GIF दिख रहा है या नहीं. इसके बाद, अपने-आप पेंटिंग नहीं बनेगी. माफ़ करें, ऐनिमेशन वाला GIF छिपा हुआ है या स्क्रीन पर दिख रहा है या नहीं, यह देखना आम तौर पर सिर्फ़ पेंटिंग बनाने के मुकाबले ज़्यादा महंगा होता है, ताकि इसे पेंट किया जा सके.
आम तौर पर, GIF की अपनी लेयर होती है और ब्राउज़र को सिर्फ़ इसे पेंट करके, जीपीयू पर अपलोड करना होता है. सबसे खराब स्थिति में, आपके सभी एलिमेंट को एक ही लेयर में ग्रुप किया जा सकता है और ब्राउज़र को हर एक एलिमेंट को फिर से पेंट करना होगा. यह प्रोसेस होने के बाद भी, आपको जीपीयू पर सब कुछ अपलोड करना होगा. ये सारे काम हर GIF फ़्रेम के लिए किए जाते हैं. भले ही, उपयोगकर्ता GIF को नहीं देख पा रहा हो!
डेस्कटॉप पर इस तरह की पेंटिंग का काम आसानी से किया जा सकता है, क्योंकि सीपीयू और जीपीयू ज़्यादा ताकतवर होते हैं. साथ ही, दोनों के बीच डेटा ट्रांसफ़र करने के लिए काफ़ी बैंडविड्थ होती है. हालांकि, मोबाइल पर पेंटिंग का खर्च बहुत ज़्यादा होता है, इसलिए आपको बहुत सावधानी रखनी चाहिए.
इससे किन ब्राउज़र पर असर पड़ता है?
जैसा कि अक्सर होता है, अलग-अलग ब्राउज़र के व्यवहार अलग-अलग होते हैं. आज Chrome, Safari, और Opera सभी को फिर से पेंट किया जाता है, भले ही GIF धुंधला हो. वहीं दूसरी ओर Firefox यह पता लगाता है कि GIF छिप गया है और इसे फिर से पेंट करने की ज़रूरत नहीं है. Internet Explorer अब भी किसी ब्लैक बॉक्स की तरह है. यहां तक कि IE11 में भी ऐसा नहीं हो रहा है, क्योंकि F12 टूल अब भी डेवलप किए जा रहे हैं. इस बात का कोई संकेत नहीं है कि रीपेंटिंग की कोई प्रोसेस हो रही है या नहीं.
मुझे यह समस्या होने पर कैसे पता चलेगा?
Chrome DevTools में "पेंट करने वाले आयत दिखाएं" का इस्तेमाल करना सबसे आसान तरीका है. DevTools लोड करें और नीचे दाएं कोने में मौजूद कॉग को दबाएं (
) और रेंडरिंग सेक्शन में जाकर, पेंट करने वाले रेक्टैंगल दिखाएं को चुनें.
अब आपको बस इस तरह से लाल रंग का रेक्टैंगल खोजना होगा:
स्क्रीन पर एक छोटा सा लाल बॉक्स दिखाता है कि Chrome किसी चीज़ को फिर से पेंट कर रहा है. आपको पता होगा कि लोडर GIF दूसरे एलिमेंट के पीछे छिपा हुआ है. इसलिए, अगर आपको इस तरह का लाल बॉक्स दिखता है, तो आपको दिखने वाले एलिमेंट छिपाने होंगे. साथ ही, यह देखना होगा कि कहीं आपने ऐनिमेशन वाले GIF को कहीं घुमाते हुए तो नहीं देखा है. अगर आपको ऐसा करना है, तो आपको अपने मौजूदा एलिमेंट पर display: none या visibility: hidden को लागू करने के लिए, कुछ सीएसएस या JavaScript को पॉप-अप करना होगा. अगर यह सिर्फ़ बैकग्राउंड की इमेज है, तो इसे ज़रूर हटा दें.
अगर आपको किसी लाइव साइट पर इसका उदाहरण देखना है, तो Allegro पर जाएं. यहां हर प्रॉडक्ट की इमेज में लोड होने वाला GIF मौजूद होता है, जिसे साफ़ तौर पर छिपाने के बजाय छिपाया जाता है.
नतीजा
60fps (फ़्रेम प्रति सेकंड) का मतलब है कि सिर्फ़ वही काम करें जो पेज को रेंडर करने के लिए ज़रूरी है. इसके बाद, आपको कोई और काम नहीं करना होगा. इस लक्ष्य को हासिल करने के लिए, ज़रूरत से ज़्यादा पेंट को हटाना ज़रूरी है. ऐनिमेशन वाले जो GIF चलने के लिए बचे हैं वे बेवजह पेंट कर सकते हैं. इन पेंट को आप DevTools के 'पेंट रेक्टैंगल दिखाएं' टूल की मदद से आसानी से ढूंढ सकते हैं और डीबग कर सकते हैं.
अब, आपने ऐनिमेशन वाले उस बिल्ली के बच्चे को लोड करने वाले GIF को हमेशा के लिए नहीं छोड़ा है, है न?