HTTP 缓存

HTTP报文:

报文信息主要分为两部分
1.包含属性的首部(header)--------------------------附加信息(cookie,缓存信息等)与缓存相关的规则信息,均包含在header中
2.包含数据的主体部分(body)-----------------------HTTP请求真正想要传输的部分

缓存位置分类:

缓存的位置.png

Service Worker
Memory Cache
Disk Cache
Push Cache

  • 实际上,HTTP 协议头的那些字段,都属于 disk cache 的范畴,是几个缓存位置的其中之一。
  • 我们可以在 Chrome 的开发者工具中·Network -> Size 一列看到一个请求最终的处理方式:如果是大小 (多少 K, 多少 M 等) 就表示是网络请求,否则会列出 from memory cache, from disk cache 和 from ServiceWorker。

1、 Service Worker:

  • Service Worker 是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。使用 Service Worker的话,传输协议必须为 HTTPS

  • Service Worker 能够操作的缓存是有别于浏览器内部的 memory cache 或者 disk cache 的。
    我们可以从 Chrome 的 F12 中,Application -> Cache Storage 找到这个单独的“小金库”。
    如果 Service Worker 没能命中缓存,一般情况会使用 fetch() 方法继续获取资源。这时候,浏览器就去 memory cache 或者 disk cache 进行下一次找缓存的工作了。注意:经过 Service Worker 的 fetch() 方法获取的资源,即便它并没有命中 Service Worker 缓存,甚至实际走了网络请求,也会标注为 from ServiceWorker

2、Memory Cache:

Memory Cache 也就是内存中的缓存,主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。 读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效,可是缓存持续性很短,会随着进程的释放而释放。 一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。内存比硬盘小很多,所以不能全部都放进来

3、Disk Cache :

disk cache 也叫 HTTP cache,顾名思义是存储在硬盘上的缓存,因此它是持久存储的,是实际存在于文件系统中的。而且它允许相同的资源在跨会话,甚至跨站点的情况下使用,例如两个站点都使用了同一张图片

Disk Cache 也就是存储在硬盘中的缓存,读取速度慢点,但是什么都能存储到磁盘中,比之 Memory Cache 胜在容量和存储时效性上。
它会根据 HTTP Herder 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。并且即使在跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据

4.Push Cache:
Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。

  • 网络请求:
    1、根据 Service Worker 中的 handler 决定是否存入 Cache Storage (额外的缓存位置)
    2、根据 HTTP 头部的相关字段(Cache-control, Pragma 等)决定是否存入 disk cache
    3、memory cache 保存一份资源 的引用,以备下次使用

http 缓存机制:

Web缓存器(Web cache)也叫代理服务器(proxy server),它能够代表初始web服务器来满足http请求的网络实体

缓存策略.png

强制缓存:

Cache-Control && Expires

Expires用时刻来标识失效时间,不免收到时间同步的影响,而Cache-Control使用时间间隔很好的解决了这个问题.
Cache-Control 是 HTTP1.1 才有的,不适用于 HTTP1.0,而 Expires 既适用于 HTTP1.0,也适用于 HTTP1.1。
当客户端两种头都能解析的时候,会优先使用 Cache-Control

  • Cache-Control:
    • private 客户端可以缓存
    • public 客户端和代理服务器都可以缓存
    • max-age=60 缓存内容将在60s后失效
    • no-cache 需要使用对比缓存验证数据,强制向源服务器再次验证(没有强制缓存)
    • no-store 所有内容都不会缓存,强制缓存和对比缓存都不会触发(不缓存)

cache-control 的
no-cache :强制每次请求直接发送给源服务器,而不经过本地缓存版本的校验。
max-age<=0 时 向server 发送http 请求确认 ,该资源是否有修改,在重新获取资源之前,先检验ETag/Last-Modified
no-store: 那浏览器不会存储这次相应的数据,当下次请求时,浏览器会在请求一次,就是说不会对比Etag,不论什么情况都不会缓存
不管是max-age=0还是no-cache,都会返回304(资源无修改的情况下),no-store才是真正的不进行缓存。

请求中cache-control 中的它可选的值:

20180921155944100.png

在响应中使用Cache-Control 时,它可选的值有:


2018092116013247.png

对比缓存:

  • 1、 Last-Modified & If-Modified-Since

服务端再返回资源的时候,会将该资源修改的时间 Last-Modified 返回给客户端,然后客户端下次再请求的时候,通过If-Modified-Since或者If-Unmodified-Since带上Last-Modified,服务端检查该时间是否与服务器的最后修改时间一致:
如果一致,则返回304状态码,不返回资源;
如果不一致则返回200和修改后的资源,并带上新的时间

  • 2、 ETag & If-None-Match

Etag : 服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)

If-None-Match:
再次请求服务器时,通过此字段通知服务器客户段缓存数据的唯一标识。
服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对,
不同,说明资源又被改动过,则响应整片资源内容,返回状态码200;
相同,说明资源无新修改,则响应HTTP 304,告知浏览器继续使用所保存的cache

如果 文件的最后修改时间变了,但内容没变。对于这样的情况,我们可以使用etag来处理。
服务器通过某个算法对资源进行计算,取得一串值(类似于文件的md5值),之后将该值通过etag返回给客户端,客户端下次请求时通过If-None-Match或If-Match带上该值,服务器对该值进行对比校验:如果一致则不要返回资源

请求报文中有条件请求头字段。if-Modified-Since 的值是第一次报文中 last-modified 的值; if-None-Match 的值是第一次报文中 etag 的值。

