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

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

पॉल लुइस

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

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

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

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

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

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

ब्राउज़र सहायता

  • 36
  • 79
  • 36
  • 9.1

सोर्स

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

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

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

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

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

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

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

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

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