पेंट, पिक्सल भरने की प्रोसेस है. ये पिक्सल, आखिर में उपयोगकर्ता की स्क्रीन पर कॉम्पोज़ हो जाते हैं. आम तौर पर, यह पाइपलाइन में मौजूद सभी टास्क में सबसे ज़्यादा समय लेता है. अगर हो सके, तो इस टास्क से बचें.
खास जानकारी
- ट्रांसफ़ॉर्म या ओपैसिटी के अलावा किसी भी प्रॉपर्टी में बदलाव करने पर, हमेशा पेंट ट्रिगर होता है.
- आम तौर पर, पिक्सल पाइपलाइन में पेंट सबसे महंगा हिस्सा होता है. जहां भी हो सके, वहां इसका इस्तेमाल करने से बचें.
- ऐनिमेशन का इस्तेमाल करके, लेयर के प्रमोशन और ऑर्केस्ट्रा के ज़रिए पेंट एरिया कम करें.
- Chrome DevTools के पेंट प्रोफ़ाइलर का इस्तेमाल करके, पेंट की जटिलता और लागत का आकलन करें. जहां भी हो सके, लागत कम करें.
लेआउट और पेंट को ट्रिगर करने का तरीका
लेआउट को ट्रिगर करने पर, पेंट हमेशा ट्रिगर होगा. ऐसा इसलिए, क्योंकि किसी भी एलिमेंट की ज्यामिति बदलने का मतलब है कि उसके पिक्सल को ठीक करना होगा!
बैकग्राउंड, टेक्स्ट का रंग या शैडो जैसी नॉन-जियोमेट्रिक प्रॉपर्टी बदलने पर भी पेंट ट्रिगर किया जा सकता है. ऐसे मामलों में, लेआउट की ज़रूरत नहीं होगी और पाइपलाइन इस तरह दिखेगी:
Chrome DevTools का इस्तेमाल करके, पेंट करने में आने वाली रुकावटों की तेज़ी से पहचान करें
Chrome DevTools का इस्तेमाल करके, पेंट किए जा रहे हिस्सों की तुरंत पहचान की जा सकती है. 'रेंडरिंग' टैब खोलें और फिर पेंट फ़्लैशिंग को चालू करें.
इस विकल्प को चालू करने पर, पेंटिंग करते समय Chrome स्क्रीन को हरे रंग में फ़्लैश करेगा. अगर आपको पूरी स्क्रीन पर हरा रंग फ़्लैश हो रहा है या स्क्रीन के ऐसे हिस्से पर हरा रंग दिख रहा है जिन्हें आपको पेंट नहीं करना था, तो आपको थोड़ी और जांच करनी चाहिए.
ऐसे एलिमेंट का प्रमोशन करना जो हिलते-डुलते हों या धीरे-धीरे गायब होते हों
पेंटिंग हमेशा मेमोरी में किसी एक इमेज में नहीं की जाती. असल में, ज़रूरत पड़ने पर ब्राउज़र, कई इमेज या कंपोजिटर लेयर में पेंट कर सकता है.
इस तरीके का फ़ायदा यह है कि जिन एलिमेंट को नियमित तौर पर फिर से रंगा जाता है या जो ट्रांसफ़ॉर्म के साथ स्क्रीन पर मूव करते हैं उन्हें दूसरे एलिमेंट पर असर डाले बिना मैनेज किया जा सकता है. यह Sketch, GIMP या Photoshop जैसे आर्ट पैकेज की तरह ही है. इनमें फ़ाइनल इमेज बनाने के लिए, अलग-अलग लेयर को एक-दूसरे के ऊपर रखा जा सकता है और उन्हें मैनेज किया जा सकता है.
नई लेयर बनाने का सबसे अच्छा तरीका, will-change सीएसएस प्रॉपर्टी का इस्तेमाल करना है. यह प्रॉपर्टी, सभी मुख्य आधुनिक ब्राउज़र इंजन में उपलब्ध है. transform की वैल्यू का इस्तेमाल करके, will-change एक नई कंपोजिटर लेयर बनाएगा:
.moving-element {
will-change: transform;
}
हालांकि, ध्यान रखें कि बहुत ज़्यादा लेयर न बनाएं, क्योंकि हर लेयर के लिए मेमोरी और मैनेजमेंट, दोनों की ज़रूरत होती है. इस बारे में ज़्यादा जानकारी के लिए, सिर्फ़ कंपोजिटर प्रॉपर्टी का इस्तेमाल करें और लेयर की संख्या मैनेज करें सेक्शन देखें.
अगर आपने किसी एलिमेंट को नई लेयर में प्रमोट किया है, तो DevTools का इस्तेमाल करके यह पुष्टि करें कि ऐसा करने से आपकी परफ़ॉर्मेंस में सुधार हुआ है. प्रोफ़ाइल में शामिल किए बिना, एलिमेंट का प्रमोशन न करें.
पेंट किए गए हिस्सों को कम करना
हालांकि, कभी-कभी प्रमोशन एलिमेंट के बावजूद, पेंट का काम ज़रूरी होता है. पेंट करने में आने वाली समस्याओं के बारे में एक बड़ी चुनौती यह है कि ब्राउज़र उन दो हिस्सों को एक साथ जोड़ते हैं जिन्हें पेंटिंग की ज़रूरत होती है. इस वजह से पूरी स्क्रीन फिर से पेंट हो सकती है. उदाहरण के लिए, अगर पेज के सबसे ऊपर एक तय हेडर है और स्क्रीन के सबसे नीचे कुछ पेंट किया जा रहा है, तो हो सकता है कि पूरी स्क्रीन फिर से पेंट की गई हो.
पेज के कुछ हिस्सों को ऐनिमेट न करने के लिए, अक्सर पेज के पेंट किए गए हिस्सों को कम किया जाता है. इसके अलावा, ऐनिमेशन और ट्रांज़िशन को ओवरलैप न करने के लिए भी ऐसा किया जाता है.
पेंट की जटिलता को आसान बनाना
पेंटिंग के मामले में, कुछ चीज़ें दूसरों की तुलना में ज़्यादा महंगी होती हैं. उदाहरण के लिए, किसी लाल बॉक्स को पेंट करने में जितने समय लगेंगे उससे ज़्यादा समय, धुंधला (जैसे, परछाई) करने वाली किसी भी चीज़ को पेंट करने में लगेगा. हालांकि, सीएसएस के मामले में यह हमेशा साफ़ तौर पर नहीं दिखता: background: red; और box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); को देखकर ऐसा नहीं लगता कि उनकी परफ़ॉर्मेंस की विशेषताएं काफ़ी अलग हैं, लेकिन ऐसा है.
पिछले स्क्रीनशॉट में दिखाए गए तरीके से, पेंट प्रोफ़ाइलर की मदद से यह तय किया जा सकता है कि आपको इफ़ेक्ट पाने के लिए, दूसरे तरीकों को आज़माना होगा या नहीं. खुद से पूछें कि क्या आपके पास अपने आखिरी नतीजे को पाने के लिए, स्टाइल के सस्ते सेट या किसी अन्य तरीके का इस्तेमाल करने का विकल्प है.
जहां भी हो सके, हमेशा ऐनिमेशन के दौरान पेंट करने से बचें. ऐसा इसलिए, क्योंकि हर फ़्रेम के लिए 10 मिलीसेकंड का समय आम तौर पर पेंट करने के लिए काफ़ी नहीं होता. खास तौर पर, मोबाइल डिवाइसों पर.