navegadores - manejo de archivos en javascript

almacenamiento en caché de archivos JavaScript

Question

¿Cuál es el mejor método para que el navegador use versiones en caché de archivos js (desde el lado del servidor)?

Answer 1

Acabo de terminar mi proyecto de fin de semana cached-webpgr.js, que usa localStorage / web storage para almacenar en caché los archivos JavaScript. Este enfoque es muy rápido. Mi pequeña prueba mostró

• Cargando jQuery desde CDN: Chrome 268ms , FireFox: 200ms
• Cargando jQuery desde localStorage: Chrome 47ms , FireFox 14ms

El código para lograr eso es muy pequeño, puedes consultarlo en mi proyecto Github https://github.com/webpgr/cached-webpgr.js

Aquí hay un ejemplo completo de cómo usarlo.

La biblioteca completa:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

Llamando a la biblioteca

requireScript(''jquery'', ''1.11.2'', ''http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'', function(){
requireScript(''examplejs'', ''0.0.3'', ''example.js'');
});

Answer 2

Desde PHP:

function OutputJs($Content)
{
ob_start();
echo $Content;
$expires = DAY_IN_S; // 60 * 60 * 24 ... defined elsewhere
header("Content-type: x-javascript");
header(''Content-Length: '' . ob_get_length());
header(''Cache-Control: max-age=''.$expires.'', must-revalidate'');
header(''Pragma: public'');
header(''Expires: ''. gmdate(''D, d M Y H:i:s'', time()+$expires).''GMT'');
ob_end_flush();
return;
}

funciona para mi.

Como desarrollador, probablemente se encontrará rápidamente con la situación en la que no desea que los archivos se almacenen en caché, en cuyo caso, consulte la Ayuda con el almacenamiento en caché de JavaScript agresivo.

Answer 3

Echa un vistazo a Yahoo! consejos: https://developer.yahoo.com/performance/rules.html#expires .

También hay consejos de Google: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Answer 4

El mejor (y único) método es establecer encabezados HTTP correctos, específicamente estos: "Caduca", "Última modificación" y "Control de caché". Cómo hacerlo depende del software de servidor que use.

En Mejora del rendimiento ... busque "Optimización en el lado del servidor" para consideraciones generales y enlaces relevantes y para "Caché del lado del cliente" para obtener consejos específicos de Apache.

Si eres fanático de nginx (o nginx en inglés sencillo ) como yo, también puedes configurarlo fácilmente:

location /images {
...
expires 4h;
}

En el ejemplo anterior, cualquier archivo de / images / se almacenará en caché en el cliente durante 4 horas.

Ahora, cuando conozca las palabras correctas que debe buscar (encabezados HTTP "Caduca", "Última modificación" y "Control de caché"), simplemente examine la documentación del servidor web que utiliza.

Answer 5

En tu archivo Apache .htaccess:

#Create filter to match files you want to cache
<Files *.js>
Header add "Cache-Control" "max-age=604800"
</Files>

También escribí sobre esto aquí:

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Answer 6

Estoy muy tentado de cerrar esto como un duplicado; esta pregunta parece ser respondida de muchas maneras diferentes en todo el sitio:

• ¿se almacenará en caché un script en la etiqueta de script de html con la extensión php?
• ¿Cuándo el navegador borra automáticamente el caché del archivo JavaScript externo?
• Ayuda con el almacenamiento en caché agresivo de JavaScript
• ¿Cómo controlar el almacenamiento en caché de la página web en todos los navegadores?
• ¿Cómo puedo hacer que el navegador vea los cambios de CSS y Javascript?

Answer 7

Tengo un sistema simple que es JavaScript puro. Comprueba los cambios en un archivo de texto simple que nunca se almacena en caché. Cuando carga una nueva versión, este archivo cambia. Simplemente coloque el siguiente JS en la parte superior de la página.

 (function(url, storageName) {
var fromStorage = localStorage.getItem(storageName);
var fullUrl = url + "?rand=" + (Math.floor(Math.random() * 100000000));
getUrl(function(fromUrl) {
// first load
if (!fromStorage) {
localStorage.setItem(storageName, fromUrl);
return;
}
// old file
if (fromStorage === fromUrl) {
return;
}
// files updated
localStorage.setItem(storageName, fromUrl);
location.reload(true);
});
function getUrl(fn) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", fullUrl, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === XMLHttpRequest.DONE) {
if (xmlhttp.status === 200 || xmlhttp.status === 2) {
fn(xmlhttp.responseText);
}
else if (xmlhttp.status === 400) {
throw ''unable to load file for cache check '' + url;
}
else {
throw ''unable to load file for cache check '' + url;
}
}
};
}
;
})("version.txt", "version");

simplemente reemplace "version.txt" con su archivo que siempre se ejecuta y "versión" con el nombre que desea usar para su almacenamiento local.

Answer 8

o en el archivo .htaccess

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000