ऐनिमेशन और परफ़ॉर्मेंस

ऐनिमेशन की परफ़ॉर्मेंस अच्छी होनी चाहिए. ऐसा नहीं करने पर, उपयोगकर्ता अनुभव पर बुरा असर पड़ेगा.

Paul Lewis

Sam Thorogood

ऐनिमेशन के दौरान 60fps बनाए रखें, क्योंकि इससे कोई ऐसी गड़बड़ी या स्टॉल नहीं होते हैं जो आपके उपयोगकर्ताओं को साफ़ तौर पर दिखेंगे और इससे उनके अनुभव पर बुरा असर पड़ेगा.

• इस बात का ध्यान रखें कि आपके ऐनिमेशन की वजह से परफ़ॉर्मेंस की समस्याएं न हों; यह पक्का करने के लिए कि आपको दी गई सीएसएस प्रॉपर्टी के ऐनिमेशन के असर के बारे में पता है.
• ऐसे ऐनिमेट करना जो पेज की ज्यामिति (लेआउट) बदल देते हैं या पेंटिंग पैदा करते हैं वे खास तौर पर महंगे होते हैं.
• जहां तक हो सके, बदलावों और ओपैसिटी में बदलाव करते रहें.
• will-change का इस्तेमाल करके, यह पक्का करें कि ब्राउज़र को पता हो कि आपको क्या ऐनिमेट करना है.

प्रॉपर्टी को ऐनिमेट करना मुफ़्त नहीं है. साथ ही, कुछ प्रॉपर्टी को ऐनिमेट करना दूसरी प्रॉपर्टी के मुकाबले सस्ता होता है. उदाहरण के लिए, किसी एलिमेंट के width और height को ऐनिमेट करने से उसकी ज्यामिति बदल जाती है. इसकी वजह से, पेज पर मौजूद दूसरे एलिमेंट भी साइज़ बदल सकते हैं या उनका साइज़ बदल सकते हैं. इस प्रोसेस को लेआउट (या Firefox जैसे Gecko-आधारित ब्राउज़र में रीफ़्लो) कहा जाता है. अगर आपके पेज पर बहुत ज़्यादा एलिमेंट हैं, तो यह प्रोसेस महंगी हो सकती है. जब भी लेआउट ट्रिगर होता है, तो आम तौर पर पेज या उसके किसी हिस्से को पेंट करने की ज़रूरत होती है. आम तौर पर, यह रंग लेआउट ऑपरेशन के मुकाबले महंगा होता है.

जहां तक हो सके, आपको ऐसी प्रॉपर्टी को ऐनिमेट करने से बचना चाहिए जो लेआउट या पेंट ट्रिगर करते हैं. ज़्यादातर आधुनिक ब्राउज़र के लिए, इसका मतलब ऐनिमेशन को opacity या transform तक सीमित करना होता है, जिनमें से दोनों को ब्राउज़र पूरी तरह से ऑप्टिमाइज़ कर सकता है; इससे कोई फ़र्क़ नहीं पड़ता कि ऐनिमेशन को JavaScript का इस्तेमाल किया जा रहा है या सीएसएस से.

बेहतर परफ़ॉर्मेंस वाले ऐनिमेशन बनाने के बारे में पूरी गाइड पढ़ें.

will-change प्रॉपर्टी का इस्तेमाल करना

will-change का इस्तेमाल करके, ब्राउज़र को बताएं कि आपको एलिमेंट की प्रॉपर्टी में बदलाव करना है. इससे ब्राउज़र, बदलाव करते समय सबसे सही ऑप्टिमाइज़ेशन लागू कर पाता है. will-change का ज़रूरत से ज़्यादा इस्तेमाल न करें. ऐसा करने से ब्राउज़र, संसाधनों को बर्बाद कर सकता है. इससे परफ़ॉर्मेंस पर असर डालने वाली और भी समस्याएं आ सकती हैं.

बुनियादी नियम यह है कि अगर उपयोगकर्ता के इंटरैक्शन या आपके ऐप्लिकेशन की स्थिति की वजह से, अगले 200 मि॰से॰ में ऐनिमेशन ट्रिगर हो सकता है, तो ऐनिमेशन वाले एलिमेंट पर will-change की सुविधा का इस्तेमाल करना एक अच्छा आइडिया है. ज़्यादातर मामलों में, आप जिस प्रॉपर्टी को बदलना चाहते हैं उसके लिए, ऐप्लिकेशन के मौजूदा व्यू में आपको जिस एलिमेंट को ऐनिमेट करना है उसके लिए will-change चालू होना चाहिए. बॉक्स सैंपल के मामले में, जिसका इस्तेमाल हमने पिछली सभी गाइड में किया है, ट्रांसफ़ॉर्म और ओपैसिटी के लिए will-change को जोड़ने से यह कुछ ऐसा दिखता है:

.box {
  will-change: transform, opacity;
}

अब इस पर काम करने वाले ब्राउज़र, फ़िलहाल, ज़्यादातर मॉडर्न ब्राउज़र, उन प्रॉपर्टी में बदलाव करने या उन्हें ऐनिमेट करने के लिए ज़रूरी ऑप्टिमाइज़ेशन करेंगे.

सीएसएस बनाम JavaScript की परफ़ॉर्मेंस

वेब पर ऐसे कई पेज और टिप्पणियों के थ्रेड हैं जिनमें परफ़ॉर्मेंस के नज़रिए से सीएसएस और JavaScript ऐनिमेशन की खूबियों के बारे में चर्चा की गई है. इन बातों का ध्यान रखें:

• सीएसएस पर आधारित ऐनिमेशन और वेब ऐनिमेशन, जहां मूल रूप से काम करते हैं, आम तौर पर "कंपोज़िटर थ्रेड" नाम वाले थ्रेड पर हैंडल किए जाते हैं. यह ब्राउज़र के "मुख्य थ्रेड" से अलग होता है. इसमें स्टाइल, लेआउट, पेंटिंग, और JavaScript का इस्तेमाल किया जाता है. इसका मतलब है कि अगर ब्राउज़र मुख्य थ्रेड पर कुछ महंगे काम चला रहा है, तो ये ऐनिमेशन बिना किसी रुकावट के चलते रहेंगे.

• कई मामलों में, ट्रांसफ़ॉर्म और ओपैसिटी में होने वाले अन्य बदलावों को भी कंपोज़िटर थ्रेड की मदद से हैंडल किया जा सकता है.

• अगर कोई ऐनिमेशन पेंट, लेआउट या दोनों को ट्रिगर करता है, तो "मुख्य थ्रेड" करने की ज़रूरत होगी. यह बात सीएसएस और JavaScript पर आधारित ऐनिमेशन, दोनों पर लागू होती है. लेआउट या पेंट के ओवरहेड की वजह से, सीएसएस या JavaScript लागू करने से जुड़ा हर काम, सवाल से हटकर हो सकता है.