Apa yang dilakukan dengan menambahkan "? V = 1" ke URL CSS dan Javascript di tag tautan dan skrip?

140

Saya telah melihat template boilerplate HTML 5 (dari http://html5boilerplate.com/ ) dan memperhatikan penggunaan "?v=1"dalam URL saat merujuk ke file CSS dan Javascript.

  1. Apa yang dilakukan penambahan "?v=1"ke URL CSS dan Javascript di tag tautan dan skrip?
  2. Tidak semua URL Javascript memiliki "?v=1"(contoh dari contoh di bawah ini:) js/modernizr-1.5.min.js. Apakah ada alasan mengapa ini terjadi?

Sampel dari mereka 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.dll
sumber

Jawaban:

177

Ini biasanya untuk memastikan bahwa browser mendapatkan versi baru ketika situs diperbarui dengan versi baru, misalnya sebagai bagian dari proses pembuatan kami, kami akan memiliki sesuatu seperti ini:

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

Karena ini berubah dengan setiap dorongan kode baru, klien dipaksa untuk mengambil versi baru, hanya karena string kueri. Lihat halaman ini (pada saat jawaban ini) misalnya:

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

Saya pikir alih-alih nomor revisi, tim SO menggunakan hash file, yang merupakan pendekatan yang lebih baik, bahkan dengan rilis baru, browser hanya dipaksa untuk mengambil versi baru ketika file benar-benar berubah.

Kedua pendekatan ini memungkinkan Anda untuk mengatur header cache menjadi sesuatu yang sangat panjang, katakanlah 20 tahun ... namun ketika itu berubah, Anda tidak perlu khawatir tentang header cache itu, browser melihat querystring yang berbeda dan memperlakukannya sebagai sebuah berbeda, file baru.

— Nick Craver
sumber
3
@ Gratis - Sebuah header kontrol cache yang dikirim kemarin tidak dapat memberi tahu klien bahwa file tersebut diubah hari ini (klien bahkan tidak akan memeriksa), URL bisa. Bisakah Anda menjelaskan apa yang saya lewatkan di sana?
— Nick Craver
9
@Free - Cara file-file ini di-cache selamanya , artinya klien sama sekali tidak memeriksa apakah file tersebut dimodifikasi. Ini berarti mereka tidak akan pernah mendapatkan file yang diperbarui ... kecuali jika URL-nya berubah, yang terjadi dengan teknik di atas. Anda mendapatkan masa pakai cache maksimum pada klien (permintaan HTTP paling sedikit) tetapi klien langsung diperbarui ketika file benar-benar berubah . Persisnya bagaimana Anda mencapai semua ini hanya dengan menggunakan header kontrol cache?
— Nick Craver
4
@Free - Stack Overflow mendapatkan 5 juta pengunjung setiap bulan, pendekatan Anda akan memiliki 2 dampak: a) lebih banyak permintaan dan data yang dikirim ke / dari server kami, dan b) pengguna tidak akan segera mendapatkan JavaScript / CSS baru (misalnya ketika kami mengalami bug, atau perubahan HTML membutuhkan JS / CSS baru). Kedaluwarsa alami sebenarnya bukanlah pilihan di sini. Metode yang Anda usulkan secara teknis jauh lebih tidak efisien dan hasilnya adalah bug pengguna yang sebenarnya , secara teratur ... yang tidak benar-benar dapat diterima di situs utama mana pun (juga tidak seharusnya situs mana pun benar-benar).
— Nick Craver
2
@ Gratis - 5 juta adalah 5 juta pengunjung per bulan , karena kami menyebarkan berkali-kali sehari , permintaannya berkali-kali lipat. Dalam hal pemuatan halaman HTML, kita berbicara sedikit di atas 110 juta per bulan (dan berkembang ... lagi-lagi itu hanya pemuatan halaman HTML). Untuk a) ya, lebih banyak, atau lebih banyak jeda, itu adalah trade-off pada waktu cache vs klien memiliki konten yang benar. Juga, logika Anda untuk b) cacat, html tidak di- cache, jadi digunakan dengan JS yang di-cache yang tidak lagi berfungsi berarti hanya pengguna yang di-cache yang terpengaruh, bukannya mereka kebal.
— Nick Craver
5
@GMsoF v hanya mewakili "versi" bagi kami, itu adalah pilihan yang sepenuhnya sewenang-wenang. String kueri nilai apa pun akan berfungsi, misalnya bisa dengan mudah menjadi? Jejdutogjesudo =
— Nick Craver
23

Ini memastikan Anda mendapatkan versi terbaru dari file css atau js dari server.

Dan nanti Anda dapat menambahkan "?v=2"jika Anda memiliki versi yang lebih baru "?v=3", "?v=4"dan seterusnya.

Perhatikan bahwa Anda dapat menggunakan apa pun querystring, 'v' bukan suatu keharusan, misalnya:

"?blah=1"akan berhasil juga.

Dan

"?xyz=1002" akan bekerja.

