Javascript asynchronous loading caching issue with onload event

I am currently trying to download several js files asynchronously, so that they cannot block the rest of the website. I basically followed the descriptions found here:

Asynchronous Javascript

From the point of view of non-blocking loading the javascript file, this works fine, but I had a problem with the fact that the javascript file is cached and remains cached even if I change the content (also doing shift-reload helps nothing).

My current script loading code is as follows:

 (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 myjs.js, the changes become recognizable, but if I load it through the onload event, it always remains cached, and the changes are never recognized.

- , ( Opera, FF IE )?

: "" Operas Dragonfly, JS , , , .

EDIT2: , . , . ( ). .

+3
3
+3

md5() , URL . , , .

script HTTP-, ETag .

+1

Apache- ....

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

The example will tell the browser to cache the JS file, and not check the new version until after 7 days

<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>
0
source

Source: https://habr.com/ru/post/1763953/


All Articles