浏览器缓存那些事

什么是浏览器缓存

浏览器缓存(Browser Caching) 是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。

浏览器缓存是把双刃剑

优点

  • 减少了冗余的数据传输,节省了网费
  • 减少了服务器的负担,大大提升了网站的性能
  • 加快了客户端加载网页的速度

缺点

既然存在了本地,那就意味着远程服务器的修改可能不起作用.往往在本地访问调试远程服务器的时候,会发现修改并没有起效。

缓存的分类

缓存协商

图解

协商缓存初次请求

协商缓存初次请求

协商缓存再次请求

协商缓存再次请求

  1. 浏览器会先获取该资源缓存的 header 信息,根据其中的 expirescahe-control 判断是否 命中强缓存,若命中则直接从缓存中获取资源,包括缓存的header信息,本次请求不会与服务器进行通信;
  2. 如果没有 命中强缓存,浏览器会发送请求到服务器,该请求会携带第一次请求返回的有关缓存的header 字段信息 (Last-Modified/IF-Modified-Since、Etag/IF-None-Match) ,由服务器根据请求中的相关header信息来对比结果是否命中 协商缓存 ,若命中,则服务器返回新的响应header信息更新缓存中的对应header信息,但是并不返回资源内容,它会告知浏览器可以直接从缓存获取;否则返回最新的资源内容

协商缓存 就是由服务器来确定缓存资源是否可用,所以客户端与服务器端要通过某种标识 来进行通信,从而让服务器判断请求资源是否可以缓存访问,这主要涉及到下面 两组header字段 ,这两组搭档都是成对出现的,即第一次请求的响应头带上某个字段 (Last-Modified或者Etag) ,则后续请求则会带上对应的请求字段 (If-Modified-Since或者If-None-Match)若响应头没有Last-Modified或者Etag字段,则请求头也不会有对应的字段。

Last-Modify/If-Modify-Since

浏览器 第一次请求 一个资源的时候,服务器返回的header中会加上 Last-Modify ,Last-modify是一个时间标识该资源的最后修改时间,例如 Last-Modify: Thu,31 Dec 2037 23:59:59 GMT
当浏览器 再次请求该资源 时,request的请求头中会包含 If-Modify-Since ,该值为 缓存之前返回的Last-Modify 。服务器收到If-Modify-Since后,根据资源的最后修改时间判断是否命中缓存。
如果 命中缓存,则返回304 ,并且不会返回资源内容,并且不会返回Last-Modify。

ETag/If-None-Match

Last-Modify/If-Modify-Since 不同的是,Etag/If-None-Match 返回的是一个 校验码ETag可以保证每一个资源是唯一的,资源变化都会导致ETag变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。
Last-Modified 不一样的是,当服务器返回 304 Not Modified 的响应时,由于ETag重新生成过,response header 中还会把这个ETag返回,即使这个ETag跟之前的没有变化。

Etag存在的意义

  • 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;
  • 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since 能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
  • 某些服务器不能精确的得到文件的最后修改时间。

强缓存

强缓存 是利用http的返回头中的 Expires 或者 Cache-Control 两个字段来控制的,用来表示资源的缓存时间。

Expires

该字段是http1.0时的规范,它的值为一个绝对时间的GMT格式的时间字符串,比如Expires:Mon,18 Oct 2066 23:59:59GMT。这个时间代表着这个资源的失效时间,在此时间之前,即 命中缓存 。这种方式有一个明显的缺点,由于失效时间是一个绝对时间,所以当服务器与客户端时间偏差较大时,就会导致缓存混乱。

Cache-Control

Cache-Control是http1.1时出现的header信息,主要是利用该字段的 max-age 值来进行判断,它是一个相对时间,例如 Cache-Control:max-age=3600 ,代表着资源的有效期是3600秒。cache-control除了该字段外,还有下面几个比较常用的设置值:

no-cache:不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。

no-store:直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。

public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。

private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。

Cache-Control与Expires可以在服务端配置同时启用,同时启用的时候 Cache-Control优先级比Expires高

强缓存和协商缓存区别

获取资源形式 状态码 发送请求到服务器
强缓存 200(from cache) 否,直接从缓存取
协商缓存 304(Not Modified) 否通过服务器来告知缓存是否可用

用户行为对缓存的影响

用户操作 Expires/Cache-Control Last-Modified/Etag
地址栏回车 有效 有效
页面链接跳转 有效 有效
新开窗口 有效 有效
前进、后退 有效 有效
F5/按钮刷新 无效(BR重置max-age=0) 有效
Ctrl+F5刷新 无效(重置CC=no-cache) 无效(请求头丢弃该选项 )

解决实际中的缓存问题

一般是在 url 地址后面加上当前的版本信息.例如 xx/xxx.php?ver=1.1,这样就会根据版本的不同而去更新缓存了.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容