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

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

126 голосов
/ 12 августа 2010

Я просматривал шаблонный шаблон 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 -->

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

Ответы [ 8 ]

162 голосов
/ 12 августа 2010

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

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

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

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

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

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

22 голосов
/ 12 августа 2010

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

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

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

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

И

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

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

13 голосов
/ 08 февраля 2011

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

Потому что сначала вы можете легко преобразовать его в свойства / функции, и все готово.Больше никаких оправданий.

Удачи, Арт.

7 голосов
/ 08 октября 2013

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

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

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

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

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

7 голосов
/ 12 августа 2010

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

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

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

2 голосов
/ 02 июня 2016 
// 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);
}
0 голосов
/ 24 января 2018

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

0 голосов
/ 14 апреля 2017

Только мои два цента.

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

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

...