关于浏览器的那些事儿——浏览器的缓存机制

缓存放在哪里?

浏览器一般会在用户的文件系统中创建一个目录,用于存放缓存文件,并给每个缓存文件打上一些必要的标记,比如过期时间等。不同的浏览器采用不同的方式来存储缓存。

浏览器缓存的优点?

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

浏览器的缓存类型?

HTTP缓存可以分为强缓存和协商缓存:

  • 强缓存:强缓存命中不会发送请求到服务器端,直接从本地缓存中获取资源,状态码 200 ( from cache )
  • 协商缓存:协商缓存会发送请求到服务器,服务器通过请求头部字段来验证资源是否命中协商缓存,如果命中,则返回状态码 304 ( not modified ),通知浏览器从缓存中获取资源。

注意: 浏览器缓存一般是基于GET类型的请求,POST的请求一般不启用本地缓存

什么是缓存协商?

对于浏览器缓存,缓存内容存储在浏览器本地,而内容由Web服务器生成,任何一方都不可能独立完成这一系列过程,所以它们之间需要有一种沟通机制,这就是HTTP中的缓存协商。

当浏览器向Web服务器请求一些内容时,Web服务器需要告诉浏览器哪些内容可以被缓存,浏览器知道后就可以在下一次需要请求该内容时询问服务器是否可以使用本地缓存,服务器收到浏览器的询问后会回应浏览器是否允许浏览器使用本地缓存,不允许则将最新内容传回给浏览器。

总结来说,协商缓存主要有两种情况:

  1. 协商缓存生效,返回304
  2. 协商缓存失效,返回200和请求结果结果

什么是强制缓存?

强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程,强制缓存的情况主要有三种,如下:

  1. 不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求(跟第一次发起请求一致)
  2. 存在该缓存结果和缓存标识,但该结果已失效,强制缓存失效,则使用协商缓存
  3. 存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果

浏览器缓存相关标识符

与浏览器缓存的字段有如下几种:

  1. Cache-Control (指定缓存机制,覆盖其它设置)
  2. Pragma (http1.0字段,指定缓存机制, 功能和 Cache-Control:no-cache 一样)
  3. Expires (http1.0字段,指定缓存的过期时间, 到了HTTP/1.1,Expire已经被Cache-Control替代)
  4. Last-Modified (资源最后一次的修改时间)
  5. ETag (唯一标识请求资源的字符串)
  6. If-Modified-Since (缓存校验字段, 值为资源最后一次的修改时间, 即上次收到的Last-Modified值)
  7. If-Unmodified-Since (同上, 处理方式与之相反)
  8. If-Match (缓存校验字段, 值为唯一标识请求资源的字符串, 即上次收到的ETag值)
  9. If-None-Match (同上, 处理方式与之相反)

下面来看一下这些字段:

Expires与Cache-Control

Expires和Cache-Control就是服务端用来约定和客户端的有效时间的。

控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control优先级比Expires高。同时存在时,只有Cache-Control生效。

在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:

  • public:所有内容都将被缓存(客户端和代理服务器都可缓存)

  • private:所有内容只有客户端可以缓存,Cache-Control的默认取值

  • no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定

  • no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存

  • max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效

如何在浏览器中判断强制缓存是否生效?

打开控制台的network,其中状态码为灰色的请求则代表使用了强制缓存,请求对应的Size值则代表该缓存存放的位置,分别为from memory cache 和 from disk cache。

from memory cache代表使用内存中的缓存,from disk cache则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为memory –> disk

Last-Modified / If-Modified-Since和Etag / If-None-Match

控制协商缓存的字段分别有:Last-Modified / If-Modified-Since和Etag / If-None-Match,其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间,

If-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件。

Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成),If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200,

应用场景

1. 频繁变动的资源

对于频繁变动的资源,首先需要使用Cache-Control: no-cache 使浏览器每次都请求服务器,然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量,但是能显著减少响应数据大小。

2. 不常变化的资源

通常在处理这类资源时,给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年),这样浏览器之后请求相同的 URL 会命中强制缓存。

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

推荐阅读更多精彩内容