क्या jQuery fadeIn या CSS3 एनीमेशन का उपयोग करना बेहतर है?

Question

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

@-webkit-keyframes fadeIn { 
0% { opacity: 0; } 
100% { opacity: 1; } 
} 

और एक jQuery फीडइन।

मैं fadeIn से कॉलबैक का उपयोग करना चाहता हूं लेकिन मैं केवल सीएसएस के साथ एक टाइमर का उपयोग कर सकता हूं।

इनमें से कोई भी बड़ी छवियों के साथ बेहतर काम करने की संभावना है? मुझे कोई अंतर नहीं दिख रहा है, लेकिन आश्चर्य हुआ कि क्या यह धीमे कंप्यूटर को प्रभावित कर सकता है।

Answer 1

दूसरे के साथ फॉलबैक के साथ कैसे? जहां संभव हो, CSS3 संक्रमण का उपयोग करें, और यह निर्धारित करने के लिए कि क्या उपयोगकर्ता का ब्राउज़र CSS3 संक्रमणों में सक्षम है या नहीं, एक आधुनिक पहचानकर्ता लाइब्रेरी का उपयोग करें।

यदि और केवल अगर उपयोगकर्ता का ब्राउज़र देशी एनिमेशन का समर्थन नहीं करता है, तो केवल आपको jQuery का उपयोग करना चाहिए।

मूल एनिमेशन जीपीयू त्वरित हैं, जिसके परिणामस्वरूप सीपीयू पर कम बाधा होती है, और बहुत आसान एनिमेशन होते हैं। इसके अलावा, इसे जावास्क्रिप्ट की आवश्यकता नहीं है और न ही इसे खींचने के लिए अतिरिक्त अनुरोध लेते हैं।

Answer 2

ठीक है, मुझे लगता है कि एक समर्थित ब्राउज़र होने पर सीएसएस एनीमेशन का उपयोग करना बहुत बेहतर है और आपको केवल असमर्थित ब्राउज़र के लिए बैकअप के रूप में jQuery का उपयोग करना चाहिए। जैसा कि http://dev.opera.com/articles/view/css3-vs-jquery-animations पर पूरी तरह से समझाया गया है, उन्होंने सीएसएस और jQuery दोनों के साथ एक ही समय में 300 divs एनिमेट करने का परीक्षण किया, और प्रदर्शन आंकड़ों के बीच एक बड़ा अंतर देखा।

सांख्यिकी सीएसएस का उपयोग कर एनीमेशन थे:

- एनीमेशन खत्म करने के लिए प्रदर्शन कार्यों की संख्या: -: 2.9 सेकंड
- मेमोरी अंत में भस्म समय एनीमेशन क्रियान्वित खत्म करने के लिए ले जाया 100
एनीमेशन के: 1.5 एमबी

और सांख्यिकी का उपयोग कर jQuery थे:

- एनीमेशन खत्म करने के लिए प्रदर्शन कार्यों की संख्या: -: 5 सेकंड
- मेमोरी एनीमेशन के अंत में भस्म: समय एनीमेशन क्रियान्वित खत्म करने के लिए ले जाया 2119
6 एमबी

तो, आप के रूप में देख सकते हैं, प्रदर्शन के बीच एक बड़ा अंतर है। ऐसा इसलिए है क्योंकि ब्राउजर का सीएसएस प्रोसेसर सी ++ में लिखा गया है और देशी कोड बहुत तेज़ निष्पादित करता है जबकि jQuery (जावास्क्रिप्ट) एक व्याख्या की गई भाषा है और ब्राउजर अगली बार आगे आने वाली घटना के संदर्भ में जावास्क्रिप्ट को भविष्य में भविष्यवाणी नहीं कर सकता है, प्रदर्शन के लिए इसे अनुकूलित करने के लिए ब्राउज़र को प्रतिबंधित करता है। मुझे आशा है कि आपके प्रश्न का उत्तर दें।