前端技术基础:浏览器缓存

Posted blogofmotherlyn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端技术基础:浏览器缓存相关的知识,希望对你有一定的参考价值。

浏览器缓存介绍

我们知道,浏览器可以通过http请求获得的资源,根据服务端的设置作一定的缓存处理,以加快下一次再使用同类资源时调出的速度,这便是浏览器缓存。

浏览器缓存分类

浏览器缓存分为以下两类:强缓存和协商缓存(也叫弱缓存)

强缓存

强缓存的命中意为完全不向服务端再次请求该资源,直接从缓存中读取。强缓存对应http头中的Expires与Cache-Control两个字段。

  1. Expires
    Expires,是http1.0规范的字段,它顾名思义,表示该缓存的失效时间。由于它是一个标准时间,如若服务器的系统时间与客户端的系统时间差距过大时,Expires将会在未知的情况下使缓存过期,因此在http1.1出现后,主要以Cache-Control来确定缓存是否有效。
  2. Cache-Control
    Cache-Control是http1.1规范的字段。服务端在配置过程中,Cache-Control所控制的缓存失效时间优先级高于Expires。在这个字段内,我们可以定义多条属性(因此它不只确定缓存的有效期):
    • max-age:相对时间(单位为秒)
    • no-cache:使用协商缓存,不使用强缓存
    • no-store:完全不缓存该内容
    • public:可被中间代理服务器或者终端浏览器等所有的用户缓存
    • private:只能被终端浏览器的用户缓存

协商缓存

协商缓存命中意为向服务端发送请求获取某资源时,服务端认定该资源在客户端的缓存是最新的,返回304状态码通知客户端浏览器直接使用缓存内容。协商缓存对应的http头部字段为两个组合:第一次请求的响应头中有(Last-Modified/ETag),则后续请求头中带上(If-Modified-Since/If-None-Match)。

  1. Last-Modified/If-Modified-Since
    当第一次请求被响应时,浏览器收到了Last-Modified字段(一个标准时间)时,浏览器再后续请求头上带着If-Modified-Since字段,当服务端检测到从上次到现在该资源都未发生变化时,不返回该资源,而返回304状态码,告诉浏览器可以直接从缓存获取资源。
  2. ETag/If-None-Match(优先级相比上者更高)
    ETag(一种校验码)表示唯一的一种资源,如果该资源发生变化,那么它的ETag也会发生变化。浏览器会在后续请求头中带上If-None-Match。此时,无论服务端中该资源是否发生变化,服务端都会返回一个ETag(因为某些资源可能是周期性修改的,也可能重复修改后内容不变,此时ETag会重新生成,但服务端不希望浏览器重新GET这个资源)。

以上是关于前端技术基础:浏览器缓存的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化 浏览器缓存技术

web前端缓存机制

前端浏览器缓存机制

浏览器缓存系列之一:基础知识必备

前端技能树,面试复习第 38 天—— 浏览器原理:详解浏览器缓存机制 | 协商缓存与强缓存(重点)

前端缓存--LocalStorage(二)