`
yanzilee9292
  • 浏览: 537392 次
  • 性别: 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

相关推荐

    浏览器缓存机制 mindMaster脑图与visio流程图

    浏览器缓存机制是互联网浏览体验中的重要组成部分,它极大地提高了网页加载速度,减少了网络带宽的消耗。在本文中,我们将深入探讨浏览器缓存的工作原理,主要包括两种主要类型的缓存:强缓存(Strong Cache)和协商...

    Http页面缓存机制

    浏览器缓存机制可以分为两类:服务器端缓存和浏览器端缓存。服务器端缓存是指服务器端存储的缓存,而浏览器端缓存是指浏览器端存储的缓存。本文主要介绍浏览器端缓存机制。 浏览器端缓存机制的重要性在于它可以减少...

    HTTP+JS+浏览器缓存技术

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

    浏览器缓存机制面试常考.zip

    浏览器缓存【2024年浏览器缓存简介】 内容概要: 这篇博客为网络技术初学者提供了一个全面的理解浏览器缓存的知识。通过通俗易懂的语言,本博客介绍了浏览器缓存的工作原理,HTTP缓存控制字段,缓存策略的应用,以及...

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

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

    存储篇 1:浏览器缓存机制介绍与缓存策略剖析(1).md

    ### 浏览器缓存机制介绍与缓存策略剖析 浏览器缓存是前端性能优化的一个重要组成部分,其可以减少网络IO消耗,提高访问速度。浏览器缓存的机制可以分为四个方面:MemoryCache、ServiceWorkerCache、HTTPCache和...

    浏览器缓存查看及恢复工具

    - 不同浏览器的缓存管理机制略有差异,工具可能需要针对具体浏览器进行设置或适配。 - 隐私敏感的用户应谨慎使用,因为缓存数据可能包含个人信息。 - 恢复的文件可能不是最新的版本,因为浏览器可能会根据缓存策略...

    Chrome浏览器缓存查看导出工具(支持最新版)

    首先,了解Chrome浏览器的缓存机制至关重要。浏览器缓存是Web浏览器为了提高网页加载速度而存储的部分网页内容,包括HTML文件、图片、CSS样式表和JavaScript文件等。当用户再次访问已经浏览过的网页时,浏览器会尝试...

    浏览器的缓存机制.md

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

    浏览器缓存机制

    详细描述浏览器缓存机制,对于学习http协议的初学者一定有用

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

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

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

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

    浏览器HTTP缓存运行机制流程图.zip

    浏览器HTTP缓存是提高网页加载速度和降低服务器压力的关键机制,它主要分为两种类型:强缓存(Strong Cache)和协商缓存(Conditional Cache)。理解这两种缓存的工作原理对于优化Web应用性能至关重要。 1. 强缓存...

    消除浏览器的301重定向缓存

    但是,这种缓存机制也会带来一些问题,例如用户无法回到原始的URL,或者浏览器无法正确地显示用户所需的内容。 在本文中,我们将详细讲述如何消除浏览器的301重定向缓存,包括缓存的机理、问题的出现原因、解决方法...

    web项目页面缓存清除,不用每次刷新浏览器

    1. **HTTP缓存机制**:HTTP协议中的Cache-Control、ETag、Last-Modified等头部信息用于控制浏览器如何缓存和验证资源。例如,设置Cache-Control为`no-cache`或`no-store`可以防止浏览器缓存页面,`must-revalidate`...

    UC浏览器缓存加密视频Y2hlbmppbmdjb25n文件破解合并exe工具

    1、【合并视频.exe】可将UC浏览器缓存或下载的Y2hlbmppbmdjb25n加密或非加密视频文件合并成mp4视频的工具。 2、使用示例:https://img-blog.csdnimg.cn/0a29f18018c246ebbe70efb82f72c288.png 该示例图可以复制链接...

    UC浏览器缓存视频文件合并工具

    1、若是UC浏览器的视频文件:Y2hlbmppbmdjb25n0 Y2hlbmppbmdjb25n1 Y2hlbmppbmdjb25n2......用此工具类(合并无加密)。 2、若是0.ts、1.ts、2.ts类型视频合并到此:...

    ..........

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

    清除浏览器缓存

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

Global site tag (gtag.js) - Google Analytics