वेब एनिमेशन उपयोगकर्ता अनुभव में उल्लेखनीय रूप से सुधार कर सकते हैं लेकिन अगर सावधानी से लागू नहीं किया गया तो वेबसाइट के प्रदर्शन पर भी असर पड़ सकता है। इस लेख में, मैं एक वृत्त तत्व को एनिमेट करने के तीन अलग-अलग तरीकों की तुलना करूंगा जो आकार में स्पंदित होते हैं। मैं सीएसएस, अअनुकूलित जावास्क्रिप्ट और अनुकूलित जावास्क्रिप्ट का उपयोग करूंगा, और मैं आपको दिखाऊंगा कि Chrome DevTools का उपयोग करके उनके प्रदर्शन को कैसे मापें।

वेब एनिमेशन का परिचय

एनिमेशन आधुनिक वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा हैं। उन्हें विभिन्न तरीकों का उपयोग करके कार्यान्वित किया जा सकता है, आमतौर पर शुद्ध सीएसएस या जावास्क्रिप्ट के साथ। हालाँकि, हर विधि समान रूप से अच्छा प्रदर्शन नहीं करती है। इसे प्रदर्शित करने के लिए, मैंने तीन अलग-अलग तरीकों का परीक्षण करने का निर्णय लिया:

• सीएसएस के साथ बनाए गए एनिमेशन।
• जावास्क्रिप्ट का उपयोग कर अअनुकूलित एनिमेशन।
• RequestAnimationFrame के साथ जावास्क्रिप्ट का उपयोग करके अनुकूलित एनिमेशन।

परियोजना की स्थापना

प्रोजेक्ट GitHub पर उपलब्ध है। आप इसे आसानी से डाउनलोड करके आज़मा सकते हैं।

गिट क्लोन https://github.com/TomasDevs/animation-performance-test.git
सीडी एनीमेशन-प्रदर्शन-परीक्षण

एक बार जब आप इसे डाउनलोड कर लें, तो फ़ोल्डरों की जांच करें css-animation, js-animation-optimized, और js-animation-unoptimized।

GitHub पर प्रोजेक्ट आज़माएं

प्रदर्शन मापना

प्रदर्शन को मापने के लिए, मैंने Chrome DevTools के प्रदर्शन पैनल का उपयोग किया। प्रत्येक एनिमेशन 10 सेकंड के लिए चलाया गया।

प्रदर्शन परिणाम और विश्लेषण

सीएसएस एनीमेशन

स्रोत: टॉमसडेव्स द्वारा निर्मित (2024)

• कुल अवरोधन समय: 390 एमएस

नोट:
सीएसएस एनिमेशन बेहतर प्रदर्शन करते हैं क्योंकि वे ब्राउज़र के मूल रेंडरिंग इंजन पर ऑफलोड हो जाते हैं, खासकर जब ट्रांसफॉर्म या अपारदर्शिता जैसे गुणों के साथ काम करते हैं। यह एनीमेशन स्क्रिप्टिंग और रेंडरिंग समय पर न्यूनतम प्रभाव के साथ अत्यधिक कुशल है।

अनुकूलित जावास्क्रिप्ट एनीमेशन

स्रोत: टॉमसडेव्स द्वारा निर्मित (2024)

• कुल अवरोधन समय: 400 एमएस

नोट:
अनुकूलित JS संस्करण एनीमेशन को प्रबंधित करने के लिए requestAnimationFrame और एक स्मूथ साइन वेव फ़ंक्शन का उपयोग करता है। हालाँकि इसमें CSS एनिमेशन की तुलना में अधिक स्क्रिप्टिंग समय की आवश्यकता होती है, फिर भी यह काफी कुशलता से चलता है और रेंडरिंग और पेंटिंग के समय को कम रखता है।

अअनुकूलित जावास्क्रिप्ट एनिमेशन

स्रोत: टॉमसडेव्स द्वारा निर्मित (2024)

• कुल अवरोधन समय: 440 एमएस

नोट:
गैर-अनुकूलित जेएस संस्करण समय की प्रगति पर विचार किए बिना एक सरल लूप का उपयोग करता है। इससे एनीमेशन के प्रत्येक फ्रेम के लिए अकुशल गणनाओं के कारण स्क्रिप्टिंग, रेंडरिंग और पेंटिंग का समय बहुत अधिक हो जाता है।

निष्कर्ष

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

चर्चा में शामिल हों

वेब एनिमेशन को अनुकूलित करने में आपके क्या अनुभव हैं? क्या आपके पास प्रदर्शन बढ़ाने के लिए कोई अतिरिक्त युक्तियाँ या तरकीबें हैं? मुझे नीचे टिप्पणी में बताये!