CSS3 में हार्डवेयर-त्वरण को सक्षम करने से प्रदर्शन धीमा क्यों होता है?

Question

मैं से एक संक्रमण का उपयोग कर एक css3 प्रयोग में 6000 छोटे div तत्वों आगे बढ़ रहा हूँ top: 0करने के लिए top: 145pxपरीक्षण के प्रदर्शन करने के लिए।

Google Chrome पर कोई हार्डवेयर-त्वरण का उपयोग करना सुचारू रूप से नहीं चलता है।

यदि मैं translateZ(0)प्रदर्शन के माध्यम से हार्डवेयर-त्वरण को सक्षम करता हूं तो यह भयानक हो जाता है।

ऐसा क्यों हैं?

यहाँ मेरा उदाहरण कोड है: http://dl.dropboxusercontent.com/u/17844821/tmp/hitt.html

---

अद्यतन (2014-11-13): चूंकि यह प्रश्न अभी भी ध्यान आकर्षित कर रहा है, इसलिए मैं यह बताना चाहूंगा कि समस्या अभी भी मौजूद है, हालांकि उल्लेखित हकलाना आधुनिक हार्डवेयर पर प्रदत्त डेमो में अब दिखाई नहीं दे सकता है । पुराने उपकरणों में अभी भी प्रदर्शन समस्याएं देखी जा सकती हैं।

Comments

असली सवाल यह है कि क्यों कुछ ब्राउज़र चाहते हैं कि लेखक मूर्खतापूर्ण हैक का सहारा लें, जैसे "नल" हार्डवेयर त्वरण को सक्रिय करने के लिए बदल देता है। फ़ायरफ़ॉक्स जितना संभव हो उतना GPU के लिए हार जाता है, जबकि IE आईई को बेहतर बनाने के लिए चुनता है! लेकिन दिलचस्प सवाल यहाँ, फिर भी, जैसा कि यह प्रदर्शित करता है कि हैक इस तरह से कभी-कभी बैकफ़ायर भी कर सकते हैं।

— BoltClock

@ BoltClock का ananicnic मूल रूप से मैं आपसे सहमत हूं। लेकिन क्या यह हमेशा क्रॉस-ब्राउज़र मुद्दों के साथ ऐसा नहीं रहा है? :-)

— तिमो

मैंने यह सवाल काफी पहले पूछा था, लेकिन मैंने देखा कि अब आइटम की संख्या समस्या पर बड़ा प्रभाव डालती है। 3 डी-त्वरण का उपयोग करते समय बहुत सी छोटी वस्तुओं को स्थानांतरित करने की तुलना में कुछ बड़ी वस्तुओं को स्थानांतरित करना अधिक महत्वपूर्ण है क्योंकि सभी 3 डी-त्वरित परतों को GPU और वापस जाने के लिए स्थानांतरित किया जाना है। तो भले ही GPU एक अच्छा काम करता है, कई वस्तुओं का स्थानांतरण एक समस्या हो सकती है ताकि GPU त्वरण का उपयोग करना इसके लायक न हो।

— तिमो

मुझे किसी भी ब्राउज़र पर उदाहरण में कोई प्रदर्शन अंतर दिखाई नहीं देता है और अब कोई प्रतिलिपि के रूप में बंद करने के लिए मतदान किया है।

— जेसन सी

@Timo ने विंडोज 7 64-बिट पर, जो भी नवीनतम फ़ायरफ़ॉक्स और क्रोम हैं, और IE11 पर जाँच की है, एक काफी पुरानी 2.3 गीगाहर्ट्ज i5 थिंकपैड पर एक nVidia 4200M के साथ, दोनों विकल्प मुझे सहज लगते हैं। श्रग

— जेसन C

Answer 1

मैं हमेशा जोड़ता हूं:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

जब 3 डी परिवर्तन के साथ काम करना। यहां तक ​​कि "नकली" 3 डी रूपांतरित करता है। अनुभव बताता है कि ये दो लाइनें हमेशा प्रदर्शन में सुधार करती हैं, विशेष रूप से आईपैड पर बल्कि क्रोम पर भी।

मैंने आपके उदाहरण पर परीक्षण किया और जहां तक ​​मैं बता सकता हूं, यह काम करता है।

