तेजी से क्या है? CSS3 संक्रमण या jQuery एनिमेशन?

Question

मैं एक iPad एचटीएमएल 5 एप्लिकेशन पर काम कर रहा हूँ और मैं पहले से ही ontouch समर्थन को क्रियान्वित किया है तेजी से घटनाओं को गति प्रदान करने और मैं तत्वों आसान निशाना बनाने के लिए jQuery का उपयोग कर रहा है, लेकिन एनिमेशन के लिए मैं CSS3 के संक्रमण

उपयोग कर रहा हूँ क्या क्या आपको लगता है कि तेज़ है? jQuery एनीमेशन का उपयोग करके, क्योंकि मैंने पहले ही लाइब्रेरी आयात की है या jQuery के साथ तत्वों को लक्षित करते समय CSS3 संक्रमण का उपयोग किया है?

Answer 1

this link के अनुसार, jQuery एनीमेशन बहुत धीमी है तो सीएसएस एनीमेशन।

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

Answer 2

सीएसएस एनिमेशन लगभग हमेशा तेज होंगे।

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

http://css.dzone.com/articles/css3-transitions-vs-jquery

संबंधित प्रश्न: Performance of CSS Transitions vs. JS animation packages

Answer 3

CSS3 के संक्रमण तेजी होना चाहिए क्योंकि वे ब्राउज़र के मूल निवासी हैं।

Answer 4

Mozilla developer documentation raises some interesting points regarding CSS3 animation:

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

WebKit (which powered Safari) also makes use of hardware accelerated compositing, जो इस समय जावास्क्रिप्ट किसी भी चीज़ से प्रदर्शन पर अधिक प्रभाव डाल सकता है। (मुझे लगता है कि यह बहुत जल्द बदल जाएगा हालांकि गणनाओं को प्रबंधित करने के लिए और अधिक फ़ंक्शंस जोड़े गए हैं) ऐसा इसलिए है क्योंकि यह जावास्क्रिप्ट जैसी अनुवादित भाषा के माध्यम से होने के बजाय गणना करने के लिए समर्पित हार्डवेयर का लाभ उठाएगा।

मैं 100% निश्चित नहीं हूं कि आईपैड पर वेबकिट हार्डवेयर त्वरित है; हालांकि यह कारण बन जाएगा कि यह मानकीकृत है और लोकप्रियता में बढ़ रहा है, यह केवल समय के साथ ही सुधार होगा।

Answer 5

here

एक सिर से सीएसएस संक्रमण और jQuery के animate की तुलना सिर। बार-बार चलाने के लिए टाइमर सेट करने की बजाय, ब्राउज़र द्वारा संक्रमण को को नियंत्रित किया जाता है। मेरे बजाय अवैज्ञानिक परीक्षण में, संक्रमण हमेशा तेज होते हैं, उच्च फ्रेम दर के साथ चलते हैं, खासकर तत्वों की उच्च संख्या के साथ। उनके पास लाभ भी है कि प्लगइन पर भरोसा करने के बजाय रंग आसानी से एनिमेटेड हो सकते हैं।

इस निष्कर्ष के साथ एक परीक्षण here।

जावास्क्रिप्ट टाइमर पर आधारित एनिमेशन देशी एनिमेशन, के रूप में के रूप में जल्दी कभी नहीं हो सकता क्योंकि वे भी उसी अनुकूलन बनाने के लिए ब्राउज़र के लिए पर्याप्त करने के लिए पहुँच नहीं है। इन एनिमेशनों को केवल विरासत ब्राउज़र में फ़ॉलबैक के रूप में उपयोग किया जाना चाहिए।

इसके अलावा this नोटिस,

CSS3 के एनिमेशन terriffic हैं, लेकिन अपने प्रोसेसर की शक्ति का एक बहुत का उपयोग करते हैं। CSS3 के साथ एनीमेशन को ठीक तरह से ट्यून करने का कोई तरीका नहीं है, उसी तरह आप jQuery जैसे ढांचे का उपयोग कर सकते हैं। इसलिए, जब तक CSS3 एनीमेशन सीपीयू अनुकूल नहीं हैं तब तक आप jQuery के साथ बेहतर छड़ी।

