html - htaccess - ¿Qué significa agregar "? V=1" a las URL de CSS y Javascript en las etiquetas de enlace y script?

leverage browser caching htaccess

Question

He estado viendo una plantilla repetitiva HTML 5 (de http://html5boilerplate.com/ ) y he notado el uso de "?v=1" en las URL cuando se hace referencia a los archivos CSS y Javascript.

1. ¿Qué significa agregar "?v=1" a las URL de CSS y Javascript en las etiquetas de enlace y script?
2. No todas las URL Javascript tienen el "?v=1" (ejemplo del ejemplo a continuación: js/modernizr-1.5.min.js ). ¿Hay alguna razón por la cual este es el caso?

Muestra de su 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 -->

Gracias por adelantado.

Answer 1

Como lo mencionaron otros, esto se usa para el almacenamiento en caché de front-end. Para implementar esto, personalmente he encontrado útil el paquete grunt-cache-bust npm.

Answer 2

El navegador suele almacenar en caché los archivos Javascript durante mucho más tiempo de lo que cabría esperar.

Esto a menudo puede dar como resultado un comportamiento inesperado cuando lanza una nueva versión de su archivo JS.

Por lo tanto, es una práctica común agregar un parámetro QueryString a la URL para el archivo javascript. De esta forma, el navegador guarda en caché el archivo Javascript con v = 1. Cuando lanza una nueva versión de su archivo javascript, cambia las URL a v = 2 y el navegador se verá obligado a descargar una nueva copia.

Answer 3

Esto asegura que está obteniendo la última versión del archivo css o js del servidor.

Y luego puede agregar "?v=2" si tiene una versión más nueva y "?v=3", "?v=4" y así sucesivamente.

Tenga en cuenta que puede usar cualquier querystring , ''v'' no es una necesidad, por ejemplo:

"?blah=1 " también funcionará.

Y

"?xyz=1002" funcionará.

Y esta es una técnica común porque los navegadores ahora almacenan en caché los archivos js y css mejor y más.

Answer 4

Estos suelen ser para asegurarse de que el navegador obtiene una nueva versión cuando el sitio se actualiza con una nueva versión, por ejemplo, como parte de nuestro proceso de creación tendríamos algo como esto:

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

Como esto cambia con cada nuevo impulso de código, el cliente se ve obligado a tomar una nueva versión, solo por la cadena de consulta. Mire esta página (en el momento de esta respuesta), por ejemplo:

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

Creo que en lugar de un número de revisión, el equipo de SO se fue con un archivo hash, que es un enfoque aún mejor, incluso con una nueva versión, los navegadores solo se ven obligados a tomar una nueva versión cuando el archivo realmente cambia.

Ambos enfoques te permiten configurar el encabezado del caché en algo ridículamente largo, digamos 20 años ... pero cuando cambia, no tienes que preocuparte por el encabezado del caché, el navegador ve una cadena de preguntas diferente y la trata como una archivo nuevo y diferente

Answer 5

La solución de hash es agradable, pero no realmente legible cuando se quiere saber qué versión de archivo está en su carpeta web local. La solución es la marca de date/time su versión para que pueda compararla fácilmente con su archivo de servidor.

Por ejemplo, si su archivo .js or .css está fechado el 2011-02-08 15:55:30 (última modificación), entonces la versión debe ser igual a .js?v=20110208155530

Debe ser fácil de leer las propiedades de cualquier archivo en cualquier idioma. En ASP.Net es realmente fácil ...

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

Por lo tanto, consíguelo bien refactorizado en propiedades / funciones primero y listo. No más excusas.

Buena suerte, Art.

Answer 6

Para responder tus preguntas;

"? v = 1" esto se escribe solo porque se descarga una copia nueva de los archivos css y js en lugar de usar desde la memoria caché del navegador.

Si menciona este parámetro de cadena de consulta al final de su hoja de estilo o el archivo js, ​​obliga al navegador a descargar un archivo nuevo, debido a lo cual los cambios recientes en los archivos .css y .js se hacen efectivos en su navegador.

Si no utiliza este control de versiones, es posible que necesite borrar el caché de actualizar la página para ver los cambios recientes en esos archivos.

Aquí hay un artículo que explica esto Cómo y por qué hacer versiones de archivos CSS y JS

Answer 7

Solo mis dos centavos.

Como puede leer antes, el ?v=1 asegura que su navegador obtenga la versión 1 del archivo. Cuando tienes una nueva versión, solo tienes que agregar un número de versión diferente y el navegador se olvidará de la versión anterior y cargará la nueva.

Hay un plugin gulp que se encarga de la versión de tus archivos durante la fase de compilación, por lo que no tienes que hacerlo manualmente. Es práctico y puedes integrarlo fácilmente en tu proceso de construcción. Aquí está el link gulp-annotate

Answer 8

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