浅谈浏览器缓存 清理浏览器缓存

为什么使用浏览器缓存 缓存存在的内容 缓存协商 缓存协商的简单演示 缓存相关的header 缓存相关header之间的关系 用户的不同操作 用户不同操作对应浏览器的不同处理方式 测试环境与线上环境取js方式不同导致的问题

为什么使用本地缓存

对于一些比较少变化的文件,如js、css等,可以在第一次请求之后将这些文件先放在本地,在下次再去请求这些文件的时候就可以不用再去请求,直接使用本地的就可以了,直接消灭请求。这是最好的减少带宽占用、降低服务器压力的方法,同时也可以最大限度的提升页面的显示速度(直接本地取)。

查看缓存:

ie:Internet选项-设置-查看文件



Firefox:缓存采用二进制的方式存储,查看可以在地址栏中输入about:cache



缓存存在的问题

既然存在了本地,那么最大的问题就是一旦服务器的文件更新了,而浏览器还在使用本地的缓存,会造成服务器端的修改不能生效。

缓存协商

缓存的文件是由服务器生成,在本地保存,所以对缓存的使用必须要双方配合才能达到最好的效果,这样就引入了缓存协商。

缓存协商其实就是浏览器在请求某个文件的时候,服务器在返回时会在头部加一些额外的信息,如这个文件在多长时间内可以使用、文件的最后修改时间是什么等等,浏览器在下次再请求这个文件的就会根据之前服务器在头部加入的额外信息来对应的进行一些处理。

缓存协商的简单演示

http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm



注释:左侧的是一个.htm的请求,右侧是一个js的请求



注释:在第二次请求的时候.js的请求头信息中多出了红框中的三个值

缓存相关的header

Cache-control常用值:

public 指示响应数据可以被任何客户端缓存 private 指示响应数据可以被非共享缓存所缓存。这表明响应的数据可以 被发送请求的浏览器缓存,而不能被中介所缓存 no-cache 指示响应数据不能被任何接受响应的客户端所缓存 max-age 数据经过max-age设置的秒数后就会失效,相当于HTTP/1.0中的Expires头。如果在一次响应中同时设置了max-age和 Expires,那么max-age将具有较高的优先级。

Cache-control

打开一个新页面

在原始窗口中单击 Enter 按钮

按 F5 键刷新

单击 Back 或 Forward 按钮

public

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器

浏览器呈现来自缓存的页面
浅谈浏览器缓存 清理浏览器缓存

private

浏览器重新发送请求到服务器

第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器

浏览器呈现来自缓存的页面

no-cache

浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

max-age=xxx

在 xxx 秒后,浏览器重新发送请求到服务器

在 xxx 秒后,浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

在 xxx 秒后,浏览器重新发送请求到服务器

Last-modified:在浏览器第一次请求页面的时候如果返回的header中有这一项的值,则在下次请求的头信息中会加入if-modified-since这个值,服务器端取到这个值后去判断和该文件的最后修改时间是否一样,如果一样,则直接返回304(not modified),通知浏览器可以使用本地缓存。



E-tag:在浏览器第一次请求页面的时候如果返回的header中有这一项的值,则在下次请求的头信息中会加入if-None-match这个值,服务器端取到这个值后去和这个文件生成的E-tag值进行对比,如果一样,则直接返回304(not modified),通知浏览器可以使用本地缓存。Etag默认生成规则是根据文件的inode、文件大小、文件修改时间,可以通过配置选择其中的某几项来生成、



Expires:过期时间,在这个时间之前,不会再去想服务器发任何请求,直接用本地缓存



缓存相关header的关系

Cache-control会覆盖掉Expires的值,即如果同时存在cache-control:max-age=900和expires:******,则以cache-control的值为准

Etag和last-modified的值同时存在的时候,last-modified的值失效,仅判断Etag。

用户的几种不同操作

? 当用户打开一个新的浏览器窗口时的失效操作提高访问速度,提升用户的体验

