问题引出: 很多网站的flash应用系统,做的很好看, 但是也没多少用户群体, 因为服务器的SWF文件很大. 很多用户, 面对超过了20秒都还没有下载完成的东西, 一般不会去看第二次了. 在国内, SWF文件如果超过了2MB, 就基本悲剧了.
解决方法:
- 增加服务器SWF的下载等待时间
- 合理利用浏览器的缓存
浏览器缓存,其实这个在浏览器出来的时候就有了,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
分享到:
相关推荐
浏览器缓存机制介绍与缓存策略剖析.pptx
浏览器缓存机制、Expires策略(http1.0)和Cache-control策略(http1.1)、Last-Modified/If-Modified-Since、ETag/If-None-Match
描述了web浏览器,关于HTTP缓存机制的流程
浏览器缓存【2024年浏览器缓存简介】 内容概要: 这篇博客为网络技术初学者提供了一个全面的理解浏览器缓存的知识。通过通俗易懂的语言,本博客介绍了浏览器缓存的工作原理,HTTP缓存控制字段,缓存策略的应用,以及...
浏览器缓存【2024年浏览器缓存/HTTP缓存机制(面试常考)简介】 内容概要: 这篇博客为网络技术初学者提供了一个全面的理解浏览器缓存和HTTP缓存机制的指南。通过通俗易懂的语言,本博客介绍了浏览器缓存的工作原理...
js浏览器缓存.docjs浏览器缓存.docjs浏览器缓存.docjs浏览器缓存.doc
浏览器缓存例子浏览器缓存例子浏览器缓存例子浏览器缓存例子浏览器缓存例子
Loadrunner负载测试 浏览器缓存设置
1、浏览器缓存流程图; 2、浏览器缓存脑图文件
jsp去除浏览器缓存
这一章节中我们了解了浏览器的缓存机制,并且列举了几个场景来实践我们学习到的理论。
总结了浏览器缓存的原理,如何管理浏览器缓存
浏览器缓存目录设置,配合沙盘使用,不但会提升上网速度,而且还能减少磁盘碎片
浏览器HTTP缓存运行机制的流程图 强缓存和协商缓存
三星T231如何清除浏览器缓存-T231清除浏览器缓存教程.docx
ChromeCacheView浏览器缓存读取工具 v1.56 汉化
浏览器缓存查看及恢复小工具。这是国外的软件
浏览器缓存
这个软件可以将你在用浏览器观看视频时所缓存的视频文件在缓存文件夹里面提取出来,对于一些不会下载视频或者说不想安装各种客户端、不想注册各种网站的人来说,此程序绝对是一把利器! ps:压缩包里的主程序可以...