浏览器缓存机制,浏览器缓存机制

浏览器缓存机制

2015/12/01 · HTML5 ·
HTTP

原稿出处:
吴秦   

浏览器缓存机制

浏览器缓存机制,其实爱护就是**HTTP协议定义的缓存机制(如: Expires; Cache-control**等)。但是也有非HTTP协议定义的缓存机制,如接纳HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中进入<meta>标签,代码如下:亚洲必赢官网 1

上述代码的功力是报告浏览器当前页面不被缓存,每一次访问都须要去服务器拉取。使用上很简短,但惟有一部分浏览器可以接济,而且具有缓存代理服务器都不支持,因为代理不解析HTML内容我。

上面我重点介绍HTTP协议定义的缓存机制。

多年来在做页面分析的时候发现页面F5刷新时,大多数原先早就缓存的始末的意况成为了304,相当不解,原来想好雅观看是怎么来头的。结果发现园里已经有人分析的很绝望了。

浏览器缓存机制

原文出处:
吴秦   

Expires策略

Expires是Web服务器响应音信头字段,在响应http请求时告诉浏览器在逾期时光前浏览器可以直接从浏览器缓存取数据,而无需重新恳请。

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

亚洲必赢官网 2

注: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,所以它的成效为主忽略。

 

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

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

Cache-control策略(重点关怀)

Cache-Control与Expires的意义一样,都是指明当前资源的有效期,控制浏览器是还是不是直接从浏览器缓存取数据依旧再一次发请求到服务器取数据。只可是Cache-Control的分选越多,设置更仔细,如若同时安装的话,其预先级高于**Expires**。亚洲必赢官网 3

要么地点卓殊请求,web服务器重返的Cache-Control头的值为max-age=300,即5秒钟(和上边的Expires时间一致,这些不是必须的)。

亚洲必赢官网 4

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

 

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

 

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

 

 

 

上述代码的机能是告诉浏览器当前页面不被缓存,每一趟访问都亟需去服务器拉取。使用上很简短,但唯有一部分浏览器可以协理,而且装有缓存代理服务器都不协理,因为代理不解析HTML内容本身。

上边我第一介绍HTTP协议定义的缓存机制。

html code

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

XHTML

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

l  Last-Modified:标示这么些响应资源的结尾修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。

l  If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Last-Modified讲明,则再度向web服务器请求时带上头 If-Modified-Since浏览器缓存机制,浏览器缓存机制。,表示请求时间。web服务器收到请求后意识有头If-Modified-Since **则与被呼吁资源的末尾修改时间展开比对**。若最终修改时间较新,表达资源又被改变过,则响应整片资源内容(写在响应音讯包体内),HTTP 200;若最终修改时间较旧,表达资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续利用所保存的cache。

Expires策略

Expires是Web服务器响应音讯头字段,在响应http请求时报告浏览器在逾期时刻前浏览器可以一直从浏览器缓存取数据,而无需再度请求。

上边是婴儿PK项目中,浏览器拉取jquery.js web服务器的响应头:

亚洲必赢官网 5 

注: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,所以它的法力为主忽略。

上述代码的效用是报告浏览器当前页面不被缓存,每一次访问都要求去服务器拉取。使用上很简短,但只有一些浏览器可以支撑,而且拥有缓存代理服务器都不帮衬,因为代理不解析HTML内容我。

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

Etag/If-None-Match

Etag/If-None-Match也要合作Cache-Control使用。

l  Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的绝无仅有标识(生成规则由服务器觉得)。Apache中,ETag的值,默认是对文本的索引节(INode),大小(Size)和结尾修改时间(M提姆e)举行Hash**后得到的

l  If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage讲明,则再度向web服务器请求时带上头If-None-Match **(Etag**的值)web服务器收到请求后发现有头If-None-Match 则与被呼吁资源的附和校验串举办比对,决定回去200或304

Cache-control策略(重点关怀)

Cache-Control与Expires的功能一样,都是指明当前资源的有效期,控制浏览器是或不是直接从浏览器缓存取数据或者再一次发请求到服务器取数据。只不过Cache-Control的选料越来越多,设置更周全,即便还要安装的话,其优先级高于**Expires**。