既生Last-Modified 何生Etag?

HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:

1、Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间
2、如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存
3、Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304

20180306185346314583481.png

1、当第一次请求某一个文件的时候,就会传递回来一个Last-Modified 字段,其内容是这个文件的修改时间。
2、当这个文件缓存过期,浏览器又向服务器请求这个文件的时候,会自动带一个请求头字段If-Modified-Since,其值是上一次传递过来的Last-Modified的值,
3、拿这个值去和服务器中现在这个文件的最后修改时间做对比,如果相等,那么就不会重新拉取这个文件了,返回304让浏览器读过期缓存。如果不相等就重新拉取。

首部字段.png

用户行为对缓存影响:

所谓浏览器的行为,指的就是用户在浏览器如何操作时,会触发怎样的缓存策略。主要有 3 种:

  • 打开网页,地址栏输入地址: 查找 disk cache 中是否有匹配。如有则使用;如没有则发送网络请求。

  • 普通刷新 (F5):因为 TAB 并没有关闭,因此 memory cache 是可用的,会被优先使用(如果匹配的话)。其次才是 disk cache。

  • 强制刷新 (Ctrl + F5):浏览器不使用缓存,因此发送的请求头部均带有 Cache-control: no-cache(为了兼容,还带了 Pragma: no-cache)。服务器直接返回 200 和最新内容。

用户行为.png

DNS

DNS是域名解析系统 Domain Name System:

就像 IP 地址必须转换成 MAC 地址才能访问主机一样,域名也必须要转换成 IP 地址,这个过程就是“域名解析”。

https://www.baidu.com/ 中‘www’ 表示万维网服务;‘baidu’ 是主机名;
极客时间的域名“time.geekbang.org”,这里的“org”就是顶级域名,“geekbang”是二级域名,“time”则是主机名

DNS 的核心系统是一个三层的树状、分布式服务,基本对应域名的结构:

1、根域名服务器(Root DNS Server):管理顶级域名服务器,返回“com”“net”“cn”等顶级域名服务器的 IP 地址;
2、顶级域名服务器(Top-level DNS Server):管理各自域名下的权威域名服务器,比如 com 顶级域名服务器可以返回 apple.com 域名服务器的 IP 地址;
3、权威域名服务器(Authoritative DNS Server):管理自己域名下主机的 IP 地址,比如 apple.com 权威域名服务器可以返回 www.apple.com 的 IP 地址。

DNS工作原理

  • 分布式层次数据库
    • 根DNS服务器
    • TLD顶级域(DNS)服务器 com org edu
    • 权威DNS服务器
    • 本地DNS服务器与三个服务器的查询关系 从请求主机向本地DNS服务器发出
      的查询是递归查询,从本地DNS服务器向其他三种服务器查询为迭代查询

比如: 你访问你要访问“www.apple.com”,
1、问根域名服务器,它会告诉你“com”顶级域名服务器的地址;
2、访问“com”顶级域名服务器,它再告诉你“apple.com”域名服务器的地址;
3、最后访问“apple.com”域名服务器,就得到了“www.apple.com”的地址。

DNS.png

DNS 缓存:

1、 浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址,如果有,解析结束。

2、操作系统里也会对 DNS 解析结果做缓存,如果你之前访问过“www.apple.com”,那么下一次在浏览器里再输入这个网址的时候就不会再跑到 DNS 那里去问了,直接在操作系统里就可以拿到 IP 地址。

3、操作系统里还有一个特殊的“主机映射”文件,通常是一个可编辑的文本,在 Linux 里是“/etc/hosts”,在 Windows 里是“C:\WINDOWS\system32\drivers\etc\hosts”,如果操作系统在缓存里找不到 DNS 记录,就会找这个文件。

4、如果至此还没有命中域名,才会真正的请求本地域名服务器(LDNS)来解析这个域名,这台服务器一般在你的城市的某个角落。

5、如果LDNS仍然没有命中,就直接跳到Root Server 域名服务器请求解析

6、根域名服务器返回给本地域服务器 一个所查询域的主域名服务器(gTLD Server,国际顶尖域名服务器,如.com .cn .org等)地址;

7、此时LDNS再发送请求给上一步返回的gTLD

8、接受请求的gTLD查找并返回这个域名对应的Name Server的地址,这个Name Server就是网站注册的域名服务器

9、Name Server根据映射关系表找到目标ip,返回给LDNS

10、 LDNS缓存这个域名和对应的ip

DNS 域名解析.jpeg
WechatIMG591.png

域名解析可以返回多个 IP 地址,所以一个域名可以对应多台主机,客户端收到多个 IP 地址后,就可以自己使用轮询算法依次向服务器发起请求,实现负载均衡.

如果输入 一个不存在的域名:
1、首先查询浏览器缓存:一段时间内访问过的一些网址的DNS信息,不同浏览器保存的时常不同
2、如果没有找到对应的记录,这个时候浏览器会尝试调用操作系统缓存来继续查找这个网址的对应DNS信息
3、host文件
4、根域名 顶级域名
5、 返回失败

TCP连接

TCP报文段结构

  • 源端口号+目的端口号
  • 序号
  • 确认号
  • 首部长度+保留未用+URG+ACK+PSH+RST+SYN+FIN+接收窗口
  • 因特网校验和+紧急数据指针
  • 选项
  • 数据

总结

http请求.png

Http 缓存
HTTP 缓存控制小结
彻底弄懂HTTP缓存机制及原理
浏览器缓存机制剖析
前端缓存
浏览器缓存机制

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

推荐阅读更多精彩内容