Việc gắn thêm những gì? V = 1 đối với các URL CSS và Javascript trong các thẻ liên kết và tập lệnh làm gì?

Tôi đã xem xét một mẫu soạn sẵn HTML 5 (từ http://html5boilerplate.com/ ) và nhận thấy việc sử dụng "?v=1"URL trong khi tham khảo các tệp CSS và Javascript.

1. Việc gắn "?v=1"vào các URL CSS và Javascript trong thẻ liên kết và tập lệnh làm gì?
2. Không phải tất cả các URL Javascript đều có "?v=1"(ví dụ từ mẫu bên dưới js/modernizr-1.5.min.js:). Có một lý do tại sao đây là trường hợp?

Mẫu từ họ 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 -->

Chúng thường là để đảm bảo rằng trình duyệt có phiên bản mới khi trang web được cập nhật với phiên bản mới, ví dụ như là một phần của quá trình xây dựng của chúng tôi, chúng tôi sẽ có một cái gì đó như thế này:

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

Vì điều này thay đổi với mỗi lần đẩy mã mới, khách hàng buộc phải lấy một phiên bản mới, chỉ vì chuỗi truy vấn. Nhìn vào trang này (tại thời điểm trả lời này), ví dụ:

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

Tôi nghĩ thay vì số sửa đổi, nhóm SO đã sử dụng hàm băm, đây là cách tiếp cận tốt hơn, ngay cả với bản phát hành mới, các trình duyệt chỉ buộc phải lấy phiên bản mới khi tệp thực sự thay đổi.

Cả hai cách tiếp cận này đều cho phép bạn đặt tiêu đề bộ đệm thành một cái gì đó dài một cách lố bịch, giả sử là 20 năm ... nhưng khi nó thay đổi, bạn không phải lo lắng về tiêu đề bộ đệm đó, trình duyệt thấy một chuỗi truy vấn khác và coi nó như một chuỗi truy vấn khác khác nhau, tập tin mới.

Điều này đảm bảo bạn sẽ nhận được phiên bản mới nhất từ ​​tệp css hoặc js từ máy chủ.

Và sau này bạn có thể nối thêm "?v=2"nếu bạn có phiên bản mới hơn "?v=3", "?v=4", v.v.

Lưu ý rằng bạn có thể sử dụng bất kỳ querystring, 'v' không phải là một ví dụ bắt buộc:

"?blah=1"Sẽ hoạt động tốt.

Và

"?xyz=1002" sẽ làm việc.

Và đây là một kỹ thuật phổ biến vì các trình duyệt hiện đang lưu các tệp js và css tốt hơn và lâu hơn.

Giải pháp băm là tốt nhưng không thực sự có thể đọc được khi bạn muốn biết phiên bản nào của tệp đang nằm trong thư mục web cục bộ của bạn. Giải pháp làdate/time đóng dấu phiên bản của bạn để bạn có thể dễ dàng so sánh nó với tệp máy chủ của mình.

Ví dụ: nếu .js or .csstệp của bạn là ngày2011-02-08 15:55:30 (sửa đổi lần cuối) thì phiên bản sẽ bằng.js?v=20110208155530

Nên dễ đọc các thuộc tính của bất kỳ tệp nào trong bất kỳ ngôn ngữ nào. Trong ASP.Net thật dễ dàng ...

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

Coz làm cho nó được tái cấu trúc độc đáo thành các thuộc tính / chức năng đầu tiên và tắt đi. Không còn lời bào chữa nào nữa.

Chúc may mắn, Nghệ thuật.

Các tệp Javascript thường được trình duyệt lưu vào bộ nhớ cache lâu hơn nhiều so với bạn mong đợi.

Điều này thường có thể dẫn đến hành vi không mong muốn khi bạn phát hành phiên bản mới của tệp JS.

Do đó, thông thường là thêm tham số QueryString vào URL cho tệp javascript. Bằng cách đó, trình duyệt lưu trữ tệp Javascript với v = 1. Khi bạn phát hành phiên bản mới của tệp javascript, bạn thay đổi url thành v = 2 và trình duyệt sẽ buộc phải tải xuống một bản sao mới.

Để trả lời bạn câu hỏi;

"? v = 1" điều này chỉ được viết bằng beacuse để tải xuống một bản sao mới của các tệp css và js thay vì sử dụng từ bộ đệm của trình duyệt.

Nếu bạn đề cập đến tham số chuỗi truy vấn này ở cuối biểu định kiểu hoặc tệp js thì nó buộc trình duyệt tải xuống một tệp mới, do đó những thay đổi gần đây trong tệp .css và .js được thực hiện trong trình duyệt của bạn.

Nếu bạn không sử dụng phiên bản này thì bạn có thể cần xóa bộ nhớ cache làm mới trang để xem các thay đổi gần đây trong các tệp đó.

Dưới đây là một bài viết giải thích điều này Làm thế nào và tại sao để tạo phiên bản của các tệp CSS và JS

Trong quá trình phát triển / thử nghiệm các bản phát hành mới, bộ đệm có thể là một vấn đề vì trình duyệt, máy chủ và thậm chí đôi khi là telco 3G (nếu bạn triển khai trên thiết bị di động) sẽ lưu trữ nội dung tĩnh (ví dụ: JS, CSS, HTML, img). Bạn có thể khắc phục điều này bằng cách nối thêm số phiên bản, số ngẫu nhiên hoặc dấu thời gian vào URL, ví dụ: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Trong trường hợp bạn đang chạy HTML thuần túy (thay vì các trang máy chủ JSP, ASP, PHP), máy chủ sẽ không giúp bạn. Trong trình duyệt, các liên kết được tải trước khi chạy JS, do đó bạn phải xóa các liên kết và tải chúng bằng 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);
}

Như bạn có thể đọc trước đây, ?v=1 đảm bảo rằng trình duyệt của bạn có được phiên bản 1 của tệp. Khi bạn có một phiên bản mới, bạn chỉ cần thêm một số phiên bản khác và trình duyệt sẽ quên phiên bản cũ và tải phiên bản mới.

Có một plugin gulp chăm sóc phiên bản các tệp của bạn trong giai đoạn xây dựng, vì vậy bạn không phải thực hiện thủ công. Thật tiện dụng và bạn có thể dễ dàng tích hợp nó trong quá trình xây dựng. Đây là liên kết: gulp-annotate

Như đã đề cập bởi những người khác, điều này được sử dụng để phá vỡ bộ nhớ cache phía trước. Để thực hiện điều này, cá nhân tôi thấy gói npm grunt-cache-bust hữu ích.