ब्राउज़र कैशिंग पृष्ठभूमि छवियों कैशिंग है?

Question

जब मेरे पास अलग-अलग तत्वों (स्प्राइट छवियों) के लिए उपयोग की जाने वाली एक ही छवि होती है, तो मैं आमतौर पर उस छवि को फिर से कॉल नहीं करता क्योंकि यह एक नया HTTP अनुरोध है।

मैं नहीं बल्कि का उपयोग करें:

element1 { 
    background: url(someImage.png); 
} 

element2 { 
    background-image: inherit; 
} 

इस बचत HTTP अनुरोध है?

या यदि ब्राउज़र स्मार्ट है और मैं उपयोग कर सकते हैं:

element1 { 
    background: url(someImage.png); 
} 

element2 { 
    background: url(someImage.png); 
} 

ब्राउज़र एक नया HTTP अनुरोध बनाने जा रहा है? या यह जानता है कि मेरे पास पहले से ही इस छवि को कैश किया गया है?

सवाल यह है: क्या मुझे उदाहरण 1 का उपयोग करके कुछ हासिल होता है?

Answer 1

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

विभिन्न पृष्ठों में, उत्तर ब्राउज़र पर निर्भर करता है, और समाप्ति शीर्षकों पर आपका सर्वर भेजता है जो अनुरूप एजेंटों में कैशिंग व्यवहार को प्रभावित करेगा।

Answer 2

हां, ब्राउज़र कैश से सीएसएस फ़ाइल में एक ही छवि के दूसरे संदर्भ को लोड करेंगे। फ़ायरबग का उपयोग करके आप ब्राउज़र द्वारा किए गए सभी HTTP अनुरोधों को देख पाएंगे।

Answer 3

यदि आप चीजों को सरल बनाना चाहते हैं और संसाधनों को कैश करना चाहते हैं और बैंडविड्थ को सहेजना चाहते हैं, तो आपको अपनी वेबसाइट की जड़ में एक appcache.appcache फ़ाइल बनाना चाहिए। This link एपकेच बनाने पर एक ट्यूटोरियल देता है। यह http अनुरोधों पर सहेजता है यदि उपयोगकर्ता आपकी साइट पर एक से अधिक बार जाता है और उसी छवि को दो बार अनुरोध करने पर सहेजता है यदि यह पहले से ही कैश में मौजूद है।

हैप्पी कैशिंग!