终于弄清楚浏览器的缓存机制了

问题引出:  很多网站的flash应用系统,做的很好看, 但是也没多少用户群体, 因为服务器的SWF文件很大. 很多用户, 面对超过了20秒都还没有下载完成的东西, 一般不会去看第二次了.  在国内, SWF文件如果超过了2MB, 就基本悲剧了.

 

解决方法: 

 

1. 增加服务器SWF的下载等待时间
2. 合理利用浏览器的缓存

 

 

浏览器缓存，其实这个在浏览器出来的时候就有了，ie6有名的未知缓存让很多前端js开发人员叫苦不迭，常常看见一个ajax请求后面莫名其妙地跟了一个随机数，这个就是解决缓存的问题。

但是浏览器缓存总的来说，是利大于弊，因为网速有限，如果一个页面有10张1m的图片，用户的带宽是2m的，那也得花一分钟才能下载完成，如果他很不幸地点击了一次刷新，如果不用浏览器缓存的话，他将再等一分钟。

而且程序的需要，以前常见的js、image、css之类的静态文件缓存的需求已经远远达不到要求了，能和动态程序交互的就只有cookie了（当 然还是有flash的flashcookie），但是容量太小，google曾今开发出一个gears的东西用来存更多的东西，但是这个东西还是无法推广 起来，毕竟是一家的标准。最后在html5中，一个叫local storage的东西有望成为下一代的浏览器缓存的标准，这将解决目前浏览器缓存的一些瓶颈。

从某种意义上说，浏览器缓存是很环保的，合适的设计可以减少很多不必要的流量，节约不少的电能也更环保。

 

总结1：各种浏览器的缓存方式

1.ie 在缓存目录的一些独立的文件 xp的ie6 的缓存目录 C:\Documents and Settings\kebebrar\Local Settings\Temporary Internet Files

2.firefox 是一种类似innodb的方式存储的key value 的模式，在地址栏中输入 about:cache 可以看见缓存的文件

3.chrome 默认在 C:\Application Data\Google\Chrome\User Data

 

总结2:缓存协商

浏览器和web服务器的交流的只能通过html，而且主要是通过html的头来实现的。

协商的方式，浏览器向webserver发出请求后，web server要告诉浏览器哪些是可以缓存的，浏览器下次请求的时候，先判断这个文件是不是在有效期内，如果在有效期内，直接用，不在的话，请求web server，web server迅速告诉浏览器是否可用，如果过期了就重传一份。

 

总结3：Last-modified 的过程

一般静态文件在服务器上都有一个最后修改时间，web服务器一般通过这个时间来判断这个资源是否被修改过。

整个请求过程在最重要的3个http头

1 2 3

Last-Modified: Fri, 20 Mar 2009 07:53:02 GMT //web服务器告诉浏览器这个的最后修改时间 If-Modified-Since: Fri, 20 Mar 2009 07:53:02 GMT //浏览器下次请求问这个文件在这个时间后是否修改 HTTP/1.1 304 Not Modified  //如果这个文件没有被修改，web服务器回答304 没有被修改

 

总结4：Etag 过程

Etag是web服务器给每个资源编的一个号，这个编号是通过一算法来生成的不会重复的号，和浏览器交互过程如下。

1 2 3

Etag: "111111-b-222222" //web服务器告诉浏览器这个资源的Etag编号 If-None-Math: " 111111-b-222222" //浏览器下次请求的时候问这个Etag还能否用 HTTP/1.1 304 Not Modified //web服务器回答没有变化，可以用

但是大型的网站都不会用Etag，因为大网站的前端机有很多台，前端proxy之后不一定请求到上次访问的那一台，所以这个就导致了Etag这个标签无效，还得重传。

 

总结5：Expires 直接不让浏览器再次请求，直接用已经下载的资源

一般情况下，图片都很少修改，为什么还要问一次浏览器这个可否用呢，这个算是多余的请求了，所以web服务器可以直接告诉浏览器，在某个时间段，你就自己做主把这拿来用就行了（这个和某些部门机关差不多，老大睁一只眼闭一只眼，你们看着办，在进监狱之前想怎么用怎么用）。

但是这个是基于服务器时间的， 如果你的服务器时间不对，比客户的机器慢了一个小时，你设置过期时间<60min，那你就悲剧吧，百思不得其解吧。

操作	last-modified	expires
F5	有效	无效
ctrl+F5强制刷新	无效	无效
点击转到或者在url上回车	无效	有效

last-modified 有效表示浏览器会请求，但是web服务器返回304
expires 有效表示浏览器不请求了，直接用本地文件

 

总结6:Cache-Control

这个主要是上面的Expires过期时间不统一的问题，web服务器和用户的时间误差可能导致缓存永远无效，Cache-Control用浏览器端的时间来判断过期。

浏览器会优先考虑 Cache-Control，如果在Cache-Control时间没有的情况下，才会符合expires

 

评论

1 楼 liuweihug 2014-10-16  

图说浏览器的缓存原理及缓存方式说明（1）
http://www.suchso.com/projecteactual/web-server-browser-cache-1.html