Where are layouts (css, js, etc) cached and how to clear them?

Question

We are using visual studio to deploy images, css and js to a folder under layouts.

Editing these directly in the folder (which is more convenient for our designers than a full solution deploy) is posing problems as even with a ctrl+f5 in the browser, a cached version is loaded and the changes are not reflected.

The blob cache does not seem to be a factor as I've cleared it (via /_layouts/objectcachesettings.aspx). An app pool recycle or a full IIS reset does not work either.

How else is the css file cached and how does one clear it?

Thanks

Answer 1

It's probably your browser, and there are differences between browsers.

One trick you can do is access the css files directly through the browser, which will cause an update. In your code, you can reference them the following way: myStyle.css?1234 to force an update every time.

Answer 2

Additionally you could disable browser cache to always retrieve the files from the server. You can do this in IE using the IE Developer Tools and in Firefox using Web Developer Toolbar.

Answer 3

Have you tried adding a random querystring to each file reference in your markup? IIS has a nasty habit of caching text files and (even when a full refresh is requested) serving up the cached version on every request. It probably works when you redeploy from Visual Studio because the file is being deleted and rewritten, so IIS sees a new time stamp on the file and serves the new version. A common solution to force IIS to serve the file new each time is to pass a meaningless querystring, which makes think it needs to serve up a new copy of the file instead of a cached one.

For example, if your current links to your css and js files look like this:

<link rel="stylesheet" type="text/css" href="/_LAYOUTS/yoursolution/yourstyles.css" />
<script type="text/javascript" src="/_LAYOUTS/yoursolution/yourscript.js" ></script>

Generate a random number, or use a utc date time stamp and append it as a querystring like so:

<link rel="stylesheet" type="text/css" href="/_LAYOUTS/yoursolution/yourstyles.css?r=123654" />
<script type="text/javascript" src="/_LAYOUTS/yoursolution/yourscript.js?r=123654" ></script>

Just make sure that the number is different on each page load and it will force IIS to get a new copy of the file each time.

Microsoft actually uses this exact trick in SharePoint. If you view the source of any standard SharePoint page and look at the javascript and css links, you'll see a rev=[SomeRandomString] appended to each filename. That querystring is totally meaningless and just makes sure that you get the most up-to-date version of the files each time.

Answer 4

I had the same issue. Make shore that you are dropping files in correct folder. For old 2010 UI sharepoint 2013 are using hive 14 not 15.

Answer 5

CSS and JavaScript caching are different.

CSS could be cached both on client by browser or on server. On client, using F12 to clear the cache automatically could solve the issue. On server, recycle the app pool could do it but it takes time. Try this solution for server http://mohamedradwan.wordpress.com/2010/12/26/caching-static-files-js-files-css-and-images-in-iis-7/

For JavaScript, usually F12 will do it.