आपके प्रश्न का "क्यों" भाग के रूप में ... मुझे नहीं पता। 3 डी परिवर्तन एक युवा मानक है, इसलिए कार्यान्वयन तड़का हुआ है। इसलिए यह एक पूर्वनिर्मित संपत्ति है: बीटा परीक्षण के लिए। कोई बग रिपोर्ट या एक प्रश्न भर सकता है और टीम की जांच कर सकता है।

अगस्त 19 वीं 2013 तक संपादित करें :

इस उत्तर पर नियमित गतिविधि है, और मुझे सिर्फ एक घंटे का समय लगता है कि IE10 को भी इसकी आवश्यकता है। तो मत भूलना:

backface-visibility: hidden;
perspective: 1000;

Comments

मैंने एक और परीक्षण किया। मूल रूप से परीक्षण # 1 के समान है, लेकिन इस बार मैंने बक्से को z- अक्ष के चारों ओर -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html के माध्यम से घूमने दिया - इस बार हार्डवेयर त्वरित संस्करण तेज है! यदि मैं रोटेशन को हटाता हूं, तो हार्डवेयर त्वरण एनीमेशन को धीमा कर देता है। यदि आपका सिद्धांत सही है, तो यह काम नहीं करना चाहिए (क्योंकि अंतर केवल इतना है कि मैंने जोड़ा है rotateZ(360))। दूसरी ओर, शायद क्रोम यह महसूस करने के लिए पर्याप्त स्मार्ट है कि जेड-एक्सिस के चारों ओर घूमने के लिए उन टाइलों के पीछे की तरफ किसी भी प्रकार की रीडिंग की आवश्यकता नहीं है?

— तिमो

