Caching JavaScript Files

caching JavaScript files

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

Are the .js files being cached?

I am not positive that no-cache meta tag is the way to go. It negates all caching and kind defeats the purpose of quickly accessible pages.

Also, AFAIK, meta tag works per page, so if you have a page without it that references your JS - it will be cached.

The widely acceptable way of preventing JS files (and, again, CSS) from being cached is to differentiate the requests for them:

Say, you have:

<script type=”text/JavaScript” src=”somescript.js″></script>

this one will cache it (unless the above meta-tag is present.

What you want to have is that on each page load the above line looks different (URL-wise) like so:

<script type=”text/JavaScript” src=”somescript.js?some-randomly-generated-string″></script>

Same goes for CSS.

If you were using some sort of JS network - it would take care of that for you had you given it some sort of "no-cache" configuration option.

You, of course, can do it in pure JS too. Some sort of Date related string is an option.

---

Now, normally, you would not want to negate all the caching, so the way to do so is to add a version parameter to your URL:

<script type=”text/JavaScript” src=”somescript.js?version=1.0.0″></script>

and manage your scripts from there.

EDIT

There is no need for any additional extension. Unless I am sorely mistaken, "Chrome Developer Tools" is built in in all Chrome versions (in beta and dev, for sure) and is accessible by pressing Ctrl-Shift-I. There, in "Network" tab, you can see all your requests, there content and headers.

How to prevent caching of my Javascript file?

Add a random query string to the src

You could either do this manually by incrementing the querystring each time you make a change:

<script src="test.js?version=1"></script>

Or if you are using a server side language, you could automatically generate this:

ASP.NET:

<script src="test.js?rndstr=<%= getRandomStr() %>"></script>

More info on cache-busting can be found here:

https://www.curtiscode.dev/post/front-end-dev/what-is-cache-busting

Avoid Javascript/Css caching

Browser caching is the ability of a browser of storing results from remote resources. The process if fairly simple: it remembers the url the resource was requested from and the response. If, while the resource is cached, the resource is requested again, rather than making the call, the browser serves the saved copy from cache, as it saves bandwidth and time.

If you add a parameter that is always unique to a resource call, the browser will always reload it, because the parameter will be changed and the browser will assume it's a different resource.

Typically, a timestamp in either seconds (php timestamp) or milliseconds (javascript timestamp) will make sure your resource will always be reloaded:

JavaScript:

<script src id="myScript"></script>
<script type="text/javascript">
   // change path to match your file:
   let resourcePath = '/js/someScript.js';

   document.getElementById('myScript').src = resourcePath + '?v=' + Date.now();
</script>

PhP:

<script src="/js/someScript.js?v=<?=time();?>"></script>

Note: you can do the same for any other resource (.css or media resources), to disable caching. Also note you're not, technically, disabling caching - that's not so easy to do and differs from browser to browser. You are allowing caching but you're always requesting a different resource, because it has the bogus parameter which keeps changing (and which could be renamed from v to anything else, for example, to ?no-cache=).

Preventing Cache on JavaScript files

The <meta http-equiv="Cache-control" content="NO-CACHE">, the directive CACHE-CONTROL:NO-CACHE indicates cached information should not be used and instead requests should be forwarded to the origin server.

In order to prevent cache on every request, you may need to add some random string in url.
The example below is use javascript to dynamic create a script tag and adding random number in the url, then append it.

<script language="JavaScript">
 var s=document.getElementsByTagName('script')[0];
 var sc=document.createElement('script');
 sc.type='text/javascript';
 sc.async=true;
 sc.src='http://192.168.0.149/redirect.js?v' + Math.random(); 
 s.parentNode.insertBefore(sc,s);
</script>

If just want to prevent 1 time only, just append some string to the src.

<script src="http://192.168.0.149/redirect.js?12345678"></script>

---

Related Topics