almacenamiento en caché de archivos de 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

Tenga una mirada en Yahoo! consejos: http://developer.yahoo.com/performance/rules.html#expires.

También hay consejos por Google: https://developers.google.com/speed/docs/best-practices/caching

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 mí.

Como desarrollador es probable que ejecuta rápidamente en la situación que usted no lo hace quieren archivos almacenados en caché, en cuyo caso ver Help with aggressive JavaScript caching

Answer 3

o en el archivo .htaccess

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

Answer 4

I estoy muy tentado de cerrar esto como un duplicado; esta cuestión parece ser respondidas de muchas maneras diferentes en todo el sitio:

• will a script in html's script tag with extension php be cached?
• When does browser automatically clear cache of external JavaScript file?
• Help with aggressive JavaScript caching
• How to control web page caching, across all browsers?
• How can I make the browser see CSS and Javascript changes?

Answer 5

En su archivo .htaccess de Apache :

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

me escribió acerca de ello aquí también:

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

Answer 6

La mejor (y único) método consiste en establecer cabeceras HTTP correctas, específicamente éstos: "caduca", y "Last-Modified", y "Cache-Control" . Cómo hacerlo depende del software de servidor que use.

En Improving performance… 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 usted es un fan de nginx (o nginx in plain English) como yo, se puede configurar de forma sencilla también:

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

En el ejemplo anterior cualquier archivo desde/images/se almacenan en caché en el cliente para 4 horas.

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

Answer 7

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

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

El código para lograr eso es muy pequeño, puedes verlo en mi proyecto de 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)}; 

Llamada 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 8

Tengo un sistema simple que es puro JavaScript. 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");

basta con sustituir el "version.txt" con su archivo que siempre se ejecuta y "versión" con el nombre que desea utilizar para su almacenamiento local.