Caching problem with asynchronous javascript loading with onload event

Question

I am currently trying to load some js files asynchronously, so that they are not able to block the rest of the website. I mainly followed the descriptions found here:

Asynchronous Javascript

In terms of the non blocking loading of the javascript file this works great, but i got now the problem that the javascript file is cached and stays cached even if i change the content (also doing shift-reload does not help anything).

My current code of loading the script looks like the following:

 (function() {
   function xx_async_load() {
     var xx = document.createElement('script');
     xx.type = 'text/javascript';
     xx.async = true;
     xx.src = 'http://myserver.de/myjs.js';
     var el = document.getElementsByTagName('script')[0];
     el.parentNode.insertBefore(xx, el);
   }

   if (window.addEventListener) {
     window.addEventListener('load', xx_async_load, false);
   } else if (window.attachEvent){
     window.attachEvent('onload', xx_async_load);
   }

 })();

If i call the code inside "xx_async_load" directly and change the myjs.js, the changes are getting recognized, but if I am loading this through the onload event it always stays cached and the changed are never recognized.

Does anybody know a solution how I make the browser to recognize the changes in the cached files (problem appears in Opera, FF and IE work fine)?

EDIT: If i look at the "Network" tab of Operas Dragonfly, there isn't even a request done on reload for the cached JS file, it seems that it is directly loading it from cache without even checking against the file on the server.

EDIT2: I will test how long it stays in the cache. If its gone till tomorrow its fine. Else I can still propose the workaround with a date param (so accepting that answer). Thx again.

Answer 1

Yes, this is fairly simple.

Just give a random parameter to your URL, like : URL = http://www.yoururl.com -> http://www.yoururl.com/?number=(random number)

this way you will always have a unique url. the parameter will be thrown away by the page when it is loaded because it is not used.

Let me know if this helped

Answer 2

A good way to solve this problem is to calculate the md5() of the file contents, and then append that value to the URL as a parameter. That way the file keeps getting cached as long as the file contents is the same.

Another way is to control the caching behavior of the script with HTTP-headers, such as a ETag or lowering the maximum cache expiry time.

Answer 3

Read up on Apache Directives for cache-control ....

You probably want something like this in your apache.conf file or an .htaccess file

The example will tell the browser to cache the JS file, and not check for a new version until 7 days have passed

<Directory "C:/apache_htdocs">
    #
    # Enable caching for static files
    # A86400  = Access + 01 days
    # A604800 = Access + 07 days

    <FilesMatch "\.(js)$">
        ExpiresActive On
        ExpiresDefault                            A604800
        ExpiresByType application/x-javascript    A604800
        ExpiresByType application/javascript      A604800
        ExpiresByType text/javascript             A604800

        Header set Cache-Control "public, max-age=604800, pre-check=604800"
    </FilesMatch>
</Directory>