अनुवाद के लिए सीएसएस प्रदर्शन (0)

Question

कई ब्लॉगों ने जीपीयू को 'ट्रिकिंग' में प्रदर्शन लाभ व्यक्त किया है, यह सोचने के लिए कि एनीमेशनका उपयोग करके एनिमेशन और संक्रमण को तेज करने के लिए 3 डी है। the spec. में वर्णित के रूप में सादे अंग्रेजी में

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

Answer 1

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

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

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

Answer 2

यदि आप प्रभाव चाहते हैं, in some scenarios Google Chrome performance is horrible with hardware acceleration enabled। विचित्र रूप से पर्याप्त, "चाल" को -webkit-transform: rotateZ(360deg); में बदलकर ठीक काम किया।

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

Answer 3

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

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

Answer 4

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

सौभाग्य से, मुझे पहले से ही हार्डवेयर त्वरण हुआ है, क्योंकि मेरे पास HTML तत्व पर -webkit-font-smoothing: antialiased था। मैं आईओएस 7 और एंड्रॉइड में इस व्यवहार का परीक्षण कर रहा था।

Answer 5

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

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

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

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