कम शब्दों में कहा जाए तो
Chrome 53 से, अगर किसी कॉन्टेंट में will-change: transform CSS प्रॉपर्टी नहीं है, तो उसके ट्रांसफ़ॉर्म स्केल में बदलाव होने पर, कॉन्टेंट को फिर से रेस्टर किया जाता है. दूसरे शब्दों में, will-change: transform का मतलब है "कृपया इसे तेज़ी से ऐनिमेट करें".
यह सिर्फ़ उन ट्रांसफ़ॉर्म स्केल पर लागू होता है जो स्क्रिप्ट में बदलाव करने से होते हैं. साथ ही, यह सीएसएस ऐनिमेशन या वेब ऐनिमेशन पर लागू नहीं होता.
इसका मतलब है कि आपकी साइट पर बेहतर दिखने वाला कॉन्टेंट दिखेगा. हालांकि, यहां बताए गए कुछ आसान बदलाव किए बिना, साइट धीमी भी हो सकती है.
वेब डेवलपर के लिए असर
इस बदलाव के तहत, will-change: transform को कॉन्टेंट को फ़िक्स्ड बिटमैप में रेस्टर करने के लिए मजबूर करने के तौर पर देखा जा सकता है. इसके बाद, ट्रांसफ़ॉर्म अपडेट के तहत कॉन्टेंट कभी नहीं बदलता. इससे डेवलपर, उस बिटमैप पर ट्रांसफ़ॉर्म ऐनिमेशन की स्पीड बढ़ा सकते हैं. जैसे, उसे इधर-उधर ले जाना, घुमाना या उसका स्केल बदलना.
हम स्केल और ट्रांसलेशन ट्रांसफ़ॉर्म के बीच अंतर नहीं करते.
सुझाई गई कार्रवाइयां
जब आपको ऐनिमेशन की स्पीड बहुत तेज़ (दूसरे शब्दों में, 60fps) चाहिए, तो एलिमेंट पर will-change: transform लगाएं. साथ ही, यह उम्मीद की जाती है कि हर फ़्रेम पर एलिमेंट को अच्छी क्वालिटी में रेस्टर करने में ज़रूरत के मुताबिक समय नहीं लगेगा. अगर ऐसा नहीं है, तो will-change: transform का इस्तेमाल न करें.
परफ़ॉर्मेंस और क्वालिटी के बीच के समझौते को ऑप्टिमाइज़ करने के लिए, ऐनिमेशन शुरू होने पर will-change:
transform जोड़ें और खत्म होने पर उसे हटाएं. हालांकि, ध्यान रखें कि will-change: transform को जोड़ने या हटाने पर, अक्सर परफ़ॉर्मेंस की एक बार की जाने वाली लागत बहुत ज़्यादा होती है.
लागू करने के दौरान ध्यान देने वाली अन्य बातें
will-change: transform को हटाने पर, कॉन्टेंट को बेहतर स्केल पर फिर से रेस्टर किया जाता है. हालांकि, ऐसा सिर्फ़ अगले ऐनिमेशन फ़्रेम (requestAnimationFrame) के ज़रिए) पर किया जाता है. इसलिए, अगर आपके पास will-change: transform वाली कोई लेयर है और आपको सिर्फ़ फिर से रेस्टर करने की सुविधा को ट्रिगर करना है, लेकिन फिर भी ऐनिमेशन जारी रखना है, तो आपको will-change: ट्रांसफ़ॉर्म को हटाना होगा. इसके बाद, उसे requestAnimationFrame() callback में फिर से जोड़ना होगा.
अगर आपको ऐनिमेशन के दौरान किसी भी समय, मौजूदा स्केल पर रेस्टर करना है, तो ऊपर दी गई तकनीक का इस्तेमाल करके, एक फ़्रेम में will-change:
transform को हटाएं और अगले फ़्रेम में फिर से जोड़ें.
ऐसा करने पर, कॉन्टेंट की कंपोजिट लेयर हट सकती है. इससे, ऊपर दिया गया सुझाव थोड़ा महंगा हो सकता है. अगर आपको इस समस्या का सामना करना पड़ रहा है, तो हमारा सुझाव है कि कॉन्टेंट में transform: translateZ(0) भी जोड़ें. इससे यह पक्का किया जा सकेगा कि इस प्रोसेस के दौरान, कॉन्टेंट एक कॉम्पोज़िट लेयर में बना रहे.
असर की खास जानकारी
इस बदलाव का असर, रेंडर किए गए कॉन्टेंट की क्वालिटी, परफ़ॉर्मेंस, और डेवलपर कंट्रोल पर पड़ता है.
- रेंडर किए गए कॉन्टेंट की क्वालिटी: ऐनिमेशन वाले उन एलिमेंट का रेंडर किया गया आउटपुट, जिनका स्केल बदला जाता है वह हमेशा डिफ़ॉल्ट रूप से बेहतरीन होगा.
- परफ़ॉर्मेंस:
will-change: transformमौजूद होने पर, ट्रांसफ़ॉर्म ऐनिमेशन तेज़ी से चलेगा. - डेवलपर कंट्रोल: डेवलपर, हर एलिमेंट और हर ऐनिमेशन फ़्रेम के हिसाब से, क्वालिटी और स्पीड में से किसी एक को चुन सकते हैं. इसके लिए, उन्हें
will-change: transformको जोड़ना और हटाना होगा.
ज़्यादा जानकारी के लिए, ऊपर दिया गया रेफ़रंस डिज़ाइन दस्तावेज़ देखें.
उदाहरण
इस उदाहरण में, इस बदलाव के बाद remainsBlurry आईडी वाला एलिमेंट धुंधला रहेगा, लेकिन noLongerBlurry आईडी वाला एलिमेंट साफ़ दिखेगा. ऐसा इसलिए है, क्योंकि पहले टैग में will-
change: transform सीएसएस प्रॉपर्टी है.
असल ऐप्लिकेशन से ट्रांसफ़ॉर्म स्केल ऐनिमेशन के उदाहरण
- इस गड़बड़ी से: ज़ूम करके दिखाया गया बाघ
- मोबाइल पर Google Maps (maps.google.com) - मैप को ज़ूम करना
- डेस्कटॉप पर Google Maps Lite
- Ticketmaster का सीट मैप