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