浏览器缓存调控,缓存机制黄金时代二三
分类:前端技术

HTTP 缓存机制一二三

2017/10/18 · HTML5 · 4 评论 · 缓存

原文出处: 阿咩   

图片 1Web 缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器缓存。

浏览器缓存也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。

在具体了解 HTTP 缓存之前先来明确几个术语:

  • 缓存命中率:从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。
  • 过期内容:超过设置的有效时间,被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求,必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。
  • 验证:验证缓存中的过期内容是否仍然有效,验证通过的话刷新过期时间。
  • 失效:失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。

浏览器缓存主要是 HTTP 协议定义的缓存机制。HTML meta 标签,例如

JavaScript

<META HTTP-EQUIV="Pragma" CONTENT="no-store">

1
<META HTTP-EQUIV="Pragma" CONTENT="no-store">

含义是让浏览器不缓存当前页面。但是代理服务器不解析 HTML 内容,一般应用广泛的是用 HTTP 头信息控制缓存。

强缓存

浏览器缓存控制,浏览器缓存

浏览器缓存控制

Last-Modified/ If-Modified-Since

在浏览器第一次请求某一个URL时,服务器端的返回状态码200,内容是客户端请求的资源,同时有一个Last-Modified的属性标记此文件在服务器端最后被修改的时间。

Last-Modified格式类似这样:Last-Modified : Fri , 12 May 2006 18:53:33 GMT

客户端第二次请求此URL时,根据HTTP协议的规定,浏览器会向服务器传送If-Modified-Since报头,询问该时间之后文件是否有被修改过:

If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT

如果服务器端的资源没有变化,则自动返回 HTTP 304(Not Changed.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

Last-Modified的问题

1、一些文件会被编辑,但内容并未改变,这个时候不希望客户端认为这个文件被修改了,而重新获取资源。

2、某些文件修改非常频繁,比如在秒以下的时间内进行修改,If-Modified-Since无法检查到。

3、某些服务器不能精确的得到文件的最后修改时间。

 

Expires

Expires用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时,它会和相应的组件一起保存到其缓存中,只要组件没有过期,浏览器就会使用缓存版本而不会进行任何的HTTP请求。长久的Expires头适用于图片等不经常更新的资源。Expires设置的日期格式必须为GMT(格林尼治标准时间)。

Expires:Wed, 11 Jan 2017 08:10:26 GMT

Expires的不足:

首先,Expires头使用的是一个特定的时间,要求客户端和服务器端的时钟严格同步。如果服务器和客户端的时间不统一,这有可能出现缓存提前失效的情况,存在不稳定性。其次,假如Expires的日期到来,需要在服务器配置中再提供一个新的日期。

 

Cache-Control

HTTP1.1引入了Cache-Control头来克服Expires头的不足。Cache-Control使用max-age制定组件被缓存多久,以秒为单位。例如

Cache-Control:max-age=3600表示组件将被缓存60分钟。

如果max-age和Expires同时出现,则max-age有更高的优先级,浏览器会根据max-age的时间来确认缓存过期时间。

常用 cache-directive 值

Cache-directive

说明

public

所有内容都将被缓存(客户端和代理服务器都可缓存)

private

内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存),默认值

no-cache

必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。

no-store

所有内容都不会被缓存到缓存或 Internet 临时文件中

must-revalidation/proxy-revalidation

如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证

max-age=xxx (xxx is numeric)

缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用。如果和Last-Modified一起使用时, 优先级较高

 

浏览器的不同操作

打开新窗口

如果指定cache-control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如:Cache-control: max-age=5 表示当访问此网页后的5秒内不会去再次访问服务器.

在地址栏回车

如果值为private或must-revalidate,则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。

按后退按扭

如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问.

按刷新按扭

无论为何值,都会重复访问.

 

Etag(Entity Tag)

服务器在检测缓存的组件是否和原始服务器上的组件匹配时有两种方法:

(1)比较最近修改日期;Last-Modified/If-Modified-since

(1)比较实体标签;Etag/If-None-Match(优先级比If-Modified-since高)

实体标签,是web服务器和浏览器用于确认缓存组件的有效性的一种机制。

           ETag:"50b1c1d4f775c61:df3"

第一次请求时:

1.客户端发起HTTP GET 请求一个资源;

2.服务器处理请求,返回资源,包括Http Etag和状态码200

第二次请求时:

1.客户端发起 HTTP GET 请求一个文件,请求中包括一个If-None-Match头,内容就是第一次请求时服务器返回的Etag的值

2.服务器判断接受到的Etag和计算出来的Etag是否匹配。若匹配,返回304状态码,客户端继续使用本地的缓存。若不匹配,返回资源和新的ETag。

ETag带来的问题

ETag通常使用组件的某些属性来构造它,这些属性对于特定的寄宿了网站服务器来说是唯一的。当浏览器从一台服务器上获取了原始组件,之后又向另外一台不同的服务器发起条件GET请求时,ETag是不会匹配的。

