阅读 313

HTTP 缓存简介

缓存作为前端性能优化的有效方式之一,对于前端开发工程师来说,相对熟悉的就是 HTTP 缓存。

一、什么是 HTTP 缓存?

HTTP 缓存指的是:当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器缓存中有“要请求的资源”的副本,则直接从浏览器缓存中获取,而不是从目标服务器中获取这个资源。

虽然 HTTP 缓存不是必须的,但重用缓存的资源通常是必要的。然而常见的 HTTP 缓存只能存储 GET 响应,对于其他类型的响应则无能为力。

二、为什么要用 HTTP 缓存?

  • 减少冗余的数据传输
  • 缓解服务器压力,提高网站性能
  • 加快了客户端加载网页及资源的速度

三、哪些资源可以被缓存?

一般包括 html 页面和其他静态资源(js、img、css等)

四、HTTP 缓存分类

  1. 强缓存
  • Expires(HTTP 1.0)
    • Response Headers 中
    • 控制缓存过期时间
    • 已被 Cache-Control 代替
    • 值为服务器端的绝对时间
  • Cache-Control(HTTP 1.1)
    • Response Headers 中
    • 控制强制缓存的逻辑
    • 例如 Cache-Control: max-age=31536000(单位是秒)
      • max-age 缓存过期时间(相对时间)
      • no-cache 不用本地强制缓存,需要进行协商缓存,发送请求到服务器确认是否使用缓存。
      • no-store 不用本地强制缓存,也不用服务端缓存措施,每一次都要重新请求数据。
      • private 只能被终端用户缓存,比如:电脑 浏览器 手机等
      • public 允许被任何中间人(比如中间代理、CDN等)缓存
  1. 协商缓存(对比缓存)
  • 服务器端缓存策略(服务端判断资源能不能用缓存的内容)
  • 服务器判断缓存资源是否和服务端资源一样(一致返回 304,否则返回 200 和最新的资源)
  • 在 Response Headers 中,有两种
    • Last-Modified 资源的最后修改时间(只能精确到秒级)
    • Etag 资源的唯一标示(优先使用)

五、缓存执行流程

浏览器在加载资源时,会先根据本地缓存资源的 header(expires 和 cahe-control) 中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求。 当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据 header(If-Modified-Since 和 If-None-Match)中的信息来判断是否命中缓存。如果命中,则返回 304 ,告诉浏览器资源未更新,可使用本地的缓存。

image.png

六、刷新操作方式,对缓存的影响

  • 三种刷新操作
    • 正常操作:地址栏输入 url,跳转链接,前进后退等
    • 手动刷新:F5,点击刷新按钮,右击菜单刷新
    • 强制刷新:ctrl + F5(Mac:shift + command + r)
  • 不同刷新操作,不同的缓存策略
    • 正常操作:强制缓存有效,协商缓存有效
    • 手动刷新:强制缓存无效,协商缓存有效
    • 强制刷新:强制缓存失效,协商缓存失效
文章分类
前端
文章标签