`
yanzilee9292
  • 浏览: 538400 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

 
阅读更多

问题引出:  很多网站的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

相关推荐

    浏览器缓存机制

    浏览器缓存机制、Expires策略(http1.0)和Cache-control策略(http1.1)、Last-Modified/If-Modified-Since、ETag/If-None-Match

    HTTP+JS+浏览器缓存技术

    浏览器缓存机制可以分为两大类:Expires 策略和 Cache-Control 策略。 一、Expires 策略 Expires 是 Web 服务器响应消息头字段,在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而...

    2024年浏览器缓存HTTP缓存机制(面试常考).zip

    浏览器缓存【2024年浏览器缓存/HTTP缓存机制(面试常考)简介】 内容概要: 这篇博客为网络技术初学者提供了一个全面的理解浏览器缓存和HTTP缓存机制的指南。通过通俗易懂的语言,本博客介绍了浏览器缓存的工作原理...

    浏览器缓存目录设置

    ### 浏览器缓存目录设置 在日常的网络浏览过程中,浏览器缓存的作用非常重要,它不仅能够提高网页加载速度,还能有效减少硬盘碎片的产生,进而提升整体系统的运行效率。本文将详细介绍如何针对不同浏览器(如Fire...

    jsp去除浏览器缓存

    但在某些情况下,我们可能需要禁用缓存机制,例如: - 当页面内容频繁更新时。 - 当我们需要确保用户始终看到最新版本的页面时。 #### 三、JSP中禁用浏览器缓存的方法 在JSP页面中可以通过设置HTTP响应头来实现...

    浏览器的缓存机制.md

    这一章节中我们了解了浏览器的缓存机制,并且列举了几个场景来实践我们学习到的理论。

    浏览器缓存读取工具

    总之,`ChromeCacheView`是一个强大的辅助工具,它让普通用户和专业人士都能深入理解Chrome浏览器的缓存机制,对于优化网页加载、解决网络问题以及保护用户隐私等方面都具有实际价值。通过熟练掌握这款工具,我们...

    Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R)

    Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R) Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R) Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R)

    彻底理解浏览器的缓存机制.docx

    ### 彻底理解浏览器的缓存机制 #### 一、引言 随着互联网技术的不断发展,用户对于网页加载速度的要求越来越高。为了提升用户体验并减轻服务器压力,浏览器通过一系列的缓存策略来加速页面加载速度。浏览器缓存...

    三星T231如何清除浏览器缓存-T231清除浏览器缓存教程.docx

    ### 三星T231清除浏览器缓存教程 #### 一、引言 随着移动互联网技术的飞速发展,智能手机已成为人们日常生活中不可或缺的一部分。在众多智能手机品牌中,三星凭借其出色的性能和丰富的功能深受用户喜爱。对于三星T...

    ..........

    【标题】: "深入理解Chrome浏览器缓存机制与文件结构" 【描述】: "本资料主要探讨了Chrome浏览器的缓存机制,包括HTTP缓存、磁盘缓存以及如何通过文件系统来查看和分析这些缓存。同时,还涵盖了Chrome浏览器的特定...

    清除浏览器缓存

    在现代互联网应用中,浏览器缓存机制被广泛采用以提升用户体验和减少网络流量消耗。然而,在某些情况下(如开发测试阶段或网站更新后),我们需要清除浏览器缓存来确保用户能够看到最新的网页内容。本文将详细介绍...

    chrome浏览器怎么找缓存视频文件?.docx

    Chrome 浏览器缓存视频文件的查找方法 在使用 Chrome 浏览器观看视频时,许多用户希望保存视频文件,但网站没有提供下载...同时,了解浏览器的缓存机制和缓存目录的结构,可以帮助我们更好地理解浏览器的工作原理。

    提取浏览器缓存中的视频文件

    如果视频被储存在浏览器的缓存文件夹中,这个软件可以帮助你从缓存文件夹中找到该视频文件并保存到其他位置。 它会自动扫描IE、基于Mozilla的网页浏览器(包括FireFox)的整个缓存文件夹,并找出当前储存在里面的所有...

    IndexedDB, 支持浏览器缓存

    IndexedDB,支持浏览器缓存

    VideoCacheView 浏览器缓存文件抽取

    Firefox有自己的缓存机制,VideoCacheView可以识别并提取这些缓存中的视频和音频。 3. **Opera**:一款快速且功能丰富的浏览器,以其内置的广告拦截和免费的虚拟私人网络服务闻名。VideoCacheView同样兼容Opera的...

    浏览器缓存问题5个.docx

    此外,ETag和Last-Modified等校验机制的失效也可能导致浏览器误判缓存内容的有效性。 **解决方案**: 1. **调整HTTP缓存策略**:通过设置`Cache-Control`头部来指示浏览器何时应重新验证或下载资源。例如,设置`...

    chrome浏览器缓存提取软件

    总的来说,`Chromecacheview`是一个强大的工具,能够帮助用户深入探索Chrome浏览器的缓存机制,但它也可能存在一些问题,如汉化版本的不稳定。用户在使用时应根据自身需求选择合适的版本,并结合帮助文档和说明文件...

Global site tag (gtag.js) - Google Analytics