Dan ini adalah teknik umum karena browser sekarang menyimpan file js dan css dengan lebih baik dan lebih lama.

— Amr Elgarhy
sumber
13

Solusi hash bagus tetapi tidak benar-benar dapat dibaca manusia ketika Anda ingin tahu versi file apa yang ada di folder web lokal Anda. Solusinya adalah memberi date/timestempel pada versi Anda sehingga Anda dapat dengan mudah membandingkannya dengan file server Anda.

Misalnya, jika .js or .cssfile Anda diberi tanggal 2011-02-08 15:55:30(modifikasi terakhir) maka versinya harus sama dengan.js?v=20110208155530

Harus mudah membaca properti file apa pun dalam bahasa apa pun. Di ASP.Net sangat mudah ...

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

Karena mendapatkannya dengan baik direfraktorisasi menjadi properti / fungsi terlebih dahulu dan pergilah. Tidak ada lagi alasan.

Semoga beruntung, Art.

— Seni
sumber
2
Bagaimana jika Anda membangun website Anda hanya dengan html js dan css. Lalu bagaimana kita bisa secara otomatis memasukkan nama versi ke sumber daya statis?
— Nishanth Nair
@ Whizkid747 terlambat membalas, tetapi untuk pendatang baru, pembuat situs / sistem pembuat apa pun yang Anda gunakan harus memiliki cara untuk mendapatkan tanggal dalam milidetik yang dapat Anda gunakan sebagai versi, sebaliknya jika Anda tidak menggunakan sistem pembangun // membangun Anda harus menulis ini sendiri.
— AntK
7

File Javascript sering di-cache oleh browser lebih lama dari yang Anda harapkan.

Ini sering kali dapat mengakibatkan perilaku yang tidak terduga saat Anda merilis versi baru file JS Anda.

Oleh karena itu, merupakan praktik umum untuk menambahkan parameter QueryString ke URL untuk file javascript. Dengan cara itu, browser menyimpan file Javascript dengan v = 1. Ketika Anda merilis versi baru dari file javascript Anda, Anda mengubah url ke v = 2 dan browser akan dipaksa untuk mendownload salinan baru.

— Robin Day
sumber
browser yang mana sebenarnya? bahkan IE 5 yang paling unik, dan 6 pun mematuhi header kontrol cache.
— Konsultasi Gratis
7

Untuk menjawab pertanyaan Anda;

"? v = 1" ini ditulis hanya karena untuk mengunduh salinan baru dari file css dan js daripada menggunakan dari cache browser.

Jika Anda menyebutkan parameter string kueri ini di akhir stylesheet atau file js Anda, maka itu memaksa browser untuk mengunduh file baru, Karena itu, perubahan terbaru pada file .css dan .js dibuat efektif di browser Anda.

Jika Anda tidak menggunakan versi ini, Anda mungkin perlu menghapus cache dari refresh halaman untuk melihat perubahan terbaru pada file tersebut.

Berikut adalah artikel yang menjelaskan hal ini Bagaimana dan Mengapa membuat versi file CSS dan JS

— Tapan kumar
sumber
2

Selama pengembangan / pengujian rilis baru, cache dapat menjadi masalah karena browser, server, dan bahkan terkadang telco 3G (jika Anda melakukan penerapan seluler) akan menyimpan cache konten statis (misalnya JS, CSS, HTML, img). Anda dapat mengatasinya dengan menambahkan nomor versi, nomor acak atau cap waktu ke URL misalnya: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Jika Anda menjalankan HTML murni (bukan halaman server JSP, ASP, PHP) server tidak akan membantu Anda. Di browser, tautan dimuat sebelum JS dijalankan, oleh karena itu Anda harus menghapus tautan dan memuatnya dengan 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
sumber
0

Seperti yang dapat Anda baca sebelumnya, ?v=1memastikan bahwa browser Anda mendapatkan versi 1 dari file tersebut. Jika Anda memiliki versi baru, Anda hanya perlu menambahkan nomor versi yang berbeda dan browser akan melupakan versi lama dan memuat yang baru.

Ada plugin gulp yang menangani versi file Anda selama fase build, jadi Anda tidak perlu melakukannya secara manual. Ini berguna dan Anda dapat dengan mudah mengintegrasikannya dalam proses pembuatan. Ini tautannya: gulp-annotate

— Phugo
sumber
-2

Seperti yang disebutkan oleh orang lain, ini digunakan untuk perusakan cache ujung depan. Untuk mengimplementasikan ini, saya pribadi menemukan paket npm grunt-cache-bust berguna.

— Ram
sumber
1
Meskipun tautan ini dapat menjawab pertanyaan, jawaban hanya tautan tidak disarankan di Stack Overflow, Anda dapat meningkatkan jawaban ini dengan mengambil bagian penting dari tautan dan memasukkannya ke dalam jawaban Anda, ini memastikan jawaban Anda masih merupakan jawaban jika tautan diubah atau dihapus :)
— WhatsThePoint
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.