CSSZ के सापेक्ष सीएसएस प्रदर्शन (0)

96

कई ब्लॉगों ने GPU को 'ट्रिकिंग' में प्रदर्शन लाभ को यह सोचने के लिए व्यक्त किया है कि transform: translateZ(0)एनिमेशन और बदलावों को गति देने के लिए एक तत्व 3D है । मैं सोच रहा था कि निम्नलिखित तरीके से इस परिवर्तन का उपयोग करने के क्या निहितार्थ हैं:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

performance css translate-animation

— अहमद नुमान
स्रोत

6

क्या आप उन ब्लॉग लेखों से जुड़ सकते हैं?

— जुरगेन पॉल

@PineappleUndertheSea यह एक: blog.teamtreehouse.com/… मुझे यहाँ भेजा।

Btw, -o-transform: translateZ(0)एक बात कभी नहीं किया गया है। caniuse.com/#search=translate3d

— Volker E.

@ अहमद नूमन हाँ यह केवल एक चाल नहीं है। लेकिन आधिकारिक तौर पर इसका इस्तेमाल कुछ ऐप में किया जाता है। लेकिन अगर आप GPU के बिना एक डिवाइस (कम अंत) पर समाप्त होते हैं ... मुझे यकीन नहीं है कि यह कैसे प्रदर्शन करता है। लेकिन जब से एक प्रोसेसर (2D ग्राफिक्स) क्या कर सकता है GPU के लिए केवल इस कारण के लिए प्रत्यायोजित किया जाता है कि 3D कमांड है, हालांकि इसका कोई अंतिम प्रभाव नहीं है। और 3D इसके अंदर कई कोर का उपयोग करता है और तेजी से प्रदर्शन करता है। यही यहाँ समझ में आता है। कुछ और जांच की जरूरत ...

— टू जीजी

102

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

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

तो मूल रूप से, ऐसा मत करो। केवल 3 डी परिवर्तन लागू करें जब आपको अनुकूलन की आवश्यकता हो। -webkit-font-smoothing: antialiased;इन समस्याओं को पैदा किए बिना 3 डी त्वरण में टैप करने का एक और तरीका है, लेकिन यह केवल सफारी में काम करता है।

— दान ईडन
स्रोत

27

यदि आप निहितार्थ चाहते हैं, तो कुछ परिदृश्यों में Google Chrome प्रदर्शन हार्डवेयर त्वरण सक्षम होने के साथ भयानक है । ताज्जुब है, "चाल" को बदलकर -webkit-transform: rotateZ(360deg);बस ठीक काम किया।

मुझे विश्वास नहीं होता कि हमने कभी सोचा कि क्यों।

— ov
स्रोत

3

मेरे पास सफ़ेद 5 और 6 में अधिकतम ऊंचाई का उपयोग करके निचोड़ने वाली छवियां और बुरी तरह से गलत एनिमेशन जैसे मुद्दे थे। जब मैंने GPU त्वरण (TranslateZ (0)) को अक्षम किया, तो सब कुछ इरादा के अनुसार काम किया, लेकिन एनीमेशन पर्याप्त रूप से चिकनी नहीं थी। मैंने ट्रांसलेट (0) को बदलकर रोटजेड (360 डिग्री) में बदल दिया, और अचानक एनिमेशन सुचारू हो गए और हार्डवेयर में तेजी आई और कोई समस्या नहीं हुई।

— याकूब_जो ३०'१५

14

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

उपयोग -webkit-transform: translate3d(0,0,0);करने से सीएसएस ट्रांज़िशन के लिए GPU को कार्रवाई में किक किया जाएगा, जिससे वे स्मूथ (उच्चतर एफपीएस) हो जाएंगे।

नोट: translate3d(0,0,0) आप जो भी देखते हैं उसके संदर्भ में कुछ भी नहीं करता है। यह x, y और z अक्ष में 0px से ऑब्जेक्ट को ले जाता है। यह केवल हार्डवेयर त्वरण को मजबूर करने की तकनीक है।

अच्छा यहाँ पढ़ें: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

— नव
स्रोत

7

मैं इस तथ्य पर ध्यान दे सकता हूं कि -webkit-transform: translate3d(0, 0, 0);नई position: -webkit-sticky;संपत्ति के साथ खिलवाड़ होगा । बाएं दराज के नेविगेशन पैटर्न के साथ, जिस पर मैं काम कर रहा था, जिस हार्डवेयर त्वरण को मैं ट्रांसफॉर्म प्रॉपर्टी के साथ चाहता था, वह मेरी टॉप नेवी बार की निश्चित स्थिति से खिलवाड़ कर रहा था। मैंने ट्रांसफ़ॉर्मेशन को बंद कर दिया और पोज़िशनिंग ने ठीक काम किया।

सौभाग्य से, मुझे लगता है कि पहले से ही हार्डवेयर त्वरण था, क्योंकि मेरे पास -webkit-font-smoothing: antialiasedhtml तत्व था। मैं iOS7 और Android में इस व्यवहार का परीक्षण कर रहा था।

— जे। हॉग
स्रोत

5

GPU के लिए सब कुछ भेजने वाले मोबाइल उपकरणों पर एक मेमोरी ओवरलोड और एप्लिकेशन को क्रैश कर देगा। कॉर्डोवा में आईपैड ऐप पर मैंने इसका सामना किया। केवल GPU के लिए आवश्यक वस्तुओं को भेजने के लिए सबसे अच्छा, डिव्स जो आप विशेष रूप से चारों ओर घूम रहे हैं।

अभी तक बेहतर, 3 डी का उपयोग ~~संक्रमण~~ translateX (50px) के रूप में छोड़ दिया करने के लिए विरोध की तरह एनिमेशन करने के लिए रूपांतरण: 50px;

— नाशपाती की मदिरा
स्रोत

1

क्या आपका मतलब है "3 डी बदलाव का उपयोग करें" के बजाय "3 डी परिवर्तनों का उपयोग करें"?

— 21