Что означает добавление "?v=1 " для URL-адресов CSS и Javascript в тегах ссылок и скриптов?

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

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

спасибо заранее.

8 120
html css browser-cache

8 ответов:

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

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

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

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

оба этих подхода позволяют установить заголовок кэша на что-то смехотворно длинное, скажем, 20 лет...тем не менее, когда он изменяется, вам не нужно беспокоиться об этом заголовке кэша, браузер видит другую строку запроса и обрабатывает ее как другой, новый файл.

154

Это гарантирует, что вы получаете последнюю версию файла css или js с сервера.

и позже вы можете добавить "?v=2" Если у вас более новая версия и "?v=3", "?v=4" и так далее.

обратите внимание, что вы можете использовать любой querystring, 'v' не является обязательным, например:

"?blah=1" будет также работать.

и

"?xyz=1002" будет работать.

и это распространенный метод, потому что браузеры теперь кэшируют файлы js и css лучше и дольше.

19

хэш-решение хорошее, но не очень читаемое человеком, когда вы хотите знать, какая версия файла находится в вашей локальной веб-папке. Решение заключается в date/time отметьте свою версию, чтобы вы могли легко сравнить ее с вашим файлом сервера.

например, если ваш датирован 2011-02-08 15:55:30 (последняя модификация) тогда версия должна быть равна .js?v=20110208155530

должно быть легко читать свойства любого файла на любом языке. In ASP.Net это действительно так простой...

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

из coz получить его красиво рефакторинг в свойства / функции в первую очередь и прочь вы идете. Больше никаких оправданий.

удачи, арт.

13

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

это часто может привести к неожиданному поведению при выпуске новой версии файла JS.

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

7

чтобы ответить на ваши вопросы;

"?v=1" это написано только потому, что для загрузки новой копии файлов css и js вместо использования из кэша браузера.

Если вы упоминаете этот параметр строки запроса в конце таблицы стилей или файла js, то он заставляет браузер загружать новый файл, из-за которого последние изменения в нем .css и .JS-файлы становятся эффективными в вашем браузере.

Если вы не используете эту версию, то вам может потребоваться очистить кэш обновить страницу для просмотра последних изменений в этих файлах.

вот статья, которая объясняет эту вещь как и почему сделать версионирование CSS и js файлов

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

просто мои два цента.

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

есть залпом плагин, который заботится о версии ваших файлов на этапе сборки, так что вам не придется делать это вручную. Это удобно и вы можете легко интегрировать его в вы строите процесс. Вот ссылка залпом-аннотации

0

Как говорили другие, это используется для очистки кеша. Чтобы реализовать это, я лично считаю, что пакет NPM grunt-cache-bust полезен.

-2