लिंक और स्क्रिप्ट टैग में CSS और Javascript URL में "v? 1" को जोड़कर क्या करता है?

Question

मैं एक HTML 5 बॉयलरप्लेट टेम्पलेट ( http://html5boilerplate.com/ से ) देख रहा हूं "?v=1"और सीएसएस और जावास्क्रिप्ट फ़ाइलों का जिक्र करते समय यूआरएल में उपयोग पर ध्यान दिया ।

1. क्या जोड़कर करता "?v=1"लिंक और स्क्रिप्ट टैग में CSS और Javascript यूआरएल को करते हैं?
2. सभी जावास्क्रिप्ट URL में "?v=1"उदाहरण नहीं है (नीचे दिए गए नमूने से उदाहरण:) js/modernizr-1.5.min.js। क्या ऐसा होने का कोई कारण है?

उनका नमूना index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Answer 1

ये आमतौर पर यह सुनिश्चित करने के लिए होते हैं कि साइट के नए संस्करण के साथ अपडेट होने पर ब्राउज़र को एक नया संस्करण मिल जाए, जैसे कि हमारी निर्माण प्रक्रिया के हिस्से के रूप में हमारे पास कुछ इस तरह होगा:

/Resources/Combined.css?v=x.x.x.buildnumber

चूंकि यह हर नए कोड पुश के साथ बदलता है, क्लाइंट को नए संस्करण को हथियाने के लिए मजबूर किया जाता है, सिर्फ क्वेरिस्ट्रिंग के कारण। इस पृष्ठ को देखें (इस उत्तर के समय) उदाहरण के लिए:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

मुझे लगता है कि एक संशोधन संख्या के बजाय एसओ टीम एक फ़ाइल हैश के साथ गई थी, जो एक बेहतर दृष्टिकोण है, यहां तक ​​कि एक नई रिलीज के साथ, ब्राउज़र केवल एक नया संस्करण हथियाने के लिए मजबूर हुए जब फ़ाइल वास्तव में बदल जाती है।

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

Comments

@ फ्री - कल भेजा गया एक कैश कंट्रोल हेडर क्लाइंट को उस फाइल को आज नहीं बदल सकता है (क्लाइंट चेक भी नहीं करेगा), जो एक URL कर सकता है। क्या आप बता सकते हैं कि मुझे वहां क्या याद आ रहा है?

— निक Craver

@ नि: शुल्क - जिस तरह से इन फ़ाइलों को कैश किया जाता है वह हमेशा के लिए होता है , जिसका अर्थ यह है कि क्लाइंट किसी भी तरह से यह देखने के लिए जाँच नहीं कर रहा है कि फाइल संशोधित है या नहीं। इसका मतलब है कि उन्हें अपडेटेड फ़ाइल कभी नहीं मिलेगी ... जब तक कि URL बदल नहीं जाता है, जो कि ऊपर दी गई तकनीक के साथ होता है। आपको क्लाइंट (कम से कम HTTP अनुरोध) पर अधिकतम कैश जीवन मिलता है, लेकिन फ़ाइल को वास्तव में बदलने पर क्लाइंट तुरंत अपडेट हो जाता है । केवल कैश कंट्रोल हेडर का उपयोग करके आप यह सब कैसे पूरा करेंगे ?

— निक Craver

@ फ़्री - स्टैक ओवरफ़्लो को महीने में 5 मिलियन विज़िटर मिलते हैं, आपके दृष्टिकोण में 2 प्रभाव होंगे: ए) हमारे सर्वर से / के लिए और भी कई अनुरोध और डेटा भेजे जाएंगे, और उपयोगकर्ताओं को तुरंत नया जावास्क्रिप्ट / सीएसएस नहीं मिलेगा (उदाहरण के लिए) जब हमारे पास बग था, या HTML में नए जेएस / सीएसएस की आवश्यकता थी तो बदलाव)। प्राकृतिक समाप्ति वास्तव में यहाँ कोई विकल्प नहीं है। जिस विधि को आप प्रस्तावित कर रहे हैं, वह तकनीकी रूप से बहुत कम कुशल होगा और परिणाम वास्तविक उपयोगकर्ता बग , नियमित आधार पर ... कि वास्तव में किसी भी प्रमुख साइट पर स्वीकार्य नहीं है (न ही यह वास्तव में किसी भी साइट पर होना चाहिए )।

— निक Craver

