การผนวก“? v = 1” ต่อท้ายกับ CSS และ Javascript URL ในลิงก์และแท็กสคริปต์ทำอะไร

138

ฉันได้ดูเทมเพลตสำเร็จรูปของ HTML 5 (จากhttp://html5boilerplate.com/ ) และสังเกตเห็นการใช้"?v=1"URL ในเมื่ออ้างถึงไฟล์ CSS และ Javascript

สิ่งที่ผนวก"?v=1"เข้ากับ CSS และ Javascript URL ในลิงค์และแท็กสคริปต์จะทำอย่างไร
ไม่ทั้งหมด URL ที่มี Javascript "?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 -->

html css browser-cache

— maxyfc
แหล่งที่มา

175

เพื่อให้แน่ใจว่าเบราว์เซอร์จะได้รับเวอร์ชันใหม่เมื่อไซต์ได้รับการอัปเดตด้วยเวอร์ชันใหม่เช่นเป็นส่วนหนึ่งของกระบวนการสร้างของเราเรามีสิ่งนี้:

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

เนื่องจากการเปลี่ยนแปลงนี้เกิดขึ้นเมื่อมีการกดรหัสใหม่ทุกครั้งลูกค้าจึงถูกบังคับให้ต้องคว้าเวอร์ชันใหม่เพียงเพราะการสอบถาม ดูที่หน้านี้ (ณ เวลาที่มีคำตอบ) ตัวอย่างเช่น:

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

ฉันคิดว่าแทนที่จะเป็นหมายเลขการแก้ไขทีม SO ได้ไปกับแฮชไฟล์ซึ่งเป็นวิธีที่ดียิ่งขึ้นแม้จะมีรีลีสใหม่เบราว์เซอร์บังคับให้ต้องคว้าเวอร์ชันใหม่เมื่อไฟล์จริงเท่านั้นการเปลี่ยนแปลง

วิธีการทั้งสองนี้ช่วยให้คุณสามารถตั้งค่าส่วนหัวของแคชให้เป็นอะไรที่น่าขันนาน ๆ ว่า 20 ปี ... แต่เมื่อมันเปลี่ยนไปคุณไม่ต้องกังวลเกี่ยวกับส่วนหัวของแคชนั้น ต่างกันไฟล์ใหม่

— Nick Craver
แหล่งที่มา

3

@Free - ส่วนหัวของการควบคุมแคชที่ส่งไปเมื่อวานนี้ไม่สามารถบอกลูกค้าว่าไฟล์มีการเปลี่ยนแปลงในวันนี้ (ลูกค้าจะไม่ตรวจสอบ), URL สามารถ คุณช่วยอธิบายสิ่งที่ฉันขาดไปได้ไหม

— Nick Craver

8

@ ฟรี - วิธีที่ไฟล์เหล่านี้ถูกแคชไว้ตลอดไปซึ่งหมายความว่าลูกค้าไม่ได้ตรวจสอบเพื่อดูว่าไฟล์นั้นได้รับการแก้ไขหรือไม่ ซึ่งหมายความว่าพวกเขาจะไม่ได้รับไฟล์ที่อัปเดต ... เว้นแต่จะมีการเปลี่ยนแปลง URL ซึ่งเป็นสิ่งที่เกิดขึ้นกับเทคนิคด้านบน คุณจะได้รับชีวิตแคชสูงสุดกับลูกค้า (น้อยร้องขอ HTTP) แต่ลูกค้าที่มีการปรับปรุงทันทีเมื่อแฟ้มจริงการเปลี่ยนแปลง วิธีที่คุณจะประสบความสำเร็จทั้งหมดนี้โดยใช้เฉพาะส่วนหัวของการควบคุมแคช?

— Nick Craver

4

@Free - Stack Overflow มีผู้เข้าชม 5 ล้านคนต่อเดือนวิธีการของคุณจะมีผลกระทบ 2 ประการ : a) คำขอและข้อมูลที่ส่งไปยัง / จากเซิร์ฟเวอร์ของเราอีกมากมายและข) ผู้ใช้จะไม่ได้รับ JavaScript / CSS ใหม่ทันที (ตัวอย่างเช่น เมื่อเรามีข้อบกพร่องหรือการเปลี่ยนแปลง HTML ต้องการ JS / CSS ใหม่) การหมดอายุตามธรรมชาติไม่ใช่ตัวเลือกที่นี่จริงๆ วิธีการที่คุณกำลังเสนอจะเป็นเทคนิคที่มีประสิทธิภาพน้อยลงและผลเป็นข้อบกพร่องผู้ใช้จริงบนพื้นฐานปกติ ... ที่เป็นที่ยอมรับไม่ได้จริงๆในเว็บไซต์ใด ๆ ที่สำคัญ (หรือมันควรจะเป็นอ้อมใด ๆ ที่เว็บไซต์จริงๆ)

