浏览器缓存

0. 硬盘缓存(disk cache)和内存缓存(memory cache)

当首次请求某一资源, 且该资源被设置需要缓存时, 该资源会被缓存在内存或硬盘中(也有可能两个地方都设有缓存). 当再次请求该资源时, 浏览器就可以不需要向服务器发送请求, 而直接从缓存中获取.

0.1 获取缓存的优先级

  1. 先从内存中获取缓存
  2. 若内存中没有缓存, 则去硬盘中获取缓存
  3. 若硬盘中也没有缓存, 则向服务器请求资源

0.2 缓存的位置设置

与内存的剩余空间有关

  • 当资源相对(内存剩余可用空间)较大时, 浏览器会优先将资源缓存到硬盘上
  • 当资源相对较小时, 浏览器会将资源缓存到内存上(硬盘上一般也会设置同样的缓存)

0.3 两种缓存的区别

  • 硬盘缓存的空间大, 而且读写速度较慢. 但关闭浏览器后缓存仍然存在
  • 内存缓存的空间小, 但读写速度比较快. 关闭浏览器后缓存不会存在

1. 由后端通过 response 响应头设置的缓存

1.1 强缓存

1.1.1 什么是强缓存

所谓的强缓存是指将由后台返回过来的文件存储到本地, 当再次请求相同文件时, 不用再去向服务器去发送请求, 而是先查看缓存中的相应文件, 只要文件不过期, 则会用缓存中的文件来回应请求(此时的状态码为 200); 而若是过期了, 就仍需要再次请求服务器


此处的缓存指的就是强缓存

1.1.2 如何设置强缓存

有两种设置强缓存的方法, 分别是基于 HTTP/1.0 和 HTTP/1.1 两种协议

  • expires(HTTP/1.0):
    • 通过设置 HTTP响应头中的 expires 属性可以为相应的文件设置强缓存.
    • 其格式一般是 expires: Wed, 05 Oct 2022 18:53:11 GMT
      • 右边的值即为该文件的到期时间(格林时间)
      • 只要将格林时间设置为比当前时间更早就表示不设置强缓存
  • cache-control(HTTP/1.1):
    • 通过设置 HTTP响应头中的 cache-control 属性可以为相应的文件设置强缓存.
    • 其格式一般是 cache-control: max-age=600
      • 这里的 max-age 对应的是在缓存中保留的时间, 600 表示保留 600s
      • 若是 cache-control 所对应的值为 no-cache 则表示不设置强缓存

如果 expires 和 cache-control 都设置了, 则以 cache-control 为准

1.2 协商缓存

1.2.1 什么是协商缓存

若一个文件被协商缓存在本地, 则当浏览器需要请求该文件时, 其会将缓存中文件的过期时间/标识发送给服务器, 若服务器确认文件没有失效, 返回 304 时, 浏览器会从本地缓存中取出该文件来响应请求, 否则会由服务器重新发送一个没有过期的文件给浏览器

1.2.2 如何设置协商缓存

有两种方法设置协商缓存, 分别基于 HTTP/1.0 和 HTTP/1.1

  • last-modified(HTTP/1.0):
    • 通过设置响应头的 last-modified 属性, 可以为相应的文件设置协商缓存
    • 其格式一般是 last-modified: Tue, 27 Sep 2022 05:31:33 GMT
      • 右边的值是该文件的过期时间(格林时间)
      • 只要将格林时间设置为比当前时间更早就表示不设置协商缓存
  • etag(HTTP/1.1):
    • 通过设置响应头的 etag 属性, 可以为相应的文件设置协商缓存
    • 其格式一般是 etag: 9de6JuprLuBFrz3sp6HXvQ==
      • 右边的值是后台为该文件生成的唯一标识符

2. 可以由前端开发者设置的缓存

2.1 localStorage

2.1.1 localStorage 的设置与提取

  • localStorage.setItem(key, value)
  • localStorage.getItem(key)

2.1.2 localStorage 的特点

  • 永久保存: 除非手动清除或卸载浏览器, 否则会一直保存
  • 存储大小足够: 可以保存 5MB 大小的信息
  • 作用域: 所有的同源网站的不同窗口都可以共享数据

2.2 sessionStorage

2.2.1 sessionStorage 的设置与提取

  • sessionStorage.setItem(key, value)
  • sessionStorage.getItem(key)

2.2.2 sessionStorage 的特点

  • 页面刷新, sessionStorage 中存储的内容不变
  • 页面关闭, sessionStorage 中存储的内容会消失
  • 存储空间与 localStorage 一样, 能够保存 5MB 大小的信息
  • 作用域: sessionStorage 在当前的窗口存储的值只能在当前窗口获取
  • 通过 document.cookie 可以直接获取 cookie
  • 通过 document.cookie = 'key: value' 可以为 cookie 设置值
  • 一般是由后端通过 response 相应头进行设置
  • 浏览器向后端发送请求时一般会携带 cookie 字段
  • cookie 一般会记录用户的一些信息
    • 记录历史信息: 在购物网站中, cookie 可能会记录用户的浏览信息, 购物车信息等
    • 识别用户身份: 在服务器上可能存储着一些 key-value 数据结构(对应的 value 是用户信息), 然后将 key(一般是有时效限制的随机数或者在这之上的更复杂的东西)设置在 cookie 中, 当浏览器发送请求过来时, 将 key 结合服务器上的 key-value 数据结构就能够获取到对应的用户信息
posted @ 2022-10-09 20:37  小阁下  阅读(469)  评论(0)    收藏  举报