@ नि: शुल्क - प्रति माह 5 मिलियन आगंतुकों है , क्योंकि हम एक दिन में कई बार तैनात करते हैं , अनुरोध कई बार होते हैं। HTML पेज-लोड के संदर्भ में हम प्रति माह 110 मिलियन से अधिक की बात कर रहे हैं (और बढ़ रहा है ... फिर से केवल HTML पेज लोड है)। क) हां, कई और अधिक या अधिक विराम के लिए, यह कैश टाइम बनाम क्लाइंट पर सही सामग्री वाले किसी भी तरह का व्यापार बंद है। इसके अलावा, बी के लिए आपका तर्क त्रुटिपूर्ण है, एचटीएमएल कैश नहीं है, इसलिए कैशेड जेएस के साथ उपयोग किया जाता है कि अब काम नहीं करता है इसका मतलब केवल कैश्ड उपयोगकर्ता प्रभावित होते हैं, न कि वे प्रतिरक्षा।

— निक Craver

@GMsoF v सिर्फ हमारे लिए "संस्करण" का प्रतिनिधित्व करता है, यह पूरी तरह से मनमाना विकल्प है। कोई भी मान क्वेरी स्ट्रिंग, काम यह बस के रूप में आसानी से कर सकता है जैसे हैं jejdutogjesudo = हो सकता है?

— निक Craver

Answer 2

यह सुनिश्चित करता है कि आपको सर्वर से सीएसएस या जेएस फ़ाइल का नवीनतम संस्करण मिल रहा है।

और बाद में "?v=2"यदि आप एक नया संस्करण "?v=3", "?v=4"और इतने पर कर सकते हैं।

ध्यान दें कि आप किसी का भी उपयोग कर सकते हैं querystring, उदाहरण के लिए 'v' बहुत जरूरी नहीं है:

"?blah=1“साथ ही काम करेंगे।

तथा

"?xyz=1002" काम करेगा।

और यह एक सामान्य तकनीक है क्योंकि ब्राउज़र अब js और css फ़ाइलों को बेहतर और लंबे समय तक कैशिंग कर रहे हैं।

Answer 3

हैश समाधान अच्छा है, लेकिन वास्तव में मानव पठनीय नहीं है जब आप जानना चाहते हैं कि आपके स्थानीय वेब फ़ोल्डर में फ़ाइल का कौन सा संस्करण बैठा है। समाधान date/timeआपके संस्करण पर मुहर लगाने का है ताकि आप आसानी से अपनी सर्वर फ़ाइल के खिलाफ तुलना कर सकें।

उदाहरण के लिए, यदि आपकी .js or .cssफ़ाइल दिनांकित है 2011-02-08 15:55:30(अंतिम संशोधन) तो संस्करण के बराबर होना चाहिए.js?v=20110208155530

किसी भी भाषा में किसी भी फ़ाइल के गुणों को पढ़ना आसान होना चाहिए। ASP.Net में यह वास्तव में आसान है ...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

Coz की यह अच्छी तरह से गुण / कार्यों में पहले और बंद तुम जाओ। कोई और बहाना नहीं।

सौभाग्य, कला।

Comments

क्या होगा यदि आप केवल html js और css के साथ अपनी वेबसाइट बना रहे हैं। फिर हम स्थैतिक संसाधनों के लिए स्वचालित रूप से संस्करण नाम को कैसे इंजेक्ट कर सकते हैं?

— निशांत नायर

@ Whizkid747 देर से जवाब, लेकिन नए लोगों के लिए, जो भी साइट बिल्डर / बिल्ड सिस्टम आप उपयोग कर रहे हैं, उसके लिए मिलीसेकंड में दिनांक प्राप्त करने का एक तरीका होना चाहिए जिसे आप संस्करण के रूप में उपयोग कर सकते हैं, अन्यथा यदि आप बिल्डर का उपयोग नहीं कर रहे हैं // बिल्ड सिस्टम आपको खुद ये लिखना होगा।

— एंटेक

Answer 4

जावास्क्रिप्ट फ़ाइलों को अक्सर ब्राउज़र द्वारा कैश किया जाता है जितना आप उम्मीद कर सकते हैं।

जब आप अपनी JS फ़ाइल का नया संस्करण जारी करते हैं तो यह अक्सर अप्रत्याशित व्यवहार हो सकता है।