http协议头Cache-Control    

值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各个消息中的指令含义如下:

或者地点非常请求,web服务器重临的Cache-Control头的值为max-age=300,即5分钟(和上边的Expires时间一致,那么些不是必须的)。

亚洲必赢官网 6 

上边我重点介绍HTTP协议定义的缓存机制。

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

既生Last-Modified何生Etag?

您或许会认为拔取Last-Modified已经可以让浏览器知道地方的缓存副本是不是丰富新,为何还亟需Etag(实体标识)呢?HTTP1.1中Etag的出现重即使为着化解多少个Last-Modified比较难化解的题目:

l  Last-Modified标注的末梢修改只可以精确到秒级,假设某些文件在1分钟以内,被改动多次来说,它将无法精确标注文件的修改时间

l  借使某些文件会被限期生成,当有时内容并没有其他变动,但Last-Modified却改变了,导致文件无法使用缓存

l  有可能存在服务器并未确切获取文件修改时间,或者与代理服务器时间不均等等景观

Etag是服务器自动生成或者由开发者生成的附和资源在劳务器端的绝无仅有标识符,可以更进一步纯粹的控制缓存。Last-Modified与ETag**是足以一并使用的,服务器会优先验证ETag**,一致的景况下,才会持续比对Last-Modified,最终才控制是不是重临304

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

l  Last-Modified:标示这几个响应资源的末段修改时间。web服务器在响应请求时,告诉浏览器资源的末梢修改时间。

l  If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源有着Last-Modified注解,则重复向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后意识有头If-Modified-Since **则与被呼吁资源的最终修改时间开展比对**。若最终修改时间较新,表达资源又被更改过,则响应整片资源内容(写在响应音讯包体内),HTTP
200;若最后修改时间较旧,表达资源无新修改,则响应HTTP 304
(无需包体,节省浏览),告知浏览器继续采取所保存的cache。

Expires策略

Expires是Web服务器响应音信头字段,在响应http请求时告知浏览器在逾期时间前浏览器可以直接从浏览器缓存取数据,而无需再一次恳请。

上面是小婴孩PK项目中,浏览器拉取jquery.js web服务器的响应头:

 

注: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,所以它的职能为主忽略。

上边我主要介绍HTTP协议定义的缓存机制。上述代码的效应是告诉浏览器当前页面不被缓存,每便访问都亟需去服务器拉取。使用上很粗略,但唯有一部分浏览器可以支撑,而且富有缓存代理服务器都不扶助,因为代理不解析HTML内容本身。

用户作为与缓存

浏览器缓存行为还有用户的一言一动有关!!!亚洲必赢官网 7

总结

浏览器第一遍呼吁:

亚洲必赢官网 8

浏览器再一次呼吁时:

亚洲必赢官网 9

2 赞 12 收藏
评论

亚洲必赢官网 10

Etag/If-None-Match

Etag/If-None-Match也要协作Cache-Control使用。

l  Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器觉得)。Apache中,ETag的值,默许是对文件的索引节(INode),大小(Size)和尾声修改时间(M提姆(Tim)e)举行Hash**后收获的

l  If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage注明,则再一次向web服务器请求时带上头If-None-Match **(Etag**的值)web服务器收到请求后发觉有头If-None-Match 则与被呼吁资源的呼应校验串进行比对,决定回来200或304

Cache-control策略(重点关注)

Cache-Control与Expires的功效一样,都是指明当前资源的有效期,控制浏览器是还是不是直接从浏览器缓存取数据或者再次发请求到服务器取数据。只然而Cache-Control的选料更加多,设置更密切,假使还要设置的话,其预先级高于**Expires**。

http协议头Cache-Control   

值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各个消息中的指令含义如下:

  1. Public指示响应可被任何缓存区缓存。
  2. Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。
  3. no-cache指示请求或响应消息不能缓存
  4. no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
  5. max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
  6. min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
  7. max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

抑或地方卓殊请求,web服务器重回的Cache-Control头的值为max-age=300,即5分钟(和下边的Expires时间一模一样,这几个不是必须的)。

 

