सीएसएस संक्रमण बनाम जेएस एनीमेशन पैकेज का प्रदर्शन

Question

मुझे आश्चर्य है कि विभिन्न जावास्क्रिप्ट एनीमेशन पुस्तकालयों में से किसी भी सीएसएस संक्रमण बनाम प्रदर्शन के प्रदर्शन में कोई अंतर है? (script.aculo.us, scripty2, jsAnim, MooTools, $fx, आदि)।

मैं क्रोमसफारी और में विभिन्न परीक्षणों की कोशिश की है, लेकिन मैं वास्तव में कोई अंतर नहीं दिख रहा। मैंने सोचा कि सीएसएस संक्रमण हार्डवेयर को तेज किया जाना चाहिए था।

---

अद्यतन:

मैं Scriptaculous 'Effect.Fade 5 पर अलग DIVs (प्रत्येक कुछ लाइनों के साथ एक कैनवास युक्त) का उपयोग कर की कोशिश की है। सीएसएस संक्रमण का उपयोग कर सटीक वही काम करना, मुझे प्रदर्शन में बिल्कुल कोई फर्क नहीं पड़ता। दोनों एक डीवी/कैनवास के साथ बहुत चिकनी थे, लेकिन जब मैं एक समय में 2 से अधिक करता हूं तो दोनों बहुत धीमे होते हैं।

मैं सफारी 4, 5 (OSX), गूगल क्रोम 5 और फ़ायर्फ़ॉक्स 3.7pre में यह कोशिश की है। बोर्ड भर में वही परिणाम।

उपहेलिक्स की प्रतिक्रिया के जवाब में, आप बस hover आदि तक सीमित नहीं हैं। आप transitionable शैली को बदलकर एक संक्रमण को ट्रिगर कर सकते हैं। उदाहरण के लिए, जावास्क्रिप्ट में किसी तत्व की अस्पष्टता सेट करें (उसके बाद, आपने उस तत्व के लिए transitionPropery और transitionDuration निर्दिष्ट किया है)।

Answer 1

हां एक अंतर है, सीएसएस बहुत तेज़ है। यह देखना मुश्किल हो सकता है जब तक कि आप एक ही समय में बहुत से नहीं चलते हैं या जितना अधिक करते हैं। हालांकि सीएसएस एनिमेशन सीमित हैं। ज्यादातर मामलों में वे वास्तव में केवल :hover ईवेंट से काम करते हैं। जावास्क्रिप्ट के साथ आप किसी भी घटना पर एनिमेशन प्रदर्शन कर सकते हैं: click, mouseover, mousemove, mouseout, keyup, keydown, आदि

मेरी राय jQuery में अब तक जावास्क्रिप्ट एनिमेशन के लिए सबसे अच्छा है। jQuery Demos

Answer 2

Uphelix के (सही) जवाब देने के लिए जोड़ने के लिए, देखें: जावास्क्रिप्ट एक व्याख्या की भाषा (प्रयोग किया जाता है और ब्राउज़र के जे एस इंजन पार्स करने और चलाने के समय के दौरान हर अनुदेश निष्पादित (मैं वहाँ पता जे एस compilers, वी 8 की तरह अस्तित्व में है क्रोम में), लेकिन सिद्धांत वही रहता है)।

दूसरी ओर, ब्राउज़र सीएसएस संक्रमण को मूल रूप से कार्यान्वित कर सकते हैं, उदा। सी/सी ++ या कुछ में। यह कोड मशीन भाषा में संकलित किया जाएगा।

सीएसएस संक्रमण त्वरित रहे हैं हार्डवेयर या नहीं, तकनीक ब्राउज़र का उपयोग करता पर निर्भर करता है, तो मंच ब्राउज़र पर चलता है, आदि

Answer 3

आप मोबाइल ब्राउज़र पर अंतर नोटिस जाएगा (iPhone, Android, आदि) ।

Answer 4

सीएसएस एनिमेशन में ब्राउज़र द्वारा संसाधित होने का लाभ होता है। फास्ट कंप्यूटेशंस और ऑप्टिमाइज़ेशन उपलब्ध हैं। मेरी राय में वेब एनिमेशन प्रदर्शन को "समग्र" दृष्टिकोण के रूप में देखा जाना चाहिए। सभी एनीमेशन के बाद, एफपीएस के मामले में, ब्राउजर रीफ्रेश होने पर तेज़ नहीं हो सकता है।

वास्तविक प्रदर्शन स्तर समग्र यूआई प्रदर्शन द्वारा दिया जाता है।एक जेएस और एक सीएसएस एनीमेशन समान दिख सकता है। हालांकि सीएसएस एनिमेशन जीतते हैं क्योंकि वे यूआई थ्रेड को अवरुद्ध नहीं करते हैं।

Stoyan Stefanov लिखा था और डेमो कैसे CSS एनिमेशन यूआई धागा से बाहर कर दिया जाता है: http://www.phpied.com/css-animations-off-the-ui-thread/