प्रतीकों का पुन: उपयोग करने से एसवीजी प्रदर्शन में सुधार होता है?

Question

एक अपेक्षाकृत आधुनिक, एसवीजी समर्थन डेस्कटॉप ब्राउज़र और इसी तरह, सरल नोड्स के सैकड़ों से मिलकर एक एसवीजी मान लिया जाये:

1. दस्तावेज़ के रूप में कई अलग-अलग आकार तत्वों (<circle>, <line>, आदि) के साथ स्थापित किया जा सकता है उनके अपने गुण परिभाषित।
2. दस्तावेज़ को <symbol> तत्वों और कई व्यक्तिगत <use> उदाहरणों के रूप में स्थापित किया जा सकता है जो उन्हें रखता है और उन्हें उचित रूप से आकार देता है (W3 spec)।

मैं समझता हूँ कि अर्थ और कोड-रखरखाव कारणों <symbols>/<use> उपयोग करने के लिए है, लेकिन मैं अब उन के साथ संबंध नहीं हूँ, मैं सख्ती से प्रतिपादन, परिवर्तन और डोम अद्यतन प्रदर्शन का अनुकूलन करने की कोशिश कर रहा हूँ। मैं <symbol> फ्लैश में स्प्राइट्स का उपयोग करने, स्मृति को संरक्षित करने और आम तौर पर एक अच्छी प्रैक्टिस के समान काम कर सकता था। हालांकि, मुझे आश्चर्य होगा कि ब्राउज़र विक्रेता इस तरह से सोच रहे हैं (और यह वास्तव में सुविधा सुविधा का नहीं है)।

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

• वहाँ के लिए किसी भी स्पष्ट पैटर्न हैं <symbol>/<use> प्रदर्शन?
• व्यक्तिगत ब्राउज़र कार्यान्वयन के लिए यह idiosyncratic कैसे है?
• <symbol> बनाम <g> बनाम घोंसला <svg> पुन: उपयोग करने के बीच अंतर हैं?

Answer 1

यदि आप एजी या एसवीजी तत्व की सामग्री को बदलते हैं तो यूआई उस क्षेत्र को देख सकता है जहां पुराने सामग्रियों को खींचा गया था और जहां अपडेट खींचा जाएगा और उन दो क्षेत्रों को फिर से खींचा जाएगा, यहां तक ​​कि केवल एक बार फिर से निकालना वे वही हैं जैसे एक आकार का रंग बदल रहा है।

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

किसी भी मामले में, यूआई को प्रतीक में परिवर्तनों को कम से कम ट्रैक करना चाहिए और उन सभी परिवर्तनों में उन परिवर्तनों का प्रचार करना चाहिए। यह कुछ ओवरहेड होने की संभावना से अधिक है।

बेशक, यदि आप केवल व्यक्तिगत प्रतीक उदाहरणों को स्थानांतरित कर रहे हैं और सामग्री स्थिर हैं तो कोई ट्रैकिंग आवश्यक नहीं है और प्रदर्शन समान होने की संभावना है।

Answer 2

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

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

< svg> और < प्रतीक के बीच> कार्यात्मक स्तर पर कोई अंतर नहीं है, वे दोनों एक समन्वय प्रणाली ('व्यूबॉक्स' विशेषता के माध्यम से) को परिभाषित करने की अनुमति देते हैं। एक < जी> तत्व आपको ऐसा करने नहीं देता है। ध्यान दें कि < प्रतीक> < उपयोग द्वारा संदर्भित किए जाने तक तत्व अदृश्य हैं> जबकि < svg> और < g> प्रति डिफ़ॉल्ट दोनों दिखाई दे रहे हैं। हालांकि, ज्यादातर मामलों में यह सलाह दी जाती है कि टेम्पलेट को < defs> तत्व का बच्चा बनें।

Answer 3

Rohit Kalkur सीधे एसवीजी प्रतीक के आकार बनाने के खिलाफ use का उपयोग करके 5000 एसवीजी प्रतीकों के निर्माण की प्रतिपादन गति की तुलना में here देखें। यह पता चला है कि का उपयोग use का उपयोग कर 50% धीमा था। उन्होंने कहा कि कारणों कि:

उपयोग तत्व एसवीजी योग्य दस्तावेज़ से नोड्स लेता है, और उन में डुप्लिकेट की गैर उजागर डोम

इस, मुझे लगता है कि एसवीजी symbol का उपयोग कर सबसे अच्छा में है को देखते हुए मैन्युअल रूप से symbols एस आकार बनाने के रूप में कलाकार के रूप में।