浏览器缓存机制

浏览器缓存机制

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 二零零三04:25:57维生霉素T。

Web服务器告诉浏览器在2013-11-28 03:30:01以此时间点此前,能够行使缓存文件。发送请求的光阴是2013-11-28 03:25:01,即缓存六秒钟。

可是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

抑或地点13分请求,web服务器重返的Cache-Control头的值为max-age=300,即五分钟(和上边的Expires时间一模一样,那个不是必须的)。

皇家赌场手机版 4

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

 

浏览器缓存机制,其实首要便是**HTTP协议定义的缓存机制(如: Expires; Cache-control**等)。不过也有非HTTP协议定义的缓存机制,如利用HTML
Meta 标签,Web开发者可以在HTML页面包车型大巴<head>节点中参预<meta>标签,代码如下:

 

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

 

 

 

上述代码的功效是报告浏览器当前页面不被缓存,每一遍访问都必要去服务器拉取。使用上很简短,但唯有一部分浏览器能够支撑,而且装有缓存代理服务器都不帮忙,因为代理不解析HTML内容本身。

上面笔者第3介绍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 二零零一 04:25:57维生霉素T。

Web服务器告诉浏览器在二零一一-11-28
03:30:01那一个时间点以前,能够利用缓存文件。发送请求的年月是二〇一三-11-28
03:25:01,即缓存4分钟。

然而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)和结尾修改时间(MTime)举办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 

上边作者第3介绍HTTP协议定义的缓存机制。

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

既生Last-Modified何生Etag?

您可能会认为选拔Last-Modified已经得以让浏览器知道地点的缓存副本是或不是丰盛新,为啥还亟需Etag(实体标识)呢?HTTP1.第11中学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 二〇〇二04:25:57卡那霉素T。

Web服务器告诉浏览器在二零一三-11-28 03:30:01以此时间点此前,能够行使缓存文件。发送请求的时刻是二零一二-11-28 03:25:01,即缓存六分钟。

可是Expires 是HTTP 1.0的事物,未来默许浏览器均暗中同意使用HTTP 1.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)和最终修改时间(MTime)进行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消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

只怕地点11分请求,web服务器重回的Cache-Control头的值为max-age=300,即四分钟(和方面包车型客车Expires时间一致,那个不是必须的)。

 

Expires策略

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

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

皇家赌场手机版 11

注:Date头域表示新闻发送的命宫,时间的叙说格式由rfc822定义。例如,Date:
Mon,31 Dec 二〇〇三 04:25:57GMT。

Web服务器告诉浏览器在二〇一三-11-28
03:30:01以此时间点此前,能够使用缓存文件。发送请求的日子是2013-11-28
03:25:01,即缓存六分钟。

然而Expires 是HTTP 1.0的事物,以后默许浏览器均暗许使用HTTP
1.1,所以它的作用为主忽略。

既生Last-Modified何生Etag?

您大概会认为使用Last-Modified已经能够让浏览器知道地方的缓存副本是或不是丰富新,为何还亟需Etag(实体标识)呢?HTTP1.第11中学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,即4分钟(和地点的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就重新计算3遍,但last-modified不会变化

引用别人做好的1个图来表示:

皇家赌场手机版 15

 

 

既生Last-Modified何生Etag?

您大概会觉得使用Last-Modified已经能够让浏览器知道地方的缓存副本是不是丰富新,为啥还索要Etag(实体标识)呢?HTTP1.第11中学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)和结尾修改时间(MTime)举办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.第11中学Etag的面世根本是为着消除多少个Last-Modified相比较难消除的题材:


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


假诺有个别文件会被限期生成,当有时内容并没有别的变动,但Last-Modified却改变了,导致文件无法使用缓存


有大概存在服务器并未准确获取文件修改时间,也许与代理服务器时间不等同等状态

Etag是服务器自动生成可能由开发者生成的应和财富在服务器端的唯一标识符,可以越来越精确的决定缓存。Last-Modified与ETag是能够一并使用的,服务器会先行验证ETag,一致的景色下,才会连续比对Last-Modified,最终才决定是否再次来到304

总结

浏览器第3回呼吁:

皇家赌场手机版 16

 

浏览器再一次伸手时:

 

 皇家赌场手机版 17

 

用户作为与缓存

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

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

总结

浏览器第三回呼吁:

皇家赌场手机版 18

浏览器再度呼吁时:

皇家赌场手机版 19

1 赞 6 收藏
评论

Leave a Comment.