caching JavaScript files

Question

Which is the best method to make the browser use cached versions of js files  from the serverside

User · Answer

I am heavily tempted to close this as a duplicate  this question appears to be answered in many different ways all over the site     will a script in html  39 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

User · Answer

The best  and only  method is to set correct HTTP headers  specifically these ones   Expires    Last-Modified   and  Cache-Control   How to do it depends on the server software you use   In Improving performance hellip  look for  Optimization on server side  for general considerations and relevant links and for  Client-side cache  for the Apache-specific advice   If you are a fan of nginx  or nginx in plain English  like I am  you can easily configure it too   location  images           expires 4h      In the example above any file from  images  will be cached on the client for 4 hours   Now when you know right words to look for  HTTP headers  Expires    Last-Modified   and  Cache-Control    just peruse the documentation of the web server you use

User · Answer

I am heavily tempted to close this as a duplicate  this question appears to be answered in many different ways all over the site     will a script in html  39 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

User · Answer

In your Apache  htaccess file    Create filter to match files you want to cache   lt Files   js gt  Header add  Cache-Control   max-age 604800   lt  Files gt    I wrote about it here also   http   betterexplained com articles how-to-optimize-your-site-with-http-caching

User · Answer

or in the  htaccess file  AddOutputFilter DEFLATE css js ExpiresActive On ExpiresByType application x-javascript A2592000

User · Answer

In your Apache  htaccess file    Create filter to match files you want to cache   lt Files   js gt  Header add  Cache-Control   max-age 604800   lt  Files gt    I wrote about it here also   http   betterexplained com articles how-to-optimize-your-site-with-http-caching

User · Answer

In your Apache  htaccess file    Create filter to match files you want to cache   lt Files   js gt  Header add  Cache-Control   max-age 604800   lt  Files gt    I wrote about it here also   http   betterexplained com articles how-to-optimize-your-site-with-http-caching

User · Answer

Have a look at Yahoo  tips  https   developer yahoo com performance rules html expires    There are also tips by Google  https   developers google com speed docs insights LeverageBrowserCaching

User · Answer

I just finished my weekend project cached-webpgr js  which uses the localStorage   web storage to cache JavaScript files  This approach is very fast  My small test showed    Loading jQuery from CDN  Chrome 268ms  FireFox  200ms Loading jQuery from localStorage   Chrome 47ms  FireFox 14ms   The code to achieve that is tiny  you can check it out at my Github project https   github com webpgr cached-webpgr js  Here is a full example how to use it   The complete library   function  cacheScript c d e  var a new XMLHttpRequest a onreadystatechange function   4  a readyState amp  amp  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 amp  amp a    b onload function    cacheScript d e c  a amp  amp 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 amp  amp localStorage removeItem d  a amp  amp a   function requireScript c d e a  var b localStorage getItem c  null  b  loadScript e c d a   injectScript b c d a      Calling the library  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

User · Answer

The best  and only  method is to set correct HTTP headers  specifically these ones   Expires    Last-Modified   and  Cache-Control   How to do it depends on the server software you use   In Improving performance hellip  look for  Optimization on server side  for general considerations and relevant links and for  Client-side cache  for the Apache-specific advice   If you are a fan of nginx  or nginx in plain English  like I am  you can easily configure it too   location  images           expires 4h      In the example above any file from  images  will be cached on the client for 4 hours   Now when you know right words to look for  HTTP headers  Expires    Last-Modified   and  Cache-Control    just peruse the documentation of the web server you use

User · Answer

I just finished my weekend project cached-webpgr js  which uses the localStorage   web storage to cache JavaScript files  This approach is very fast  My small test showed    Loading jQuery from CDN  Chrome 268ms  FireFox  200ms Loading jQuery from localStorage   Chrome 47ms  FireFox 14ms   The code to achieve that is tiny  you can check it out at my Github project https   github com webpgr cached-webpgr js  Here is a full example how to use it   The complete library   function  cacheScript c d e  var a new XMLHttpRequest a onreadystatechange function   4  a readyState amp  amp  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 amp  amp a    b onload function    cacheScript d e c  a amp  amp 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 amp  amp localStorage removeItem d  a amp  amp a   function requireScript c d e a  var b localStorage getItem c  null  b  loadScript e c d a   injectScript b c d a      Calling the library  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

User · Answer

I have a simple system that is pure JavaScript  It checks for changes in a simple text file that is never cached  When you upload a new version this file is changed  Just put the following JS at the top of the page    x000D   x000D           function url  storageName    x000D              var fromStorage   localStorage getItem storageName   x000D              var fullUrl   url     rand      Math floor Math random     100000000    x000D              getUrl function fromUrl    x000D                       first load x000D                  if   fromStorage    x000D                      localStorage setItem storageName  fromUrl   x000D                      return  x000D                    x000D                        old file x000D                  if  fromStorage     fromUrl    x000D                      return  x000D                    x000D                     files updated x000D                  localStorage setItem storageName  fromUrl   x000D                  location reload true   x000D                  x000D              function getUrl fn    x000D                  var xmlhttp   new XMLHttpRequest    x000D                  xmlhttp open  GET   fullUrl  true   x000D                  xmlhttp send    x000D                  xmlhttp onreadystatechange   function     x000D                      if  xmlhttp readyState     XMLHttpRequest DONE    x000D                          if  xmlhttp status     200    xmlhttp status     2    x000D                              fn xmlhttp responseText   x000D                            x000D                          else if  xmlhttp status     400    x000D                              throw  unable to load file for cache check      url  x000D                            x000D                          else   x000D                             throw  unable to load file for cache check      url  x000D                            x000D                        x000D                     x000D                x000D                x000D              version txt    version    x000D   x000D   x000D    just replace the  version txt  with your file that is always run and  version  with the name you want to use for your local storage

