CSS3 एनीमेशन और संक्रमण - ग्राफिक पृष्ठभूमि या डीओएम तत्व एनिमेट करने में ब्राउज़र बेहतर हैं?

Question

मैं एक वेब ऐप पर काम कर रहा हूं; इसकी डिजाइन आवश्यकताओं में से एक कई बड़े CSS3 एनीमेशन है।

विशेष रूप से - इसमें <div> है जो उपयोगकर्ता इनपुट के जवाब में स्क्रीन के चारों ओर परिवर्तित हो जाएगा।

ऐप डिज़ाइन किए जाने के तरीके के कारण, <div> की "सामग्री" को एक बड़े स्थैतिक ग्राफिक (उदा।, .jpg या .png) के रूप में <div> की पृष्ठभूमि के रूप में सेट किया जा सकता है।

या, सामग्री को मानक HTML के साथ भी कार्यान्वित किया जा सकता है। (सामग्री लेआउट स्वयं एक "छोटा" मुश्किल है - इसके लिए कई फ्लोटेड या तैनात नेस्टेड डिवी तत्वों और स्पैन की आवश्यकता होती है, लेकिन कुछ भी पागल नहीं होती है।)

मेरा प्रश्न है - कौन सा विकल्प सबसे अच्छा (सबसे आसान) एनिमेशन?

(मैं स्पष्ट रूप से यह स्वयं परीक्षण कर सकता हूं, लेकिन विशेष रूप से उपकरणों की एक विस्तृत श्रृंखला पर एक दर्जन विभिन्न ब्राउज़रों में एक एनीमेशन की चिकनीता का न्याय करना मुश्किल होता है। मुझे यह भी पता चलता है कि अन्य विचार हैं - उदाहरण के लिए, रखरखाव। लेकिन इस मामले में, मैं एनीमेशन प्रदर्शन पर पूरी तरह से ध्यान केंद्रित कर रहा हूँ।)

अगर ब्राउज़रों आम तौर पर animating में बेहतर कर रहे हैं मैं सोच रहा हूँ/सरल डोम तत्वों प्रतिपादन ग्राफिक पृष्ठभूमि, या अधिक जटिल डोम तत्वों के साथ (साथ बहुत सारे बच्चे) ग्राफिक तत्वों के बिना?

इसके अलावा - क्या अन्य दिशानिर्देश हैं? उदा।,

• क्या ब्राउज़र कुछ प्रकार के ग्राफिक तत्वों को दूसरों से बेहतर तरीके से एनिमेट करते हैं? (उदा।, .png बनाम .jpg)
• क्या ब्राउज़र तत्वों को position:absolute, जब बच्चे के तत्व फ़्लोट किए जाते हैं, या जब बच्चे तत्व की स्थिति नियमित दस्तावेज़ प्रवाह द्वारा निर्धारित की जाती है, तो क्या ब्राउज़र बेहतर तत्व को एनिमेट करते हैं?
• नेस्टेड तत्वों पर अस्पष्टता, ड्रॉप-छाया, या 3 डी ट्रांसफॉर्म जैसी चीजें माता-पिता तत्व की एनीमेशन पर प्रतिकूल प्रभाव डालती हैं?
• क्या एनीमेशन प्रदर्शन तत्व की जटिलता के संबंध में घटता है? उदाहरण के लिए, एक तत्व के साथ एक तत्व है जो घोंसला वाले डीओएम तत्व एनीमेशन के साथ एक साधारण तत्व की तुलना में कम आसानी से एक पाठ नोड के साथ करता है?

मुझे इन चीजों के बारे में अंतर्ज्ञान है (गहरा घोंसला वाले डोम तत्व एक साधारण तत्व से कम आसानी से एनिमेट करेंगे), लेकिन मेरा अंतर्ज्ञान अक्सर गलत होता है। इसलिए, मैं सोच रहा हूं कि ब्राउजर के लिए कम या ज्यादा काम करने के बारे में "नियम" हैं या नहीं।

मुझे और क्या विचार करना चाहिए जब बहुत से बच्चे तत्वों के साथ बड़े तत्व एनिमेटेड होते हैं?

Answer 1

आपके उत्तर प्रत्येक कार्यान्वयन द्वारा प्रयोग किया जाता विशिष्ट प्रतिपादन रणनीति पर निर्भर करेगा, लेकिन अगर आप "सामान्य" रणनीति के रूप में वेबकिट की रणनीति का उपयोग कर के साथ ठीक कर रहे हैं तो आपके सभी सवालों के जवाब इस दस्तावेज़ में झूठ बोलते हैं:

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

पहले एक "RenderObject" डोम पेड़ के क्लोन

इस बनाने के बाद, पेड़ चल जाता है और प्रत्येक RenderObject है या तो इंक उनके निकटतम पूर्वज की RenderLayer में या एक नया RenderLayer में यदि इनमें से किसी एक RenderObject के बारे में सच है orporated:

• यह पेज के लिए रूट वस्तु है
• यह है स्पष्ट सीएसएस स्थिति गुण (सापेक्ष, निरपेक्ष या एक को बदलने)
• यह पारदर्शी
• अतिप्रवाह, एक अल्फा मुखौटा या प्रतिबिंब
• है है एक सीएसएस फिल्टर
• से संगत है 0 तत्व एक 3 डी (WebGL) संदर्भ या एक त्वरित 2D प्रसंग
• एक <video> तत्व

इस के बाद से संगत है, पेड़ चल जाता है और प्रत्येक RenderLayer या तो उनके निकटतम पूर्वज की GraphicsLayer में शामिल किया जाता है

• परत है 3 डी या परिप्रेक्ष्य सीएसएस गुण को बदलने
• लेयर <video> eleme द्वारा किया जाता है: या एक नया GraphicsLayer में यदि इनमें से किसी एक RenderLayer के बारे में सच है NT त्वरित वीडियो डिकोडिंग
• स्तर का उपयोग कर एक 3 डी संदर्भ के साथ एक <canvas> तत्व द्वारा इस्तेमाल किया या त्वरित 2D प्रसंग
• लेयर
• लेयर इसकी अस्पष्टता के लिए एक CSS एनिमेशन का उपयोग करता है या एक एनिमेटेड वेबकिट को बदलने का उपयोग करता है एक सम्मिश्रित प्लगइन के लिए प्रयोग किया जाता है
• लेयर सीएसएस फिल्टर त्वरित उपयोग करता है
• लेयर वंशज एक संयोजन परत
• परत एक कम z- सूचकांक जो एक संयोजन परत होती है (दूसरे शब्दों में परत एक की चोटी पर प्रदान की गई है के साथ एक भाई है कि है मिश्रित परत)

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

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