Что добавляет "? V = 1" к URL-адресам CSS и Javascript в ссылках и тегах script?

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

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

Ответ 1

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

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

Так как это изменяется с каждым новым нажатием кода, клиент вынужден захватить новую версию только из-за запроса. Посмотрите на эту страницу (например, на момент ответа):

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

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

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

Ответ 2

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

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

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

"?blah=1 ".

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

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

Ответ 3

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

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

Удачи, искусство.

Ответ 4

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

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

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

Ответ 5

Для того, чтобы ответить на ваши вопросы;

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

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

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

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

Ответ 6

Во время разработки/тестирования новых выпусков кеш может быть проблемой, потому что браузер, сервер и даже иногда 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);
}

Ответ 7

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

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

Ответ 8

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