मैं समझने की कोशिश कर रहा हूं कि सीएसएस कैसे साइट पर प्रदर्शन को बेहतर बनाता है?सीएसएस कैसे एक वेबसाइट को गति देता है?
छोटी छवियों को डाउनलोड करने की तुलना में कई छोटी छवियों को डाउनलोड करने से धीमा क्यों होता है यदि एकल छवि का कुल आकार छोटी छवियों का योग होता है?
यह समझना महत्वपूर्ण है कि HTTP अनुरोध के ओवरहेड का इतना प्रभाव क्यों है।
अपने सबसे सरल रूप में, एक HTTP अनुरोध में सॉकेट खोलने, खुले सॉकेट पर अनुरोध भेजने और प्रतिक्रिया पढ़ने के होते हैं।
सॉकेट खोलने के लिए, क्लाइंट का टीसीपी/आईपी स्टैक सर्वर पर एक टीसीपी एसवाईएन पैकेट भेजता है। सर्वर एक एसईएन-एसीके के साथ प्रतिक्रिया करता है, और ग्राहक एसीके के साथ इसका जवाब देता है।
तो, इससे पहले कि आप एप्लिकेशन डेटा का एक बाइट भेज दें, आपको कम से कम सर्वर पर पूरे डेढ़ दौर की यात्रा का इंतजार करना होगा।
फिर क्लाइंट को अनुरोध भेजने की आवश्यकता है, सर्वर को अनुरोध को पार्स करने के लिए प्रतीक्षा करें, अनुरोधित डेटा ढूंढें, इसे वापस भेजें - यह एक और राउंड ट्रिप है और कुछ सर्वर साइड ओवरहेड (उम्मीद है कि एक छोटा ओवरहेड, हालांकि मेरे पास है कुछ धीमी सर्वरों को देखा) साथ ही वास्तविक डेटा संचारित करने का समय, और यह सबसे अच्छा मामला है, कोई नेटवर्क भीड़ नहीं मानता जिसके परिणामस्वरूप पैकेट गिराए जा सकते हैं और पुनः प्रेषित किया जा सकता है।
हर मौका आपको इससे बचने के लिए, आपको चाहिए।
आधुनिक ब्राउज़र शामिल कुछ ओवरहेड को कम करने के प्रयास में समानांतर में एकाधिक अनुरोध जारी करेंगे। HTTP अनुरोध सैद्धांतिक रूप से एक ही सॉकेट पर किए जा सकते हैं, जिससे चीजों को थोड़ा बेहतर बना दिया जा सकता है। लेकिन सामान्य रूप से, नेटवर्क दौर यात्रा प्रदर्शन के लिए खराब होती है, और इससे बचा जाना चाहिए।
सर्वर के लिए कम दौर-यात्राएं। 6 अलग-अलग छवियों के लिए 6 (कहें) अनुरोधों के बजाय, आपको एक ही छवि के एक अनुरोध और 6 उपयोग मिलते हैं। यदि सर्वर जवाब देने जा रहा है "पिछली बार आपने पूछा था कि यह समय नहीं बदला है" ज्यादातर समय, यह नेटवर्क यातायात की मात्रा में उल्लेखनीय कमी हो सकती है।
क्योंकि एकाधिक छवियों को एकाधिक http अनुरोधों की आवश्यकता होती है। याहू के प्रदर्शन नियम # 1: Minimize HTTP Requests देखें।
छवियों के आधार पर अनुरोधों की संख्या को कम करने के अलावा, आप यह भी पा सकते हैं कि फाइल का आकार छोटा होता है, अगर वे अलग होते हैं (कारण, मुझे लगता है कि मेटाडाटा की कम मात्रा में, अन्य बातों के अलावा)। स्प्राइट्स का उपयोग करने के लिए एक और अतिरिक्त लाभ यह है कि आपके पास फ्लिकर प्रभाव नहीं होता है जब आप पहले उस तत्व पर होवर करते हैं जिसमें होवर स्टेटस होता है, जो आपके पृष्ठ के प्रदर्शन की उपयोगकर्ता धारणा को बेहतर बना सकता है। छवि अनुकूलन पर एक दिलचस्प संसाधन जो आप पढ़ना चाहते हैं वह है याहू यूजर इंटरफेस ब्लॉग पर ब्लॉग पोस्ट के series। प्रदर्शन के लिए याहू की अनुशंसित प्रथाओं को दोबारा पढ़ने पर, मुझे यह देखकर आश्चर्य हुआ कि वे suggested जो लंबवत रूप से आपकी छवियों को क्षैतिज रूप से व्यवस्थित करते हैं, आपके फ़ाइल आकार को भी कम कर सकते हैं।
ऊपर दिए गए कारणों के अलावा, मुझे उनके साथ काम करना आसान लगता है। यदि आप छवि को अपडेट करते हैं, तो आपके पास केवल एक फ़ाइल है जिसे आपको संशोधित करने और अपलोड करने की आवश्यकता है, और आपके कोड में बदलने के लिए एक यूआरएल है।
यह वास्तव में मामला नहीं है - स्प्राटेड छवियों को निपटने के लिए बहुत कठिन है, क्योंकि आपको मुख्य छवि में सबमिटेज निर्देशांक का ट्रैक रखना है। – levik
याद रखें कि "उपर्युक्त" बदल सकता है: यदि आपका उत्तर वोट दिया गया है, या अन्य आपके पीछे आते हैं, तो आप दूसरों के ऊपर होने का अंत कर सकते हैं। यहां अन्य टिप्पणियों का जिक्र करते समय उपयोगकर्ता के उपयोगकर्ता नाम या उपयोगकर्ता नाम का उपयोग करें और इससे कोई फर्क नहीं पड़ता कि इससे कोई फर्क नहीं पड़ता। –
मैंने कुछ साल पहले कुछ संख्याएं की थी - एक 43 बाइट 1x1 gif के लिए, HTTP ओवरहेड (जिसमें टी टीसीपी पैकेट ओवरहेड शामिल नहीं था) 240 बाइट से अधिक था। –
आप जोड़ सकते हैं, कि छवि के आधार पर, संपीड़न अधिक कुशल हो सकता है। –
इसके अलावा, बड़ी फ़ाइलों को स्थानांतरित करते समय लेनदेन करते समय टीसीपी/आईपी अधिक कुशल होता है। – David