Cache CSS and JS files

Question

When I refresh my website in less than 2-3 minutes, Firebug shows these nice requests:

1. /core.css          304 Not modified
2. /core.js           304 Not modified
3. /background.jpg    304 Not modified

BUT when I refresh after >3 minutes, I get:

1. /core.css          200 OK
2. /core.js           200 OK
3. /background.jpg    304 Not modified

Why my CSS and JS files are downloaded again and images aren't?

I'm using ASP.NET MVC 3, I DON'T use [OutputCache], and in my /Content folder (where all css, js and img files live in subfolders) I have this Web.config:

<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

which sets HTTP header Cache-Control: max-age=86400 ONLY. So basically CSS, JS and images are treated the same way, but somehow CSS and JS don't get cached for a longer period... why is that?

Answer 1

Hopefully this will help: http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache

The <clientCache> element of the <staticContent> element specifies cache-related HTTP headers that IIS 7 and later sends to Web clients, which control how Web clients and proxy servers will cache the content that IIS 7 and later returns...

Answer 2

This occurs with IIS or with the Visual Studio web server? for some time perceived this behavior while developing (using the VS web server), but when publish it in IIS this not occur anymore.