अब iOS6 में यह बात नहीं है :-(

— माइकल मुल्तान

@ टिमो सिर्फ एक सिर है, w3schools w3c से संबद्ध नहीं है: w3fools.com

— काइल रॉबिन्सन यंग

आपको यह जोड़ना चाहिए कि इन लाइनों को कहाँ जोड़ना है, न कि केवल एक सामान्य "बस इसे जोड़ें .." खुद मुझे पता है कि कहाँ है, लेकिन कई नहीं।

— vsync

इसे उन तत्वों के माता-पिता में जोड़ें जिन्हें आप एनिमेट कर रहे हैं।

— mdw

Answer 2

जब आप null ट्रांस्फ़ॉर्म हैक ( translateZ(0)) जोड़ते हैं, तो एनीमेशन का कारण धीमा था , यह है कि प्रत्येक null 3D ट्रांसफ़ॉर्म एक नई परत बनाता है। जब इनमें से बहुत सारी परतें होती हैं, तो रेंडरिंग परफॉरमेंस भुगतना पड़ता है क्योंकि ब्राउज़र को बहुत सारे टेक्सचर को जीपीयू में भेजना पड़ता है।

2013 में एप्पल के होमपेज पर समस्या देखी गई थी, जिसमें नल ट्रांसफॉर्म हैक का दुरुपयोग किया गया था। Http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/ देखें

ओपी ने भी अपनी टिप्पणी में स्पष्टीकरण को सही ढंग से देखा :

3 डी-त्वरण का उपयोग करते समय बहुत सी छोटी वस्तुओं को स्थानांतरित करने की तुलना में कुछ बड़ी वस्तुओं को स्थानांतरित करना अधिक महत्वपूर्ण है क्योंकि सभी 3 डी-त्वरित परतों को GPU और वापस जाने के लिए स्थानांतरित किया जाना है। तो भले ही GPU एक अच्छा काम करता है, कई वस्तुओं का स्थानांतरण एक समस्या हो सकती है ताकि GPU त्वरण का उपयोग करना इसके लायक न हो।

Answer 3

दिलचस्प। मैंने कुछ विकल्पों के साथ खेलने की कोशिश की है about:flags, विशेष रूप से ये हैं:

सभी पृष्ठों पर GPU कंपोज़िटिंग GPU- त्वरित कंपोज़िटिंग का उपयोग सभी पृष्ठों पर करता है, न कि केवल उन GPU-त्वरित परतों को शामिल करता है।

GPU त्वरित ड्राइंग सक्षम करें GPU सक्षम होता है जब कंपोज़िटिंग सक्षम हो, तो पृष्ठ सामग्री का ड्राइंग त्वरित हो।

GPU त्वरित कैनवास 2 डी ग्राफिक्स प्रोसेसर यूनिट (GPU) हार्डवेयर का उपयोग करके एक 2D संदर्भ के साथ कैनवास टैग के उच्च प्रदर्शन को सक्षम करता है।

उन लोगों को सक्षम किया गया, जिन्होंने इसे आज़माया और टिकबॉक्स सक्षम (जैसे आपने किया) के साथ बुरी तरह विफल रहे। लेकिन तब मैंने एक और विकल्प पर ध्यान दिया:

FPS काउंटर एक पृष्ठ की वास्तविक फ्रेम दर दिखाता है, फ्रेम प्रति सेकंड में, जब हार्डवेयर त्वरण सक्रिय होता है ।

झंडे के विवरण पर प्रकाश डालते हुए, मैं अनुमान लगाता हूं कि हार्डवेयर त्वरण वास्तव में था, बिना टिक किए चेकबॉक्स के बिना भी मेरे लिए, क्योंकि मैंने एफपीएस काउंटर को ऊपर दिए गए विकल्पों के साथ देखा था!

टीएल; डीआर: हार्डवेयर त्वरण अंत में, एक उपयोगकर्ता वरीयता है; डमी के साथ इसे मजबूर करने translateZ(0)से निचले प्रदर्शन की उपस्थिति देने वाले अनावश्यक प्रसंस्करण ओवरहेड का परिचय होगा।

Comments

ठीक है, तो इसे देखें। मैंने एक और परीक्षण किया। मूल रूप से परीक्षण # 1 जैसा ही है, लेकिन इस बार मैंने इसके अलावा -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html को जोड़कर बक्से को अपने स्वयं के अक्ष के चारों ओर घुमाया - इस बार हार्डवेयर त्वरित संस्करण तेज है! यदि मैं रोटेशन को हटाता हूं, तो हार्डवेयर त्वरण एनीमेशन को धीमा कर देता है।

— तिमो

@valmar: क्या आप एफपीएस काउंटर को सक्षम कर रहे हैं? इस नए उदाहरण में मैं इसे देखता हूं कि मैं चेकबॉक्स कैसे सेट करता हूं जिसका अर्थ है कि हार्डवेयर त्वरण अभी भी मजबूर है। मुझे लगता है कि आपका प्रश्न "क्यों translateZ(0)धीमी है rotateZ(360deg)"

— ov

दरअसल नहीं। translateZ(0)हमेशा सक्रिय है। यह वास्तव में 3 डी त्वरण को ट्रिगर करने के लिए आवश्यक है। rotateZ(360deg)बस इसके अलावा रोटेशन एनीमेशन जोड़ता है। तो मैं कहूंगा कि प्रश्न यह है: 3 डी हार्डवेयर त्वरण के साथ एनीमेशन rotateZ(360deg)बिना के साथ चिकना क्यों है ?

— तिमो

यह विश्वास नहीं कर सकता। हार्डवेयर त्वरण के बिना भारी छवियों का रोटेशन तेज है ...

— ProblemsOfSumit

Answer 4

क्रोम में चेक करें: // झंडे क्रोम में। इसे कहते हैं

"जब थ्रेडेड कंपोज़िटिंग को सक्षम किया जाता है, तो त्वरित सीएसएस एनिमेशन कंपोज़िटिंग थ्रेड पर चलते हैं। हालाँकि, कंपोज़िटर थ्रेड के बिना भी त्वरित सीएसएस एनिमेशन के साथ प्रदर्शन लाभ हो सकते हैं।"

Comments

मैं उस विकल्प को क्रोम: // झंडे पर यहाँ नहीं ढूँढ सकता। यदि आप उस सुविधा को बंद कर देते हैं, तो हार्डवेयर-त्वरित संस्करण तब तेजी से फिर आपके लिए गैर-त्वरित है?

— तिमो

अब यह विकल्प DevTools सेटिंग्स में है

— दिमित्री पश्केविच

Answer 5

मेरा अनुभव यह है कि हर तरह के ग्राफिक्स के लिए जीपीयू आमतौर पर तेज नहीं होते हैं। बहुत "बुनियादी" ग्राफिक्स के लिए वे धीमे हो सकते हैं।

यदि आप एक छवि को घुमा रहे थे, तो आपको अलग-अलग परिणाम मिल सकते हैं - यह उसी तरह की बात है कि जीपीयू अच्छे हैं

यह भी विचार करें कि ट्रांसजेड (0) 3 आयामों में एक ऑपरेशन है, जबकि शीर्ष या बाईं ओर बदलना 2 आयामी ऑपरेशन है

Comments

बहुधा इसके कार्यान्वयन का मुद्दा है। जीपीयू सभी ग्राफिक्स के लिए बहुत तेज है, जब तक आप इसे सही तरीके से लागू करते हैं;)

