Что делает добавление «? V = 1» к URL-адресам CSS и Javascript в тегах ссылок и сценариев?

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

1. Что делает добавление "?v=1"к ссылкам 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-оператор (если вы делаете мобильное развертывание) будут кешировать статический контент (например, 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);
}

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

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

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