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

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

Paul Lewis

Sam Thorogood

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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