The OutPutCache is a page/control cache that saved on server to gain processing speed from the render of this page/control.
The browser cache is header commands that you set on page and give the instruction to the clients browser to keep the page on clients computer cache for some time and not read it back from the server.
The static cache is when you set cache for content that is common for all users, and the Dynamic cache if when you set cache that is different for the same page and depend from the user or for other parameters. Also you can say that static is the one for the content that is not change (eg images, html pages etc) and dynamic is the cache for the content that change like aspx pages.
IIS can set a cache for the images and all this type of content that is not change and you say to the browser to keep for 'long' time.
You need to use a combination of all cache to get the best result and is not what to use and what not. Much cache for static content that is not change a lot, less cache for dynamic content.
Does browser cache all js or css files?
Browser do only what you say him to do. So you need to set on page headers to the browser for how long you like browser keep this files on client cache. If you not set anything then the IIS set for static content like Js and Css and images, the file creation date, and this can be used by the browser to ask the server back if he need to read it again or not.
Static and Dynamic
One more informations about static and dynamic cache is that the browser on dynamic cache ask the server if he need update and if the answer is yes then read again the page. This way the browser always call the server, but not always get back the content.
The other way is the static, in this cache the browser cache the content and never ask the server for re read it. Eg for the images that are static content you set a big cache and the browser never ask again the server but use the images from the client cache.
You can set this static content cache on web.config
<staticContent>
<clientCache cacheControlMaxAge ="8.00:00:00" cacheControlMode="UseMaxAge" />
</staticContent>
The dynamic cache for the browser is something that you need to make programmatically. You set a parametre on header, and when the browser ask for a content you read this parametre and you deside what to replay, with the new content or with a command to read from the cache.
Some examples: Create ETag filter in ASP.NET MVC
http://jagbarcelo.blogspot.com/2009/03/conditional-get-and-etag-implementation.html
Generating etags for images in asp.net?
if I use both IIS cache and OutputCache?
Actually this is two diferent thinks that acts by them self. Let see some steps for what happends.
Client A Browser : Please give me page default.aspx
Server Responce : Ok wait a bit. Let see did I have it on OutpuCache ? No, I make it now and save it to OutPutCache. Now I send it to you. (waiting time 600 ms + 70ms Network Lag) + 2000ms to download the mage
Client B Browser : Please give me page default.aspx
Server Responce : Ok wait a bit. Let see did I have it on OutpuCache ? Yes, I read it from cache and send it. `(waiting time 100 ms + 70ms Network Lag) + 2000ms to download the mage
Client A Browser : Please give me page default.aspx, my last cache say that the file have date: 12/Mar/2012.
Server Responce : hmm You do not need to re-read it because is not modified, use your local cache. (waiting time 80 ms + 70ms Network Lag) + 0ms to download the page
When the page found on OutputCache the effect for the user is that is not waiting for the page to start showing somthing so much.
When the page found not modified, the effect is that the user see the page almost right way because is not wait for the page to download.
When the content is static (like image) and found on cache, then the browser show it right way with out asking the server, so this is the faster possible way that the user see something that is on local cache.
