浏览器缓存机制

by admin on 2019年2月11日

浏览器缓存机制

2015/12/01 · HTML5 ·
HTTP

原稿出处:
吴秦   

浏览器缓存机制

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

上述代码的职能是告诉浏览器当前页面不被缓存,每一趟访问都急需去服务器拉取。使用上很简短,但只有一对浏览器可以支撑,而且富有缓存代理服务器都不协理,因为代理不解析HTML内容我。

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

近来在做页面分析的时候发现页面F5刷新时,一大半原本已经缓存的内容的情状成为了304,格外不解,原来想好雅观看是何等原因的。结果发现园里已经有人剖析的很绝望了。

浏览器缓存机制

原文出处:
吴秦   

Expires策略

浏览器缓存机制。Expires是Web服务器响应音信头字段,在响应http请求时报告浏览器在逾期岁月前浏览器缓存机制。浏览器能够直接从浏览器缓存取数据,而无需再度请求。

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

必发88 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**。必发88 3

大概地点至极请求,web服务器重临的Cache-Control头的值为max-age=300,即5分钟(和地方的Expires时间一模一样,那些不是必须的)。

必发88 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服务器的响应头:

必发88 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时间相同,那几个不是必须的)。

必发88 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必发88,**,一致的气象下,才会持续比对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内容本身。

用户作为与缓存

浏览器缓存行为还有用户的一言一动有关!!!必发88 7

总结

浏览器第两遍呼吁:

必发88 8

浏览器再度呼吁时:

必发88 9

2 赞 12 收藏
评论

必发88 10

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

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

  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服务器的响应头:

必发88 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时间一致,那一个不是必须的)。

必发88 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)和尾声修改时间(M提姆e)举办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。

总结

浏览器首次呼吁:

 必发88 13

浏览器再度恳请时:

必发88 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不会变化

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

必发88 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

总结

浏览器第二回呼吁:

必发88 16

 

浏览器再一次呼吁时:

 

 必发88 17

 

用户作为与缓存

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

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

总结

浏览器第一遍呼吁:

必发88 18

浏览器再次呼吁时:

必发88 19

1 赞 6 收藏
评论

发表评论

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

网站地图xml地图