? 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作

? 当用户单击 Back 或 Forward 按钮时的失效操作

? 当用户按 F5 键刷新页面时的失效操作

? 用户按ctrl+F5

不同的操作对应的不同请求

下面截图的情况为firefox中请求http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm这个网址的结果。

新打开浏览器窗口:未过期的缓存直接使用本地的,不向服务器发送请求



在地址栏单击回车:未过期的缓存直接使用本地的,不向服务器发送请求

(注:在ie中在地址栏单击回车行为与下面的回退一样,全部使用本地缓存,不论过不过期)



回退:不论缓存由没有过期,都使用本地缓存。可以看出来比上面少了两个请求,原因是上图中标红的请求的两个文件的缓存都已过期,但在回退时不管是否已过期,直接使用缓存。(浏览器默认对所有的文件都进行缓存,是否使用另说)。剩下的五个请求是因为这几个请求携带的参数都有一个每次都不一样的,导致本地没有与其对应的缓存(例如参数中有系统本地时间)。



F5:所有的文件都会发送请求,有缓存的进行缓存协商,没有修改的返回304使用本地缓存。



Ctrl+F5:所有文件都会发送请求,并且不进行缓存协商(cache-control:no-cache),每个文件重新返回(200)



此次整理的正文到这里就结束了,下面列出的是可能比较多关注的点:

1. Cache-control的值覆盖其他的设置

2. Etag和last-modified共存的时候以Etag为准

3. 在F5刷新的时候不论缓存过不过期都会和服务器进行缓存协商(带上Etag、last-modified之类的信息)

4. 在ctrl+F5的时候直接在浏览器单方面决定不使用缓存(直接cache-control:no-cache)

5. 在后退的时候除非显式的声明no-cache,否则都会使用缓存(不论是否过期)

  

爱华网本文地址 » http://www.413yy.cn/a/25101011/98213.html

更多阅读

浅谈小学英语学习方法

浅谈小学英语学习方法——简介对英语学习起着举足轻重的作用,对于小学生来说,更是一个不容忽视的问题。在小学英语教学中,教师应有意识地帮助学生形成适合自己的有效的学习策略,从而让学生学得轻松,学得快乐,享受学习英语的乐趣,为将来的英

浅谈李清照创作豪放词的原因 李清照前期的创作风格

浅谈李清照创作豪放词的原因词作为一种文学形式产生于隋唐,经过五代到宋朝时进入鼎盛时期。“婉约派”和“豪放派”是后人论宋词的特定概念。其实,将宋词分为婉约和豪放两派,最早见于明代张蜒《诗余图谱》:“词体大略有二:一体婉约,一体

浅谈小学生读后感的写作指导策略 浅谈朗读教学指导策略

浅谈小学生读后感的写作指导策略摘要:本文旨在通过各方面有效的指导,注重读写结合,感想集中,联系实际,思路创新以及读后沟通和写后交流,指导学生从读到写,从写到说,从说到写,从写到读,形成一个读后感的写作循环,将读书和写作有效结合,逐步提高

黄宗之:浅谈王传利长篇小说《陋巷》

读罢《陋巷》话故乡——浅谈王传利长篇小说《陋巷》(长篇小说《陋巷》,王传利著,九州出版社,2014年)2014年底,趁着圣诞至新年我一家去中加州海滨度假之际,我于旅途之中的闲暇读完了王传利送给我的长篇小说《陋巷》。

浅谈我国工会制度的历史沿革及其现状 广东书院制度沿革

浅谈我国工会制度的历史沿革及其现状——兼议我国工会制度的完善南京审计学院法学院张宇彬摘要:工会,是社会经济矛盾的产物,为了保护自身利益,工人开始成立与雇主对抗的组织,这便是工会;伴随着中国近100年来的政治经济大变动,工会制度也

声明:《浅谈浏览器缓存 清理浏览器缓存》为网友平凡的向日葵分享!如侵犯到您的合法权益请联系我们删除