क्या कैश किए गए आइटम रीफ्रेश करने के लिए सीएसएस में एक आईएमजी टैग और छवियों में छवियों को क्वेरीस्ट्रिंग जोड़ना आवश्यक है?

Question

मुझे पता है कि सीएसएस, जावास्क्रिप्ट और छवि फ़ाइलों के लिए भविष्य में एक समय समाप्त होने का एक सामान्य अभ्यास है और फिर सुनिश्चित करें कि सभी ब्राउज़र नवीनतम सामग्री प्राप्त करते हैं जैसे ही फाइलें क्वेरीस्ट्रिंग (या फ़ाइल नाम बदलना)

<link rel="stylesheet" type="text/css" href="base.css?v=1234"> 

या:

<link rel="stylesheet" type="text/css" href="base_1234.css"> 

इस के लिए

: इस

इस <link rel="stylesheet" type="text/css" href="base.css"> से

की तरह

लेकिन एक सीएसएस फ़ाइल में संदर्भित छवियों के बारे में क्या?

// Inside base.css 
background: url(/img/logo.png) 

// Is this necessary(?): 
background: url(/img/logo.png?v=1234) 

या जब base.css base.css?v=1234 या base_1234.css स्वचालित रूप से करने के लिए फ़ाइल नाम में परिवर्तन पुनः लोड किया जा /img/logo.png होगा?

और src में img -tags के लिए छवियों के बारे में क्या?

Answer 1

ब्राउज़र एक पूर्ण पथ निर्धारित करने के बाद इन अनुरोधों को कर रहा है, इसलिए यदि आप इस तरह से अपनी स्थिर संपत्तियों को 'कैश बस्टिंग' कर रहे हैं, तो आपको इसे प्रत्येक फ़ाइल के लिए व्यक्तिगत रूप से करने की आवश्यकता है, इससे कोई फर्क नहीं पड़ता कि इसे कहां कहा जाता है। हालांकि, आप इसे बैकएंड पर एक चर बनाकर अपने आप को आसान बना सकते हैं।

आप स्ट्रिंग को एक वेरिएबल के रूप में जोड़ सकते हैं जिसे आपको केवल अपने बैकएंड पर एक ही स्थान पर अपडेट करना होगा, संभवत: सीएसएस प्री-प्रोसेसर जैसे कम या एसएएसएस के साथ आपकी सभी छवियां प्राप्त करने के लिए।

या बेस यूआरएल (site.com/folder/styles.css => site.com/v123/folder/styles.css) में संस्करण जोड़कर अपने लाभ के सापेक्ष पथ का उपयोग करें। इसे आपके ऐप में मौजूदा स्टेटिक एसेट बेस यूआरएल वैरिएबल में जोड़ा जा सकता है, फिर सर्वर पर आप संस्करण को बाहर निकालने के लिए केवल यूआरएलआरईआरआईटी का उपयोग कर सकते हैं। इस तरह आपके सीएसएस से अपेक्षाकृत सभी छवियों को स्वचालित रूप से संस्करण भी मिलता है, जिसमें 'कैश बस्टिंग' प्रभाव होता है।

आप अतिरिक्त चालाक हो सकते हैं और अपने निर्माण प्रक्रिया के हिस्से के रूप में स्वचालित रूप से चर सेट कर सकते हैं क्योंकि आपके द्वारा संस्करण नियंत्रण प्रणाली से अंतिम प्रतिबद्ध हैश - जो भविष्य में डीबगिंग को भी आसान बना देगा।

Answer 2

मेरे अनुभव से सीएसएस की कैश बस्टिंग रिकर्सिव नहीं है। तो सीएसएस में संदर्भित छवि के अंत में क्वेरीस्ट्रिंग को कैश को बस्ट करने की आवश्यकता है।

यह सुनिश्चित करने के लिए कि सभी छवियां ताजा हैं, आप क्वेरीस्ट्रिंग संस्करण (img.png? V = 1234) के साथ बस्ट कैश भी कर सकते हैं।

Answer 3

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

यह website यह एक कदम आगे ले और (के साथ या jQuery बिना ) है कि सभी img टैग से जुड़ा हुआ है जो JavaScript Date().getTime(); विधि का उपयोग करता।

एक अन्य समाधान एक जावास्क्रिप्ट कोड लिखने के लिए इतना है कि ब्राउज़र का कैश और यह भार हर से छवि लेने नहीं करता है।

ऊपर की लाभ यह है कि अलग-अलग छवि फ़ाइल नाम, क्वेरी स्ट्रिंग के लिए, की जरूरत नहीं है के रूप में जावास्क्रिप्ट एक पास में यह संभालती है।

हालांकि यह इसे पूरा करने के लिए जावास्क्रिप्ट की एक पंक्ति का उपयोग करता है, यह एक बड़ी सीएसएस फ़ाइल में प्रत्येक img तत्व को ट्रैक करने के रूप में उच्च रखरखाव के रूप में नहीं है, जो समय ले सकता है और फ़ाइल आकार में जोड़ सकता है।