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

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

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 को लागू करने से जुड़े किसी भी काम पर असर पड़ सकता है.