浏览器缓存机制

哈哈哈哈多好听
184 阅读6分钟

浏览器缓存机制 也就是 HTTP缓存机制，机制是依据HTTP报文的缓存标识进行的。

补: HTTP 请求报文和响应报文

HTTP请求报文： 【请求行、请求头、请求主体】

image.png

请求行：

  • 请求方法
  • 请求路径
  • 请求协议及版本

常见请求头：

  1. Accept：指定客户端可接受的内容类型，通常用于指定期望的响应格式。
  2. Accept-Language：指定客户端可接受的语言类型，用于内容国际化。
  3. Content-Type：指定请求体的媒体类型，用于告知服务器请求中包含的数据类型。
  4. Content-Length：请求体的长度，以字节为单位。
  5. Authorization：用于身份认证的凭证，例如基本认证（Basic Authentication）中的用户名和密码。
  6. Cookie：发送存储在客户端的 cookie 信息。
  7. Referer：指示请求的来源页面。

HTTP响应报文： 【响应行、响应头、响应主体】

image.png

响应行：

  • 协议及版本
  • 响应状态码
  • 相应内容

常见响应头：

  1. Content-Type：指定响应体的媒体类型。
  2. Content-Length：响应体的长度，以字节为单位。
  3. Set-Cookie：设置存储在客户端的 cookie 信息。
  4. Cache-Control：指定响应的缓存行为，例如缓存的有效期、是否允许缓存等。
  5. Expires：响应的过期时间，用于指示客户端在过期前可以使用缓存副本。
  6. Last-Modified：资源的最后修改时间，用于协商缓存。
  7. ETag：资源的特定版本标识符，用于协商缓存。
  8. Access-Control-Allow-Origin：指定允许访问资源的域名，用于跨域资源共享（CORS）。
  9. Location：指定重定向的目标 URL。
  10. Server：指示响应的服务器软件和版本。

缓存过程

image.png

由图可得：

  • 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识

  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

缓存机制之强制缓存 and 协商缓存

通常是两个机制协商使用，且强制缓存优先于协商缓存。即强制缓存生效则直接使用缓存，若不生效，则进行协商缓存。

注意：

协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存。

大致过程如下：

image.png

(1) 强制缓存

强制缓存指的是向浏览器缓存查找该请求结果。共有三种情况：

  • 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求

image.png

  • 存在该缓存结果和缓存标识，但该结果已失效，进行协商缓存

image.png

  • 存在该缓存结果和缓存标识，且该结果未失效，强制缓存生效，直接返回该结果

image.png

强制缓存的控制字段【响应头中】

  • Expires

    • Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果

  • Cache-Control

    • public：所有内容都将被缓存（客户端和代理服务器都可缓存）

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

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

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

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

(2) 协商缓存

协商缓存 就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

  • 协商缓存生效【即资源没有更新】，返回 304

image.png

  • 协商缓存失效【即资源更新了】，返回 200 和请求数据

image.png

协商缓存的控制字段：

  • Last-Modified / If-Modified-Since

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

  • Etag / If-None-Match

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

补：浏览器的缓存放在哪？

两个地方：from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存。浏览器读取缓存的顺序为 memory –> disk。

以访问ai.taobao.com/ 为例：

第一次访问，资源是请求的，关闭再打开就是

image.png

内存缓存 vs 硬盘缓存：

  • 内存缓存：

    • 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。

    • 时效性：一旦该进程关闭，则该进程的内存则会清空

  • 硬盘缓存：

    • 直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

注意：

  • 一般浏览器会把 JS 和 图片等资源存入内存缓存！
  • 会把 CSS 资源存入硬盘缓存！
avatar
文章
阅读
粉丝