Answer 6

CSS3 तेज होगा क्योंकि यह ब्राउज़र के साथ मानक आता है जहां JQuery एक और फ़ाइल है जिसे लोड किया जाना है, हालांकि मुझे पता चला है कि जेवीसी बहुत चिकनी चल सकती है। कभी-कभी शुद्ध जावास्क्रिप्ट के साथ प्रयोग करना भी अच्छा होता है।

Answer 7

यदि आप कैनवास टैग के साथ jQuery/जावास्क्रिप्ट एनीमेशन का उपयोग कर रहे हैं (जो कि अगर मैं गलत नहीं हूं तो अभी भी टाइमर पर निर्भर करता है ... हालांकि इसके साथ खेलने के लिए नया), तो यह आपको हार्डवेयर का लाभ देता है जावास्क्रिप्ट के साथ त्वरण। यदि आप होवर करते समय बस कुछ स्थानांतरित करना चाहते हैं तो संक्रमण बहुत अच्छा काम करते हैं। सीएसएस संक्रमण थोड़ा आसान हो सकता है लेकिन यह एक व्यापार बंद है, आप संक्रमण का उपयोग करके एनीमेशन पर जावास्क्रिप्ट नियंत्रण का एक टन छोड़ रहे हैं। मैं शैली में सीएसएस और व्यवहार में शैली रखना पसंद करता हूं - ऐसा नहीं है कि इसे किसी भी तरह से काम करना चाहिए? सीएसएस संक्रमणों ने तर्क दिया कि तर्क ...

Answer 8

इसका सीएसएस 3 तेज है और कम स्मृति का उपभोग करता है और चिकना है। सीएसएस प्रोसेसर सी ++ में लिखा गया है और देशी कोड बहुत तेज निष्पादित करता है जबकि jQuery (जावास्क्रिप्ट) एक व्याख्या की गई भाषा है और ब्राउज़र समय पर जावास्क्रिप्ट की भविष्यवाणी नहीं कर सकता है। http://dev.opera.com/articles/view/css3-vs-jquery-animations/

देखें ऊपर के लिंक प्रयोगों बनाम jQuery CSS3 पर आयोजित

Answer 9

This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) सीएसएस का एक बहुत अच्छा तुलना बदल देती है बनाम बनाम GSAP jQuery एनिमेशन (एक और JavaScript लाइब्रेरी) के बारे में पता करने के लिए।

सीएसएस एनिमेशन jQuery से काफी तेज़ हैं। हालांकि, ज्यादातर उपकरणों और ब्राउज़र मैं परीक्षण किया पर, जावास्क्रिप्ट आधारित GSAP CSS एनिमेशन से भी बेहतर प्रदर्शन किया

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

Answer 10

मूल को तेज़ माना जाना चाहिए, लेकिन यदि ब्राउज़र डेवलपर्स मैला (या आलसी) हैं, तो वे खराब कोड लिखते हैं, जिससे सीएसएस एनिमेशन (या संक्रमण) के साथ खराब परिणाम होते हैं।

आजकल, jQuery में एक प्लगइन है जो "एनीमेशन" फ़ंक्शन को "बेहतर" के साथ ओवरराइड करता है। Velocity देखें। मैं जावास्क्रिप्ट के साथ डोम को एनिमेट करने के अन्य तरीकों में नहीं जा रहा हूं क्योंकि यह इस प्रश्न के दायरे से बाहर है।

तो, जैसा कि है, jQuery सीएसएस से धीमा है। भी, सीएसएस लिखना आसान है क्योंकि आपके पास पहले से ही तत्व शैली है, इसलिए कुछ नियमों को जोड़ना एक ऐसी स्थिति की तुलना में आसान है जहां आपको कहीं जेएस लिखना शुरू करना है और इसे प्रबंधित करना है .. लेकिन जटिल, भारी सामग्री के लिए, जेएस है तेजी से, दुख की बात है।

इस प्रश्न के सटीक एक बहुत अच्छा लेख - http://davidwalsh.name/css-js-animation