हम सभी जानते हैं कि सीएसएस स्प्राइट छवियों अनुरोध और इस तरह की राशि है, लेकिन क्या ब्राउज़र एक पृष्ठभूमि के रूप में एक बड़ी छवि का उपयोग कर कई तत्वों के साथ पेज प्रतिपादन के प्रदर्शन के बारे में कम करने के लिए महान हैं?CSS स्प्राइट ब्राउज़र को रेंडरिंग
। यह और भी गंभीर है, जब आप स्प्राइट्स का उपयोग कर रहे हैं: होवर स्टेटस।
आपको अपने सभी sprites को एक विशाल छवि पर धक्का देने की दिशा में अपने प्रलोभन को कम करना होगा - इस बारे में सोचें कि कौन से तत्व वेबसाइट/वेबएप यूआई का हिस्सा हैं और उन्हें एक स्प्राइट फ़ाइल में डाल दें (ब्राउज़िंग करते समय उन्हें हमेशा प्रदर्शित किया जाएगा)। फिर वेबसाइट के अनुभाग-विशिष्ट छवियों में शेष sprites को समूहबद्ध करने का प्रयास करें, और आवश्यकतानुसार उनका उपयोग करें। डाउनसाइड थोड़ा विस्तारित लोड समय (अतिरिक्त HTTP अनुरोध) है, लेकिन पृष्ठ को देखने/स्क्रॉल करने के दौरान उपयोगकर्ता अनुभव बहुत अधिक होगा।
हमने अपने YouTube अनुभव से न्याय सकते हैं, वहाँ उस के साथ कोई बड़ी समस्या है।
उम्मीद है, ब्राउज़र स्मृति में एक छवि कैश और फिर इसे का उपयोग करता है जहाँ भी इस छवि की जरूरत है उत्पादन रेंडर करने के लिए।
आपको चीजों को संतुलित करने की आवश्यकता है। यदि आप किसी छवि के बारे में बात कर रहे हैं जिसमें 1000 स्प्राइट्स शामिल होंगे तो सीएसएस बहुत बड़ा होगा। इसके अलावा एक बहुत ही पतला मौका है कि आप वही पृष्ठ में उन सभी sprites का उपयोग करेंगे।
आप एक या अधिक समग्र स्प्राइट में अपनी छवियों को मजबूत बनाने और सीएसएस का उपयोग कर चुनिंदा अपने वेब पेज के भीतर स्प्राइट के कुछ हिस्सों को प्रदर्शित करने के द्वारा HTTP अनुरोध की एक महत्वपूर्ण राशि बचा सकते हैं। अब जब प्रमुख ब्राउज़र सीएसएस पृष्ठभूमि और स्थिति का समर्थन करने के लिए पर्याप्त विकसित हुए हैं, तो अधिकतर साइटें इस प्रदर्शन तकनीक को अपना रही हैं। वास्तव में, वेब अनुरोधों में से कुछ व्यस्त साइटें HTTP अनुरोधों को सहेजने के लिए सीएसएस स्प्राइट्स का उपयोग करती हैं।
लाखों उपयोगकर्ताओं के साथ, याहू! और एओएल उपयोगकर्ता अनुभव को बेहतर बनाने के लिए वे सब कुछ कर सकते हैं। AOL.com और Yahoo.com दोनों अपने जटिल इंटरफेस के लिए कई HTTP अनुरोधों को सहेजने के लिए सीएसएस स्प्राइट्स का उपयोग करते हैं। दोनों साइटें सेवाओं की निर्देशिकाओं के भीतर चुनिंदा रूप से आइकन प्रदर्शित करने के लिए सीएसएस स्प्राइट्स का उपयोग करती हैं, और याहू! अन्यत्र sprites का उपयोग करता है।
CSS स्प्राइट का एक अन्य लाभ यह है कि संयुक्त छवि, अक्सर अलग-अलग चित्र से फ़ाइल आकार में छोटा होता है छवियों के बीच खाली स्थान के जोड़ने के बावजूद है। स्प्राइट्स का छोटा आकार कई रंगीन टेबलों के कम ओवरहेड और अलग-अलग छवियों द्वारा आवश्यक स्वरूपण जानकारी के कारण होता है। अभिगम्यता और प्रयोज्यता को अधिकतम करने के लिए, सीएसएस स्प्राइट्स का उपयोग आइकन या सजावटी प्रभावों के लिए सबसे अच्छा होता है।
आपने इस प्रश्न का उत्तर नहीं दिया। सवाल ब्राउज़र प्रतिपादन प्रदर्शन के बारे में था, बैंडविड्थ या HTTP अनुरोध नहीं। –
दरअसल, एक दिलचस्प सवाल! – User