Web缓存之浏览器缓存


概述

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。这样带来的好处有:缓解服务器端压力,提升性能(获取资源的耗时更短了)。对于网站来说,缓存是达到高性能的重要组成部分。缓存需要合理配置,因为并不是所有资源都是永久不变的:重要的是对一个资源的缓存应截止到其下一次发生改变(即不能缓存过期的资源)。

缓存的种类有很多,其大致可归为两类:私有与共享缓存。

  • 共享缓存存储的响应能够被多个用户使用。
  • 私有缓存只能用于单独用户,浏览器缓存属于私有缓存。

当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变得内容,浏览器会将他们保存在本地的文件中,下次访问相同网站得时候,直接加载这些资源,加速访问。

这些被浏览器保存的文件就被称为浏览器缓存(不是指Cookie或者Localstorage)

缓存机制

浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存字段进行的。HTTP报文见计算机网络之HTTP

缓存字段

  • 通用首部字段:

    字段名称 说明
    Cache-Control 控制缓存的行为
    Pragam HTTP/1.0时的旧社会遗留物,值为“no-cache”时禁用缓存
  • 请求首部字段

    字段名称 说明
    If-Match 比较ETag是否一致
    If-None-Match 比较ETag是否不一致
    If-Modified-Since 比较资源最后更新的时间是否一致
    If-Unmodified-Since 比较资源最后更新的时间是否不一致
  • 响应首部字段

    字段名称 说明
    ETag 资源的匹配信息
  • 实体首部字段

    字段名称 说明
    Expires HTTP/1.0的遗留物,实体主体过去时间
    Last-Modified 资源最后一次修改的时间

缓存过程分析

浏览器与服务器通信的方式为请求—应答模式,即是:浏览器发起HTTP请求 — 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识,决定是否缓存结果,是则将请求结果和缓存字段存入浏览器缓存中。

从上图中我们可以知道:

  • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

强缓存

简述

强缓存是利用Expires或者Cache-Control这两个http response header实现的,它们都用来表示资源在客户端缓存的有效期

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

  • 缓存结果和标识存在,并且并未失效,直接获取缓存结果
  • 缓存结果和标识存在,但已失效,进入协商缓存
  • 缓存结果和标识不存在,从服务器请求资源

Expires

Expires是HTTP 1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示。如:Expires:Thu, 31 Dec 2037 23:55:55 GMT,包含了Expires头标签的文件,就说明浏览器对于该文件缓存具有非常大的控制权。

一个文件的Expires值是2020年的1月1日,那么就代表,在2020年1月1日之前,浏览器都可以直接使用该文件的本地缓存文件,而不必去服务器再次请求该文件,哪怕服务器文件发生了变化。

所以,Expires是优化中最理想的情况,因为它根本不会产生请求,所以后端也就无需考虑查询快慢。它的缓存原理,如下:

  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上Expires的header;

  2. 浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来;

  3. 浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,拿出它的Expires跟当前的请求时间比较,如果请求时间在Expires指定的时间之前,就能命中缓存,否则就不行;

  4. 如果缓存没有命中,浏览器直接从服务器加载资源时,Expires Header在重新加载的时候会被更新。

Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如:随意修改下客户端时间,就能影响缓存命中的结果

Cache-Control

在HTTP 1.1的时候,提出了一个新的header,就是Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=315360000,它的缓存原理是:

  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上Cache-Control的header;

  2. 浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来;

  3. 浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,根据它第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行;

  4. 如果缓存没有命中,浏览器直接从服务器加载资源时,Cache-Control Header在重新加载的时候会被更新

Cache-Control描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较Expires,Cache-Control的缓存管理更有效,安全一些。

这两个header可以只启用一个,也可以同时启用,当response header中,Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires

此外,还可以为 Cache-Control 指定 publicprivate 等标记:

  • public:表示允许客户端和代理服务器缓存
  • private:表示只能被客户端缓存,中间的代理服务器不能缓存,Cache-Control默认为private
  • no-store:表示不进行任何形式的缓存
  • no-cache:表示跳过强缓存,进入协商缓存
  • s-maxage:这和max-age差不多,区别在于s-maxage是针对代理服务器的缓存时间

协商缓存

协商缓存是利用的是【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的

当浏览器对某个资源的请求没有命中强缓存,就会发一个请求到服务器,验证协商缓存是否命中,如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串

