主页 > 网站优化 > 从前端角度理解缓存

从前端角度理解缓存

缓存的概念分很多种,本次讨论的主要就是前端缓存中的Http缓存。

缓存是怎么回事

前端发送请求主要经历以下三个过程,请求->处理->响应。如果有多次请求就需要重复执行这个过程。

重复请求的过程

以下是一个重复请求的流程图:

从前端角度理解缓存

从以上的流程图可以看书,如果用户重复请求同一资源的话,会对服务器资源造成浪费,服务器重复读取资源,发送给浏览器后浏览器重复下载,造成不必要的等待与消耗。

缓存读取的过程

缓存读取就是浏览器在向服务器请求资源之前,先查询一下本地缓存中是否存在需要的资源,如果存在,那便优先从缓存中读取。当缓存不存在或者过期,再向服务器发送请求。

从前端角度理解缓存

如何开启Http缓存并对缓存进行设置,是本次讨论的关键。

缓存的类型

浏览器有如下常见的几个字段:

  1. expires: 设置缓存过期的时间

  2. private: 客户端可以缓存

  3. public: 客户端和代理服务器都可缓存

  4. max-age=xxx: 缓存的内容将在 xxx 秒后失效

  5. no-cache: 需要使用对比缓存来验证缓存数据

  6. no-store: 所有内容都不会缓存,强制缓存,对比缓存都不会触发

  7. last-modified: 内容上次被修改的时间

  8. Etag: 文件的特殊标识

强制缓存和协商缓存

缓存方法可以分为强制缓存与协商缓存。

从字面理解,强制缓存的方式简单粗暴,给cache设置了过期时间,超过这个时间之后cache过期需要重新请求。上述字段中的expirescache-control中的max-age都属于强制缓存。

协商缓存根据一系列条件来判断是否可以使用缓存。

强制缓存优先级高于协商缓存

强制缓存

expires

expires给浏览器设置了一个绝对时间,当浏览器时间超过这个绝对时间之后,重新向服务器发送请求。

Expires: Fri, 04 Jan 2019 12:00:00 GMT

这个方法简单直接,直接设定一个绝对的时间 (当前时间+缓存时间)。但是也存在隐患,例如浏览器当前时间是可以进行更改的,更改之后expires设置的绝对时间相对不准确,cache可能会出现长久不过期或者很快就过期的情况。

cache-control: max-age

为了解决expires存在的问题,Http1.1版本中提出了cache-control: max-age,该字段与expires的缓存思路相同,都是设置了一个过期时间,不同的是max-age设置的是相对缓存时间开始往后多久,因此不存在受日期不准确情况的影响。

但是强制缓存存在一个问题,该缓存方式优先级高,如果在过期时间内缓存的资源在服务器上更新了,客服端不能及时获取最新的资源。

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!