इसलिए, जावास्क्रिप्ट फ़ाइल के लिए URL में QueryString पैरामीटर जोड़ना आम बात है। इस तरह, ब्राउज़र जावास्क्रिप्ट फ़ाइल को v = 1 के साथ कैश करता है। जब आप अपनी जावास्क्रिप्ट फ़ाइल का नया संस्करण जारी करते हैं तो आप url के v = 2 को बदलते हैं और ब्राउज़र को एक नई प्रतिलिपि डाउनलोड करने के लिए मजबूर किया जाएगा।

Comments

कौन से ब्राउज़र बिल्कुल? यहां तक ​​कि सबसे विचित्र IE 5, और 6 कैश कंट्रोल हेडर का पालन कर रहे थे।

— नि: शुल्क परामर्श

Answer 5

आपको सवालों के जवाब देने के लिए;

"? v = 1" यह केवल ब्राउज़र की कैश से उपयोग करने के बजाय css और js फ़ाइलों की एक नई प्रतिलिपि डाउनलोड करने के लिए बीक्युस लिखा है।

यदि आप अपनी स्टाइलशीट या js फ़ाइल के अंत में इस क्वेरी स्ट्रिंग पैरामीटर का उल्लेख करते हैं तो यह ब्राउज़र को एक नई फ़ाइल डाउनलोड करने के लिए मजबूर करता है, जिसके कारण आपके ब्राउज़र में .css और .js फ़ाइलों में हाल ही में परिवर्तन किए जाते हैं।

यदि आप इस संस्करण का उपयोग नहीं करते हैं, तो आपको उन फ़ाइलों में हाल के परिवर्तनों को देखने के लिए पृष्ठ को ताज़ा करने का कैश साफ़ करने की आवश्यकता हो सकती है।

यहाँ एक लेख है जो इस बात की व्याख्या करता है सीएसएस और जेएस फ़ाइलों के संस्करण बनाने के लिए कैसे और क्यों

Answer 6

नए रिलीज के विकास / परीक्षण के दौरान, कैश एक समस्या हो सकती है क्योंकि ब्राउज़र, सर्वर और यहां तक ​​कि कभी-कभी 3 जी टेल्को (यदि आप मोबाइल परिनियोजन करते हैं) स्थिर सामग्री (जैसे जेएस, सीएसएस, एचटीएमएल, आईएमजी) को कैश करेंगे। आप संस्करण संख्या, रैंडम संख्या या टाइमस्टैम्प को URL से जोड़कर इसे दूर कर सकते हैं जैसे: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

यदि आप शुद्ध HTML (सर्वर पेज JSP, ASP, PHP के बजाय) चला रहे हैं तो सर्वर आपकी मदद नहीं करेगा। ब्राउज़र में, जेएस के चलने से पहले लिंक लोड किए जाते हैं, इसलिए आपको लिंक को हटाना होगा और उन्हें जेएस के साथ लोड करना होगा।

// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}

Answer 7

जैसा कि आप पहले पढ़ सकते हैं, ?v=1 सुनिश्चित करता है कि आपके ब्राउज़र को फ़ाइल का संस्करण 1 मिलता है। जब आपके पास एक नया संस्करण होता है, तो आपको बस एक अलग संस्करण संख्या को जोड़ना होगा और ब्राउज़र पुराने संस्करण के बारे में भूल जाएगा और नए को लोड करेगा।

एक gulp प्लगइन है जो बिल्ड चरण के दौरान आपकी फ़ाइलों के संस्करण का ख्याल रखता है, इसलिए आपको इसे मैन्युअल रूप से करने की आवश्यकता नहीं है। यह आसान है और आप आसानी से इसे बनाने की प्रक्रिया में एकीकृत कर सकते हैं। यहाँ लिंक है: gulp-annotate

Answer 8

जैसा कि दूसरों ने उल्लेख किया है, इसका उपयोग फ्रंट एंड कैश बस्टिंग के लिए किया जाता है। इसे लागू करने के लिए, मुझे व्यक्तिगत रूप से ग्रंट-कैश-बस्ट एनपीएम पैकेज उपयोगी है।

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, केवल स्टैक ओवरफ्लो पर लिंक को हतोत्साहित किया जाता है, आप लिंक के महत्वपूर्ण भागों को ले जाकर इस उत्तर को बेहतर बना सकते हैं और इसे अपने उत्तर में डाल सकते हैं, यह सुनिश्चित करता है कि यदि लिंक बदल गया तो आपका उत्तर अभी भी एक उत्तर है। या हटा दिया गया :)

— WhatsThePoint