पेंट पिक्सल को भरने की प्रोसेस है, जो आखिर में कंपोज़िट हो जाती है उपयोगकर्ता का पता बदल जाता है. आम तौर पर, यह पाइपलाइन में मौजूद सभी टास्क में सबसे ज़्यादा समय लेता है. अगर हो सके, तो इस टास्क से बचें.
खास जानकारी
- ट्रांसफ़ॉर्म या ओपैसिटी के अलावा किसी भी प्रॉपर्टी में बदलाव करने पर, हमेशा पेंट ट्रिगर होता है.
- पिक्सल पाइपलाइन का सबसे महंगा हिस्सा अक्सर पेंट होता है. जहां भी हो सके, वहां इसका इस्तेमाल करने से बचें.
- ऐनिमेशन का इस्तेमाल करके, लेयर के प्रमोशन और ऑर्केस्ट्रा के ज़रिए पेंट एरिया कम करें.
- पेंट की जटिलता और कीमत का आकलन करने के लिए, 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 मि॰से॰ पेंटिंग की रफ़्तार से पेंट करने में ज़्यादा समय नहीं लगता, खास तौर पर मोबाइल डिवाइसों पर.