— Nick Craver

2

@ ฟรี - 5 ล้านคือ 5 ล้านผู้เข้าชมต่อเดือนเนื่องจากเราปรับใช้หลายครั้งต่อวันคำขอมีหลายครั้ง ในแง่ของการโหลดหน้า HTML เรากำลังพูดถึงน้อยกว่า 110 ล้านต่อเดือน (และการเติบโต ... อีกครั้งนั่นเป็นเพียงการโหลดหน้า HTML) สำหรับ a) ใช่การหยุดพักหลายครั้งหรือมากกว่านั้นเป็นการแลกเปลี่ยนในเวลาแคชกับลูกค้าที่มีเนื้อหาที่ถูกต้อง นอกจากนี้ตรรกะของคุณสำหรับ b) นั้นมีข้อบกพร่อง html นั้นไม่ได้ถูกแคชดังนั้นใช้กับ JS ที่แคชว่าไม่ทำงานอีกต่อไปหมายถึงเฉพาะผู้ใช้ที่แคชเท่านั้นที่ได้รับผลกระทบไม่ใช่ว่าพวกเขามีภูมิคุ้มกัน

— Nick Craver

5

@GMsoF v เพียงแสดงถึง "เวอร์ชั่น" สำหรับเรามันเป็นตัวเลือกที่สมบูรณ์ สตริงข้อความค้นหาค่าใดก็ได้จะทำงานได้เช่นมันอาจเป็นเรื่องง่าย? jejdutogjesudo =

— Nick Craver

23

สิ่งนี้ทำให้แน่ใจว่าคุณได้รับเวอร์ชันล่าสุดจากไฟล์ css หรือ js จากเซิร์ฟเวอร์

และหลังจากนั้นคุณสามารถต่อท้าย"?v=2"หากคุณมีเวอร์ชันที่ใหม่กว่า"?v=3", "?v=4"และอื่น ๆ

โปรดทราบว่าคุณสามารถใช้querystring'v' ได้เช่น:

"?blah=1"จะทำงานเช่นกัน

และ

"?xyz=1002" จะทำงาน.

และนี่เป็นเทคนิคทั่วไปเพราะตอนนี้เบราว์เซอร์กำลังแคชไฟล์ js และ css ได้ดีขึ้นเรื่อย ๆ

— Amr Elgarhy
แหล่งที่มา

13

วิธีแฮชเป็นสิ่งที่ดี แต่ไม่เป็นมนุษย์จริงๆที่อ่านได้เมื่อคุณต้องการที่จะรู้ว่าไฟล์รุ่นใดที่อยู่ในเว็บโฟลเดอร์ท้องถิ่นของคุณ ทางออกคือการ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");

เพราะรับมัน refactored อย่างเป็นคุณสมบัติ / ฟังก์ชั่นครั้งแรกและปิดคุณไป ไม่มีข้อแก้ตัวเพิ่มเติม

ขอให้โชคดีศิลปะ

— ศิลปะ
แหล่งที่มา

2

ถ้าคุณกำลังสร้างเว็บไซต์ด้วย html js และ css จากนั้นเราจะฉีดชื่อรุ่นไปยังทรัพยากรแบบคงที่โดยอัตโนมัติได้อย่างไร

— Nishanth Nair

@ Whizkid747 ตอบกลับล่าช้า แต่สำหรับผู้มาใหม่ระบบสร้างเว็บไซต์ / ระบบสร้างใด ๆ ก็ตามที่คุณใช้งานควรมีวิธีรับวันเป็นมิลลิวินาทีซึ่งคุณสามารถใช้เป็นรุ่นมิฉะนั้นหากคุณไม่ได้ใช้ระบบสร้าง / สร้าง คุณต้องเขียนสิ่งเหล่านี้ด้วยตัวเอง

— AntK

7

ไฟล์จาวาสคริปต์มักจะถูกเก็บไว้ในเบราว์เซอร์เป็นเวลานานกว่าที่คุณคาดไว้

ซึ่งอาจส่งผลให้เกิดพฤติกรรมที่ไม่คาดคิดเมื่อคุณปล่อยไฟล์ JS เวอร์ชันใหม่

