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