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

浏览器缓存机制

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提姆(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

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

抑或地方非常请求,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 收藏
评论

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website