Last-Modified,If-Modified-Since

  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间

  2. 浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值;

  3. 服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为既然资源没有变化,那么Last-Modified也就不会改变;

  4. 浏览器收到304的响应后,就会从缓存中加载资源;

  5. 如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified Header在重新加载的时候会被更新,下次请求时,If-Modified-Since会启用上次返回的Last-Modified值

【Last-Modified,If-Modified-Since】都是根据服务器时间返回的header,一般来说,在没有调整服务器时间和篡改客户端缓存的情况下,这两个header配合起来管理协商缓存是非常可靠的,但是有时候也会服务器上资源其实有变化,但是最后修改时间却没有变化的情况,而这种问题又很不容易被定位出来,而当这种情况出现的时候,就会影响协商缓存的可靠性。

ETag、If-None-Match

  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上ETag的header,这个header是服务器根据当前请求的资源生成的一个唯一标识,这个唯一标识是一个字符串,只要资源有变化这个串就不同,跟最后修改时间没有关系,所以能很好的补充Last-Modified的问题

  2. 浏览器再次跟服务器请求这个资源时,在request的header上加上If-None-Match的header,这个header的值就是上一次请求时返回的ETag的值:

  3. 服务器再次收到资源请求时,根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag,如果这两个值相同就说明资源没有变化,否则就是有变化;如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化

  4. 浏览器收到304的响应后,就会从缓存中加载资源。

协商缓存跟强缓存不一样,强缓存不发请求到服务器,所以有时候资源更新了浏览器还不知道,但是协商缓存会发请求到服务器,所以资源是否更新,服务器肯定知道。大部分web服务器都默认开启协商缓存,而且是同时启用【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】。

如果没有协商缓存,每个到服务器的请求,就都得返回资源内容,这样服务器的性能会极差。

【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】一般都是同时启用,这是为了处理Last-Modified不可靠的情况。有一种场景需要注意:

分布式系统里多台机器间文件的Last-Modified必须保持一致,以免负载均衡到不同机器导致比对失败

分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样

协商缓存需要配合强缓存使用,因为如果不启用强缓存的话,协商缓存根本没有意义

缓存位置

前面我们已经提到,当强缓存命中或者协商缓存中服务器返回304的时候,我们直接从缓存中获取资源。那这些资源究竟缓存在什么位置呢?

浏览器中的缓存位置一共有四种,按优先级从高到低排列分别是:

  • Service Worker
  • Memory Cache
  • Disk Cache
  • Push Cache

Service Worker

Service Worker 借鉴了 Web Worker的 思路,即让 JS 运行在主线程之外,由于它脱离了浏览器的窗体,因此无法直接访问DOM。虽然如此,但它仍然能帮助我们完成很多有用的功能,比如离线缓存消息推送网络代理等功能。其中的离线缓存就是 Service Worker Cache,使用 Service Worker的话,传输协议必须为 HTTPS。

Memory Cache 和 Disk Cache

  • Memory Cache

    指的是内存缓存,读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效,可是缓存持续性很短,会随着进程的释放而释放。 一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。内存缓存中有一块重要的缓存资源是preloader相关指令(例如<link rel=”prefetch”>)下载的资源。它可以一边解析js/css文件,一边网络请求下一个资源。

  • Disk Cache

    存储在硬盘中的缓存,从存取效率上讲是比内存缓存慢的,但是他的优势在于存储容量和存储时长。

好,现在问题来了,既然两者各有优劣,那浏览器如何决定将资源放进内存还是硬盘呢?主要策略如下:

  • 比较大的JS、CSS文件会直接被丢进磁盘,反之丢进内存
  • 内存使用率比较高的时候,文件优先进入磁盘

Push Cache

即推送缓存,这是浏览器缓存的最后一道防线。它是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右,同时它也并非严格执行HTTP头中的缓存指令。

参考

HTTP 缓存

前端优化:浏览器缓存技术介绍

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

(1.6w字)浏览器灵魂之问,请问你能接得住几个?

HTTP缓存和浏览器的本地存储


评论
 本篇
Web缓存之浏览器缓存 Web缓存之浏览器缓存
概述 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。 当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。这样带来的好处有:缓解服务器端压力,提升性能(获取资源的耗时更短了)。对
2020-10-11
下一篇 
计算机网络之HTTPS 计算机网络之HTTPS
概念 HTTPS = HTTP + SSL/TLS HTTPS (Secure Hypertext Transfer Protocol)安全超文本传输协议,是经过SSL/TLS加密的HTTP协议,端口号为443。其设计的主要目的是,提供对
  目录