I'm trying to get the styles.css to not cache as the server is having issues with the css when it caches.
<script>
var numBAH = Math.floor(Math.random()*100);
</script>
<link href="styles.css+ numBAH +" rel="stylesheet" type="text/css" />
I'm trying to get the styles.css to not cache as the server is having issues with the css when it caches.
<script>
var numBAH = Math.floor(Math.random()*100);
</script>
<link href="styles.css+ numBAH +" rel="stylesheet" type="text/css" />
-
Technically,
(+new Date())would be better thanMath.random()as the random number could theoretically repeat. – zzzzBov Commented Oct 4, 2012 at 13:58 - 1 What do you mean, "the server is having issues"? The whole point of caching is so that you DON'T hit the server. – Blazemonger Commented Oct 4, 2012 at 13:59
- 2 The server has issues with the CSS? What does that mean? – Pointy Commented Oct 4, 2012 at 13:59
- 1 "it loads too quickly" ? That's a novel problem. I think you should try to define explicitly a transition because you can't be sure of the network speed. Really I think making the css slower to fetch is a wrong solution. – Denys Séguret Commented Oct 4, 2012 at 14:02
- 1 "after it caches it loads too quickly rendering the page wrong in the clients eyes", sounds like something else might be happening here. What exactly is the problem the client is seeing when it "loads too fast"? – Giscard Biamby Commented Oct 4, 2012 at 14:06
3 Answers
Reset to default 8You can do this in the head of your document :
<script>
document.write('<link href="styles.css?r='+ Math.floor(Math.random()*100) +'" rel="stylesheet" type="text/css" />');
</script>
BUT :
- you have great probabilities of finding two times the same number
- you shouldn't generally avoid caching
Solutions I propose :
1) use (new Date()).getTime() instead of a random number
2) simply change the number when the version changes : styles.css?v=3 (without javascript)
If you have access to a server-side language it would be neater to render the link tag with a query string that is a hash of the entire content of the file. In that way, the cache invalidator ey will change only when the content of the file has actually changed.
After having seen the discussion that has followed, about how you never want to use cache, because it loads too quickly, I want to change my answer. Not to new Date(), but to: fix your page so that loading quickly is a desired result. If you're having specific problems with that, create a question that targets those problems, don't go directly for the lousy workaround.
Cache busting can be work without server-side rendering. I tested recent versions of firefox, chrome and safari in both mobile and desktop, this code worked. (I'm Not sure about IE, though..)
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var numBAH = Math.floor(Math.random()*10000);
document.write('<LI' + 'NK HREF="./path/to/style.css?cacheBusting='+numBAH+'" rel="stylesheet">');
</SCRIPT>
</HEAD>