对组件进行不必要的重新加载还会影响服务器的性能并增加带宽开销。如果你的RoundRobin Rotation集群中有n台服务器,下一次用户缓存中的Etag能和服务器匹配的概率是1/n。Etag还会降低代理缓存的效率,因为代理的与自身的不匹配会重新下载。

HTTP响应优化

移除ETag,Expires,使用Cache-Control控制本地缓存。

浏览器缓存控制 Last-Modified/ If-Modified-Since 在浏览器第一次请求某一个URL时,服务器端的返回状态码200,内容...

最近在做页面分析的时候发现页面F5刷新时,大部分原来已经缓存的内容的状态变成了304,很是不解,原来想好好看看是什么原因的。结果发现园里已经有人分析的很彻底了。

HTTP 头信息控制缓存

大致分为两种:强缓存和协商缓存。强缓存如果命中缓存不需要和服务器端发生交互,而协商缓存不管是否命中都要和服务器端发生交互,强制缓存的优先级高于协商缓存。具体内容下文介绍。

匹配流程(已有缓存的情况下):

图片 2

可以理解为无须验证的缓存策略。对强缓存来说,响应头中有两个字段 Expires/Cache-Control 来表明规则。

 

强缓存

可以理解为无须验证的缓存策略。对强缓存来说,响应头中有两个字段 Expires/Cache-Control 来表明规则。

Expires

Expires 指缓存过期的时间,超过了这个时间点就代表资源过期。有一个问题是由于使用具体时间,如果时间表示出错或者没有转换到正确的时区都可能造成缓存生命周期出错。并且 Expires 是 HTTP/1.0 的标准,现在更倾向于用 HTTP/1.1 中定义的 Cache-Control。两个同时存在时也是 Cache-Control 的优先级更高。

Cache-Control

Cache-Control 可以由多个字段组合而成,主要有以下几个取值:

  1. max-age 指定一个时间长度,在这个时间段内缓存是有效的,单位是s。例如设置 Cache-Control:max-age=31536000,也就是说缓存有效期为(31536000 / 24 / 60 * 60)天,第一次访问这个资源的时候,服务器端也返回了 Expires 字段,并且过期时间是一年后。

图片 3

在没有禁用缓存并且没有超过有效时间的情况下,再次访问这个资源就命中了缓存,不会向服务器请求资源而是直接从浏览器缓存中取。

图片 4

  1. s-maxage 同 max-age,覆盖 max-age、Expires,但仅适用于共享缓存,在私有缓存中被忽略。

  2. public 表明响应可以被任何对象(发送请求的客户端、代理服务器等等)缓存。

  3. private 表明响应只能被单个用户(可能是操作系统用户、浏览器用户)缓存,是非共享的,不能被代理服务器缓存。

  4. no-cache 强制所有缓存了该响应的用户,在使用已缓存的数据前,发送带验证器的请求到服务器。不是字面意思上的不缓存。

  5. no-store 禁止缓存,每次请求都要向服务器重新获取数据。

Expires

原文地址:浏览器缓存机制

 

浏览器缓存机制,其实主要就是**HTTP协议定义的缓存机制(如: Expires; Cache-control**等)。但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:

 

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

 

 

 

上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。

下面我主要介绍HTTP协议定义的缓存机制。

协商缓存

缓存的资源到期了,并不意味着资源内容发生了改变,如果和服务器上的资源没有差异,实际上没有必要再次请求。客户端和服务器端通过某种验证机制验证当前请求资源是否可以使用缓存。

浏览器第一次请求数据之后会将数据和响应头部的缓存标识存储起来。再次请求时会带上存储的头部字段,服务器端验证是否可用。如果返回 304 Not Modified,代表资源没有发生改变可以使用缓存的数据,获取新的过期时间。反之返回 200 就相当于重新请求了一遍资源并替换旧资源。

Last-modified/If-Modified-Since

Last-modified: 服务器端资源的最后修改时间,响应头部会带上这个标识。第一次请求之后,浏览器记录这个时间,再次请求时,请求头部带上 If-Modified-Since 即为之前记录下的时间。服务器端收到带 If-Modified-Since 的请求后会去和资源的最后修改时间对比。若修改过就返回最新资源,状态码 200,若没有修改过则返回 304。

图片 5

注意:如果响应头中有 Last-modified 而没有 Expire 或 Cache-Control 时,浏览器会有自己的算法来推算出一个时间缓存该文件多久,不同浏览器得出的时间不一样,所以 Last-modified 要记得配合 Expires/Cache-Control 使用。

Etag/If-None-Match

由服务器端上生成的一段 hash 字符串,第一次请求时响应头带上 ETag: abcd,之后的请求中带上 If-None-Match: abcd,服务器检查 ETag,返回 304 或 200。

图片 6

