Що робить додавання "? V = 1" до URL-адрес CSS та Javascript у посиланнях та тегах сценарію?

Я переглядав шаблон шаблону HTML 5 (від http://html5boilerplate.com/ ) і помітив використання "?v=1"в URL-адресах при посиланні на файли CSS та Javascript.

1. Що робить додавання "?v=1"до URL-адрес CSS та Javascript у тегах посилань та скриптів?
2. Не всі 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 -->

Зазвичай, щоб переконатися, що веб-переглядач отримує нову версію, коли сайт оновлюється новою версією, наприклад, як частина нашого процесу збирання у нас буде щось подібне:

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

Оскільки це змінюється з кожним новим натисканням коду, клієнт змушений захопити нову версію, саме через запит рядка. Подивіться, наприклад, цю сторінку (під час цієї відповіді):

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

Я думаю, що замість ревізійного номера команда SO пішла з файловим хешем, що є ще кращим підходом, навіть з новим випуском браузери змушені схопити нову версію, коли файл насправді зміниться.

Обидва ці підходи дозволяють встановити заголовок кешу на щось смішно довге, скажімо, 20 років ... але коли він змінюється, вам не доведеться турбуватися про цей заголовок кешу, браузер бачить інший рядок запитів і трактує його як інший, новий файл.

Це гарантує отримання останньої версії файлу css або js від сервера.

А пізніше ви можете додати, "?v=2"якщо у вас є новіша версія "?v=3", "?v=4"тощо.

Зауважте, що ви можете використовувати будь-яке querystring, "v" не є обов'язковим, наприклад:

"?blah=1"також буде працювати.

І

"?xyz=1002" буду працювати.

І це звичайна техніка, оскільки браузери тепер кешують файли js та css краще та довше.

Хеш-рішення є приємним, але насправді не читабельним, коли ви хочете знати, яка версія файлу сидить у вашій локальній папці. Рішення полягає в 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");

Зі свого боку, це чудово переробляється на властивості / функції спочатку та поза ним. Більше немає виправдань.

Удачі, ст.

Файли Javascript часто кешуються браузером набагато довше, ніж ви могли очікувати.

Це часто може призвести до несподіваної поведінки, коли ви випускаєте нову версію файлу JS.

Тому прийнято додавати параметр QueryString до URL-адреси для файлу javascript. Таким чином, браузер кешує файл Javascript з v = 1. Коли ви випустите нову версію файлу javascript, ви зміните URL-адресу на v = 2, і браузер буде змушений завантажити нову копію.

Аби відповісти на запитання;

"? v = 1" це записується лише тому, що завантажується свіжа копія файлів css та js замість використання з кешу браузера.

Якщо ви згадуєте цей параметр рядка запиту в кінці таблиці стилів або js-файлу, він змушує браузер завантажити новий файл, завдяки якому останні зміни в .css і .js файли роблять ефективними у вашому браузері.

Якщо ви не використовуєте цю версію, то, можливо, вам доведеться очистити кеш оновлення сторінки, щоб переглянути останні зміни в цих файлах.

Ось стаття, яка пояснює цю річ Як і навіщо робити версії файлів CSS та JS

Під час розробки / тестування нових випусків кеш може бути проблемою, оскільки браузер, сервер і навіть іноді 3G telco (якщо ви робите мобільне розгортання) кешуватимуть статичний вміст (наприклад, JS, CSS, HTML, img). Ви можете подолати це, додавши до версії номер версії, випадкове число або часову позначку, наприклад: 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);
}

Як ви можете прочитати раніше, ?v=1гарантує, що ваш браузер отримає версію файлу 1. Коли у вас є нова версія, вам просто потрібно додати інший номер версії, і браузер забуде про стару версію і завантажить нову.

Існує плагін gulp, який піклується про версію файлів під час фази збирання, тому вам не доведеться робити це вручну. Це зручно, і ви можете легко інтегрувати його в процесі збирання. Ось посилання: gulp-annotate

Як згадували інші, це використовується для перетворення кешу переднього кінця. Для цього я особисто вважаю корисним пакет npm grunt-cache-bust npm.