— साइंटिस्टेस्टे

translateZ(0)वास्तव में 3 डी हार्डवेयर त्वरण को "सक्रिय" करने के अलावा कुछ नहीं करता है। यह हैक है लेकिन यह काम करता है। उस सीएसएस विशेषता को जोड़ने पर, चयनित HTML तत्व और साथ ही सभी बाल तत्वों को सीपीयू के बजाय GPU द्वारा बल-गणना की जाएगी।

— टिमो

मैं सभी निम्न-स्तरीय कार्यान्वयन विवरण नहीं जानता। मैं qt के साथ इसी तरह के मुद्दों था - हार्डवेयर त्वरण चीजों को धीमा। मैं नहीं जानता कि किस बिंदु पर (या क्या) कंप्यूटर को पता चलता है कि ट्रांसलेट (0) को अनदेखा किया जा सकता है, और परिवर्तन को 2 आयामों में आंदोलन के रूप में संसाधित किया जा सकता है। (कोई परिप्रेक्ष्य नहीं, कोई एंटी-अलियासिंग नहीं, हर पिक्सेल के लिए कोई z + = 0 नहीं)

— सबॉफ़

वैज्ञानिक ग्राफिक्स , जीपीयू सभी ग्राफिक्स के लिए गणित करने के लिए तेज नहीं है , क्योंकि यह सीपीयू और GPU और GPU- मेमोरी को कमांड और मेमोरी को स्थानांतरित करने के लिए सीपीयू प्रयास लेता है। उस प्रयास के लिए जटिलता का एक टूटना-बिंदु है, जबकि मूल्य बनने के लिए। YMMV <पूर्व विधानसभा हाथ-अनुकूलक यहाँ;)

— tomByrer

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

— मिको रांटलैनेन

Answer 6

मैंने आपको दो डेमो देखे I मुझे लगता है कि मैं आपको भ्रमित करने का कारण जानता हूं ，

1. एनीमेशन तत्व स्थान को बदलने के लिए बाएं या शीर्ष का उपयोग न करें, -webkit- परिवर्तन का उपयोग करने का प्रयास करें;
2. सभी बाल तत्वों को हार्डवेयर त्वरण को चालू करने की आवश्यकता होती है जैसे कि ट्रांसलेज़ () या ट्रांसल 3 डी का उपयोग करें;
3. एफपीएस माप एनीमेशन प्रवाह, आपके डेमो एफपीएस औसतन केवल 20 एफपीएस।

ऊपर, केवल एक व्यक्तिगत राय, धन्यवाद!

Comments

ढेर अतिप्रवाह में आपका स्वागत है! कृपया अपने पोस्ट में हस्ताक्षर / टैगलाइन का उपयोग न करें। आपका उपयोगकर्ता बॉक्स आपके हस्ताक्षर के रूप में गिना जाता है, और आप अपनी प्रोफ़ाइल का उपयोग अपने बारे में किसी भी जानकारी को पोस्ट करने के लिए कर सकते हैं। हस्ताक्षर / टैगलाइन पर अक्सर पूछे जाने वाले प्रश्न

— एंड्रयू बार्बर

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

— एंड्रयू बार्बर

好吧,你"淫"了不过还是很感谢,还不太熟悉"stackoverflow"的

— 一丝冰凉

आपका स्वागत है। कृपया यह भी ध्यान दें कि यह एक अंग्रेजी-केवल वेबसाइट है। :) आपका नाम ठीक है, लेकिन आपके पोस्ट अंग्रेजी में होने चाहिए, कृपया।

— एंड्रयू बार्बर

了 please 苦, मैं अंग्रेजी नहीं बोलता, कृपया मुझे क्षमा करें।

— । 一丝