关于 last-modified 和 Etag 区别,已经有很多人总结过了:

  • 某些服务器不能精确得到资源的最后修改时间,这样就无法通过最后修改时间判断资源是否更新。
  • Last-modified 只能精确到秒。
  • 一些资源的最后修改时间改变了,但是内容没改变,使用 Last-modified 看不出内容没有改变。
  • Etag 的精度比 Last-modified 高,属于强验证,要求资源字节级别的一致,优先级高。如果服务器端有提供 ETag 的话,必须先对 ETag 进行 Conditional Request。

注意:实际使用 ETag/Last-modified 要注意保持一致性,做负载均衡和反向代理的话可能会出现不一致的情况。计算 ETag 也是需要占用资源的,如果修改不是过于频繁,看自己的需求用 Cache-Control 是否可以满足。

选择 Cache-Control 的策略(摘自 Google Developers)

图片 7

Expires 指缓存过期的时间,超过了这个时间点就代表资源过期。有一个问题是由于使用具体时间,如果时间表示出错或者没有转换到正确的时区都可能造成缓存生命周期出错。并且 Expires 是 HTTP/1.0 的标准,现在更倾向于用 HTTP/1.1 中定义的 Cache-Control。两个同时存在时也是 Cache-Control 的优先级更高。

Expires策略

Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

下面是宝宝PK项目中,浏览器拉取jquery.js web服务器的响应头:

图片 8 

注:Date头域表示消息发送的时间,时间的描述格式由rfc822定义。例如,Date: Mon,31 Dec 2001 04:25:57GMT。

Web服务器告诉浏览器在2012-11-28 03:30:01这个时间点之前,可以使用缓存文件。发送请求的时间是2012-11-28 03:25:01,即缓存5分钟。

不过Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略。

实际应用

回到实际应用上来,首先要明确哪些内容适合被缓存哪些不适合。

考虑缓存的内容:

  • css样式文件
  • js文件
  • logo、图标
  • html文件
  • 可以下载的内容

一些不应该被缓存的内容:

  • 业务敏感的 GET 请求

可缓存的内容又分为几种不同的情况:

不经常改变的文件:

给 max-age 设置一个较大的值,一般设置 max-age=31536000

比如引入的一些第三方文件、打包出来的带有 hash 后缀 css、js 文件。一般来说文件内容改变了,会更新版本号、hash 值,相当于请求另一个文件。

标准中规定 max-age 的值最大不超过一年,所以设成 max-age=31536000。至于过期内容,缓存区会将一段时间没有使用的文件删除掉。

有看到用对话的形式来描述这个过程,便仿照着试图更清晰地解释:

图片 9图片 10

可能经常需要变动的文件:

Cache-Control: no-cache / max-age=0

比如入口 index.html 文件、文件内容改变但名称不变的资源。选择 ETag 或 Last-Modified 来做验证,在使用缓存资源之前一定会去服务器端做验证,命中缓存时会比第一种情况慢一点点,毕竟还要发请求进行通信。

图片 11图片 12

注意: 这里只描述了最基本的思路,实际使用 HTTP 缓存需要后端配合配置,具体情况具体对待,而且各方的实现并不一定完全按照标准来的,踩踩坑更健康

本文由pc28.am发布于前端技术,转载请注明出处:浏览器缓存调控,缓存机制黄金时代二三

上一篇:HTML动漫分类,前端动漫大杂炖 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 浏览器缓存调控,缓存机制黄金时代二三
    浏览器缓存调控,缓存机制黄金时代二三
    HTTP 缓存机制一二三 2017/10/18 · HTML5 · 4评论 ·缓存 原文出处: 阿咩    Web缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN缓存)、
  • 何以要写测验用例,的有的提议
    何以要写测验用例,的有的提议
    在 2017 年学习 React Redux 的一些建议(下篇) 2017/09/11 · JavaScript· React,Redux 原文出处: 郭永峰    在这里说一下前端开发的一个特点是更多的会涉及用户界
  • js从0开始构思表情插件
    js从0开始构思表情插件
    js从0开头考虑表情插件 2016/07/28 · JavaScript· 插件 本文小编: 伯乐在线 -陈被单。未经作者许可,禁绝转发! 应接加入伯乐在线 专辑小编。 前言: 是因为
  • 且是否滚动到头部或者底部,子元素scroll父元素
    且是否滚动到头部或者底部,子元素scroll父元素
    子元素scroll父元素容器不跟随滚动JS实现 2015/12/18 · JavaScript· 滚动 原文出处:张鑫旭    一、开场暖身 网上常见蹲来蹲去的小段子,比方说:“李代沫蹲
  • 用功率信号来支配异步流程,web播放控件
    用功率信号来支配异步流程,web播放控件
    用确定性信号来支配异步流程 2017/08/08 · JavaScript· 异步 原版的书文出处:十年踪迹    总结 大家通晓,JavaScript 不管是操作DOM,还是进行服务端职责,不