Expires策略

Expires是Web服务器响应信息头字段,在响应http请求时报告浏览器在逾期时刻前浏览器能够一直从浏览器缓存取数据,而无需重新请求。

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

亚洲必赢官网 11

注: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,所以它的法力为主忽略。

既生Last-Modified何生Etag?

您可能会觉得使用Last-Modified已经足以让浏览器知道地点的缓存副本是或不是丰富新,为啥还索要Etag(实体标识)呢?HTTP1.1中Etag的面世根本是为了缓解多少个Last-Modified相比难解决的题材:

l  Last-Modified标注的末梢修改只能精确到秒级,若是某些文件在1分钟以内,被涂改很多次以来,它将无法准确标注文件的修改时间

l  借使某些文件会被限期生成,当有时内容并不曾其他变更,但Last-Modified却改变了,导致文件没办法使用缓存

l  有可能存在服务器并未准确获取文件修改时间,或者与代理服务器时间不平等等气象

Etag是服务器自动生成或者由开发者生成的相应资源在服务器端的唯一标识符,可以更加准确的决定缓存。Last-Modified与ETag**是可以联手行使的,服务器会先行验证ETag**,一致的情形下,才会继续比对Last-Modified,最后才决定是不是重回304

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

l  Last-Modified:标示这些响应资源的最终修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。

l  If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源有着Last-Modified注解,则重复向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since **则与被呼吁资源的末尾修改时间开展比对**。若最终修改时间较新,表达资源又被改成过,则响应整片资源内容(写在响应信息包体内),HTTP 200;若最后修改时间较旧,表达资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache。

Cache-control策略(重点关心)

Cache-Control与Expires的机能一样,都是指明当前资源的有效期,控制浏览器是不是直接从浏览器缓存取数据仍然再度发请求到服务器取数据。只然而Cache-Control的分选更多,设置更周到,即使还要设置的话,其先行级高于Expires

http协议头Cache-Control   
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各个消息中的指令含义如下:

  1. Public指示响应可被任何缓存区缓存。
  2. Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。
  3. no-cache指示请求或响应消息不能缓存
  4. no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
  5. max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
  6. min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
  7. max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

要么地点非凡请求,web服务器重返的Cache-Control头的值为max-age=300,即5分钟(和地方的Expires时间同一,这么些不是必须的)。

亚洲必赢官网 12

用户作为与缓存

浏览器缓存行为还有用户的行为有关!!!

用户操作

Expires/Cache-Control

Last-Modified/Etag

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进、后退

有效

有效

F5刷新

无效

有效

Ctrl+F5刷新

无效

无效

Etag/If-None-Match

Etag/If-None-Match也要同盟Cache-Control使用。

l  Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的绝无仅有标识(生成规则由服务器觉得)。Apache中,ETag的值,默许是对文本的索引节(INode),大小(Size)和终极修改时间(MTime)举行Hash**后取得的

l  If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage注脚,则再一次向web服务器请求时带上头If-None-Match(Etag**的值)web服务器收到请求后意识有头If-None-Match 则与被呼吁资源的应和校验串举行比对,决定回来200或304**。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。


Last-Modified:标示那个响应资源的最终修改时间。web服务器在响应请求时,告诉浏览器资源的终极修改时间。


If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源有着Last-Modified讲明,则另行向web服务器请求时带上头
If-Modified-Since,表示请求时间。web服务器收到请求后意识有头If-Modified-Since
则与被呼吁资源的结尾修改时间展开比对。若最终修改时间较新,表明资源又被改动过,则响应整片资源内容(写在响应音讯包体内),HTTP
200;若最终修改时间较旧,表达资源无新修改,则响应HTTP 304
(无需包体,节省浏览),告知浏览器继续运用所保存的cache。

总结

浏览器第三遍呼吁:

亚洲必赢官网 , 亚洲必赢官网 13

浏览器再度恳请时:

亚洲必赢官网 14 

 

 

 

补充:

用户作为和缓存除了作者说的六种形式之外还有三种:

用户操作

Expires/Cache-Control

