14

I recently made a website and I made a change to a .js file, but when I delete the .js file from the FTP server and upload the new one, the new file doesn't show up on the website. I checked the source code behind the .js file on the website and it's not right, it's showing the source for the old file, not the new one even though the old one is gone. Is that because my browser cached the .js file?

Note: I have this source

<meta http-equiv="cache-control" content="no-cache" />

on my page to stop the browser from caching my page, and I know that works on the HTML, but with that source there, do the resource files still get cached?

I don't have that line of code on my other pages, just my home page, but the .js file is still referenced on the other pages so perhaps that is how it is getting cached?

Furthermore, is there a way to check your browsers cache? I use chrome.

Edit: I just cleared my browsers cache and reloaded the website and the file worked as it should now, so that means the file did get cached. So now my question becomes how to I prevent a resource file from being cached?

Steve
  • 2,950
  • 3
  • 21
  • 32
Mark Kramer
  • 3,134
  • 7
  • 34
  • 52
  • Use the way described there http://stackoverflow.com/questions/206783/when-does-browser-automatically-clear-javascript-cache – BrownFurSeal Sep 24 '11 at 09:32
  • If you'll continue doing web development, I'd recommend using fiddler web debugger. This will allow you to determine what the browser is doing. Doing a may do the trick for forcing a reload. – TJR Sep 24 '11 at 09:42

3 Answers3

18

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.

ZenMaster
  • 12,363
  • 5
  • 36
  • 59
  • How does the version addition work? So I just put "?version=1.0.0" after the url for my .js file and that's it? Does that make it re-download the file everytime someone visits the site? or does that make the browser cache that version and then I have to change it to like ?version=1.0.1 to make the browser recache the file if I change it? – Mark Kramer Sep 24 '11 at 09:47
  • 2
    The latter. You change it to, say, 1.0.1, which then force the re-downloading of JS and then it will be cached it anew till the next URL change. – ZenMaster Sep 24 '11 at 10:10
  • If the .html file that has these – mochsner Nov 15 '21 at 04:50
  • @mochsner I think you should control your HTML caching on the CDN side, and not via a tag. Your JS files caching should be controlled by the checksum of the content, attached as a suffix.... and that's just the beginning, depending on your bundling process. Side note... it's been 10 years! – ZenMaster Nov 16 '21 at 07:24
2

Yes. The resources are still cached. In my opinion a good practice to avoid this is to version your resources files in a url?parameter=value way.

For example you should set the ulr to your js or css file like this: < ... src="script.js?v=1" .../> < ... href="style.css?v=1 .. /> and when any changes occured just change v=1 to v=2 ...

that will not affect your code but will make your browser/proxy etc to redownload the resource

Cristi
  • 190
  • 2
  • 10
0

Use an incognito instance of chrome (ctrl+shift+n) to check the source, this mode won't use any cached files. With this you can check if your file is being cached on the client side.

If it's on the client side make sure your server is not sending cache-control headers along with the JS file.

If it's on the server then there's a ton of possibilities, maybe you have a reverse proxy, a physical load-balancer or some other type of caching mechanism.

Edit (question changed):

Use this chrome extension to check the headers being sent along with your .js files. There's probably a cache-control header set that instructs chrome to cache the resource.

If you're on apache you can override this behaviour using an .htaccess file.

thwd
  • 23,956
  • 8
  • 74
  • 108