ดังนั้นจึงเป็นเรื่องธรรมดาที่จะเพิ่มพารามิเตอร์ QueryString ไปยัง URL สำหรับไฟล์ javascript ด้วยวิธีนี้เบราว์เซอร์จะแคชไฟล์ Javascript ด้วย v = 1 เมื่อคุณปล่อยไฟล์จาวาสคริปต์เวอร์ชันใหม่คุณจะเปลี่ยน url's เป็น v = 2 และเบราว์เซอร์จะถูกบังคับให้ดาวน์โหลดสำเนาใหม่

— วันโรบิน
แหล่งที่มา

เบราว์เซอร์ใดกันแน่ แม้แต่ IE 5 ที่เล่นโวหารที่สุดและ 6 ก็เชื่อฟังส่วนหัวควบคุมแคช

— ให้คำปรึกษาฟรี

7

เพื่อตอบคำถามคุณ

"? v = 1"นี่เป็นเพียงเพราะเขียนเพื่อดาวน์โหลดสำเนาใหม่ของไฟล์ css และ js แทนการใช้จากแคชของเบราว์เซอร์

หากคุณพูดถึงพารามิเตอร์สตริงแบบสอบถามนี้ในตอนท้ายของสไตล์ชีทของคุณหรือไฟล์ js มันจะบังคับให้เบราว์เซอร์ดาวน์โหลดไฟล์ใหม่เนื่องจากการเปลี่ยนแปลงล่าสุดในไฟล์. css และ. js ทำให้เบราว์เซอร์ของคุณเสียหาย

หากคุณไม่ใช้เวอร์ชันนี้คุณอาจต้องล้างแคชของรีเฟรชหน้าเพื่อดูการเปลี่ยนแปลงล่าสุดในไฟล์เหล่านั้น

นี่คือบทความที่อธิบายถึงสิ่งนี้อย่างไรและทำไมในการสร้างเวอร์ชันของไฟล์ CSS และ JS

— ตาปานคุมาร์
แหล่งที่มา

2

ในระหว่างการพัฒนา / ทดสอบรุ่นใหม่แคชอาจมีปัญหาเนื่องจากเบราว์เซอร์เซิร์ฟเวอร์และแม้กระทั่งบางครั้ง telco 3G (ถ้าคุณใช้งานมือถือ) จะแคชเนื้อหาคงที่ (เช่น JS, CSS, HTML, img) คุณสามารถเอาชนะสิ่งนี้ได้ด้วยการต่อท้ายหมายเลขเวอร์ชันหมายเลขสุ่มหรือเวลาประทับลงใน URL เช่น: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

ในกรณีที่คุณใช้ HTML ล้วนๆ (แทนที่จะเป็นหน้าเซิร์ฟเวอร์ JSP, ASP, PHP) เซิร์ฟเวอร์จะไม่ช่วยคุณ ในเบราว์เซอร์ลิงก์จะโหลดก่อนที่ JS จะทำงานดังนั้นคุณต้องลบลิงก์และโหลดด้วย JS

// 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);
}

— Conete Cristian
แหล่งที่มา

0

อย่างที่คุณสามารถอ่านมาก่อน ?v=1มั่นใจว่าเบราว์เซอร์ของคุณจะได้รับไฟล์เวอร์ชัน 1 เมื่อคุณมีเวอร์ชั่นใหม่คุณเพียงแค่เพิ่มหมายเลขเวอร์ชั่นที่ต่างออกไปและเบราว์เซอร์จะลืมเวอร์ชั่นเก่าและโหลดใหม่

มีปลั๊กอินอึกที่ดูแลรุ่นไฟล์ของคุณในช่วงการสร้างดังนั้นคุณไม่ต้องทำด้วยตนเอง มีประโยชน์และคุณสามารถรวมเข้ากับกระบวนการสร้างได้อย่างง่ายดาย นี่คือลิงค์: gulp-annotate

— Phugo
แหล่งที่มา

-2

ตามที่ผู้อื่นกล่าวถึงสิ่งนี้ใช้สำหรับการปิดกั้นแคชของ front end ในการใช้งานนี้ฉันพบว่าแพ็กเกจ npm แบบ grunt-cache-bust มีประโยชน์

— แกะ
แหล่งที่มา

1

ในขณะที่ลิงก์นี้อาจตอบคำถาม แต่ลิงก์เพียงคำตอบนั้นไม่ได้รับการสนับสนุนใน Stack Overflow คุณสามารถปรับปรุงคำตอบนี้ได้โดยนำส่วนที่สำคัญของลิงก์และใส่ลงในคำตอบของคุณทำให้แน่ใจว่าคำตอบของคุณยังคงเป็นคำตอบ หรือลบ :)

— WhatsThePoint