Last-Modified/Etag

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进、后退

有效

有效

F5刷新

无效

有效

Ctrl+F5刷新

无效

无效

刷新按钮

无效

无效

点击其他软件(QQ)打开页面 有效 有效

 

 Cache-Control 和 Expires

Expires 有个毛病,重返的到期时间是劳动器端的光阴,那样就会设有问题:借使客户端的时光与服务器的年华距离很大,那么误差就很大,所以在HTTP
1.1版起始,使用Cache-Control: max-age=秒替代。

Expires =max-age +   “每回下载时的眼前的request时间”

因而假诺重新下载的页面后,expires就重新总计几次,但last-modified不会变化

引用旁人做好的一个图来代表:

亚洲必赢官网 15

 

 

既生Last-Modified何生Etag?

你也许会以为使用Last-Modified已经足以让浏览器知道地方的缓存副本是不是丰硕新,为何还必要Etag(实体标识)呢?HTTP1.1中Etag的产出重大是为着缓解多少个Last-Modified相比难解决的问题:

l  Last-Modified标注的末尾修改只可以精确到秒级,即使某些文件在1分钟以内,被涂改多次以来,它将无法规范标注文件的改动时间

l  假诺某些文件会被限期生成,当有时内容并从未其余变更,但Last-Modified却改变了,导致文件没办法使用缓存

l  有可能存在服务器并未可信获取文件修改时间,或者与代理服务器时间差异等等气象

Etag是服务器自动生成或者由开发者生成的附和资源在劳务器端的绝无仅有标识符,可以越发准确的支配缓存。Last-Modified与ETag**是可以一起行使的,服务器会先行验证ETag**,一致的情状下,才会持续比对Last-Modified,最终才决定是不是重返304

Etag/If-None-Match

Etag/If-None-Match也要同盟Cache-Control使用。


Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器觉得)。Apache中,ETag的值,默许是对文件的索引节(INode),大小(Size)和末段修改时间(M提姆e)举办Hash后取得的


If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage注解,则再度向web服务器请求时带上头If-None-Match
(Etag的值)web服务器收到请求后发现有头If-None-Match
则与被呼吁资源的对应校验串进行比对,决定回到200或304

用户作为与缓存

浏览器缓存行为还有用户的表现有关!!!

用户操作

Expires/Cache-Control

Last-Modified/Etag

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进、后退

有效

有效

F5刷新

无效

有效

Ctrl+F5刷新

无效

无效

既生Last-Modified何生Etag?

你可能会以为选用Last-Modified已经得以让浏览器知道地点的缓存副本是或不是充足新,为何还须要Etag(实体标识)呢?HTTP1.1中Etag的产出重大是为着化解多少个Last-Modified相比难化解的问题:


Last-Modified标注的末段修改只可以精确到秒级,要是某些文件在1分钟以内,被涂改很多次以来,它将不可能可信标注文件的修改时间


如果某些文件会被限期生成,当有时内容并从未别的变更,但Last-Modified却改变了,导致文件没办法使用缓存


有可能存在服务器并未确切获取文件修改时间,或者与代理服务器时间不同等等情景

Etag是服务器自动生成或者由开发者生成的照应资源在劳务器端的唯一标识符,能够更进一步纯粹的控制缓存。Last-Modified与ETag是可以共同利用的,服务器会先行验证ETag,一致的图景下,才会连续比对Last-Modified,最终才控制是不是再次来到304

总结

浏览器第四回呼吁:

亚洲必赢官网 16

 

浏览器再一次恳请时:

 

 亚洲必赢官网 17

 

用户作为与缓存

浏览器缓存行为还有用户的表现有关!!!

用户操作 Expires/Cache-Control Last-Modified/Etag
地址栏回车 有效 有效
页面链接跳转 有效 有效
新开窗口 有效 有效
前进、后退 有效 有效
F5刷新 无效 有效
Ctrl+F5刷新 无效 无效

总结

浏览器第四回呼吁:

亚洲必赢官网 18

浏览器再度请求时:

亚洲必赢官网 19

1 赞 6 收藏
评论

网站地图xml地图