User · Answer

From 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          works for me   As a developer you ll probably quickly run into the situation that you don t want files cached  in which case see Help with aggressive JavaScript caching

User · Answer

Have a look at Yahoo  tips  https   developer yahoo com performance rules html expires    There are also tips by Google  https   developers google com speed docs insights LeverageBrowserCaching

User · Answer

The best  and only  method is to set correct HTTP headers  specifically these ones   Expires    Last-Modified   and  Cache-Control   How to do it depends on the server software you use   In Improving performance hellip  look for  Optimization on server side  for general considerations and relevant links and for  Client-side cache  for the Apache-specific advice   If you are a fan of nginx  or nginx in plain English  like I am  you can easily configure it too   location  images           expires 4h      In the example above any file from  images  will be cached on the client for 4 hours   Now when you know right words to look for  HTTP headers  Expires    Last-Modified   and  Cache-Control    just peruse the documentation of the web server you use

User · Answer

From 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          works for me   As a developer you ll probably quickly run into the situation that you don t want files cached  in which case see Help with aggressive JavaScript caching

User · Answer

or in the  htaccess file  AddOutputFilter DEFLATE css js ExpiresActive On ExpiresByType application x-javascript A2592000

User · Answer

From 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          works for me   As a developer you ll probably quickly run into the situation that you don t want files cached  in which case see Help with aggressive JavaScript caching

User · Answer

From 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          works for me   As a developer you ll probably quickly run into the situation that you don t want files cached  in which case see Help with aggressive JavaScript caching

User · Answer

or in the  htaccess file  AddOutputFilter DEFLATE css js ExpiresActive On ExpiresByType application x-javascript A2592000

User · Answer

Have a look at Yahoo  tips  https   developer yahoo com performance rules html expires    There are also tips by Google  https   developers google com speed docs insights LeverageBrowserCaching

User · Answer

I am heavily tempted to close this as a duplicate  this question appears to be answered in many different ways all over the site     will a script in html  39 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

User · Answer

In your Apache  htaccess file    Create filter to match files you want to cache   lt Files   js gt  Header add  Cache-Control   max-age 604800   lt  Files gt    I wrote about it here also   http   betterexplained com articles how-to-optimize-your-site-with-http-caching

User · Answer

I am heavily tempted to close this as a duplicate  this question appears to be answered in many different ways all over the site     will a script in html  39 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

User · Answer

I have a simple system that is pure JavaScript  It checks for changes in a simple text file that is never cached  When you upload a new version this file is changed  Just put the following JS at the top of the page    x000D   x000D           function url  storageName    x000D              var fromStorage   localStorage getItem storageName   x000D              var fullUrl   url     rand      Math floor Math random     100000000    x000D              getUrl function fromUrl    x000D                       first load x000D                  if   fromStorage    x000D                      localStorage setItem storageName  fromUrl   x000D                      return  x000D                    x000D                        old file x000D                  if  fromStorage     fromUrl    x000D                      return  x000D                    x000D                     files updated x000D                  localStorage setItem storageName  fromUrl   x000D                  location reload true   x000D                  x000D              function getUrl fn    x000D                  var xmlhttp   new XMLHttpRequest    x000D                  xmlhttp open  GET   fullUrl  true   x000D                  xmlhttp send    x000D                  xmlhttp onreadystatechange   function     x000D                      if  xmlhttp readyState     XMLHttpRequest DONE    x000D                          if  xmlhttp status     200    xmlhttp status     2    x000D                              fn xmlhttp responseText   x000D                            x000D                          else if  xmlhttp status     400    x000D                              throw  unable to load file for cache check      url  x000D                            x000D                          else   x000D                             throw  unable to load file for cache check      url  x000D                            x000D                        x000D                     x000D                x000D                x000D              version txt    version    x000D   x000D   x000D    just replace the  version txt  with your file that is always run and  version  with the name you want to use for your local storage

User · Answer

Have a look at Yahoo  tips  https   developer yahoo com performance rules html expires    There are also tips by Google  https   developers google com speed docs insights LeverageBrowserCaching

User · Answer

or in the  htaccess file  AddOutputFilter DEFLATE css js ExpiresActive On ExpiresByType application x-javascript A2592000

User · Answer

The best  and only  method is to set correct HTTP headers  specifically these ones   Expires    Last-Modified   and  Cache-Control   How to do it depends on the server software you use   In Improving performance hellip  look for  Optimization on server side  for general considerations and relevant links and for  Client-side cache  for the Apache-specific advice   If you are a fan of nginx  or nginx in plain English  like I am  you can easily configure it too   location  images           expires 4h      In the example above any file from  images  will be cached on the client for 4 hours   Now when you know right words to look for  HTTP headers  Expires    Last-Modified   and  Cache-Control    just peruse the documentation of the web server you use

[javascript] caching JavaScript files

Examples related to javascript

Examples related to http

Examples related to caching