菜单

浏览器缓存机制浅析(转)

2019年2月15日 - 金沙前端

浏览器缓存机制浅析

2015/08/05 · HTML5 · 1
评论 ·
缓存

本文笔者: 伯乐在线 –
韩子迟
。未经小编许可,禁止转发!
迎接插足伯乐在线 专栏撰稿人。

非HTTP协议定义的缓存机制

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

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

  上述代码的作用是告诉浏览器当前页面不被缓存,每一回访问都亟需去服务器拉取。使用上很简短,但唯有一些浏览器可以支撑,而且装有缓存代理服务器都不资助,因为代理不解析HTML内容本身。下边首要介绍HTTP协议定义的缓存机制

浏览器缓存机制浅析

非HTTP协议定义的缓存机制

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

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

  上述代码的效果是报告浏览器当前页面不被缓存,每一次访问都急需去服务器拉取。使用上很粗略,但只有一些浏览器可以协理,而且拥有缓存代理服务器都不援救,因为代理不解析HTML内容作者。上边紧要介绍HTTP协议定义的缓存机制

非HTTP协议定义的缓存机制

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

XHTML

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

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

上述代码的功用是告诉浏览器当前页面不被缓存,每一回访问都亟需去服务器拉取。使用上很简短,但只有一部分浏览器可以协助,而且装有缓存代理服务器都不帮助,因为代理不解析HTML内容自身。下边紧要介绍HTTP协议定义的缓存机制

高调浏览器缓存

  浏览器缓存一向是3个令人又爱又恨的留存,一方面极大地升级了用户体验,而单方面有时会因为读取了缓存而显得了“错误”的东西,而在支付进度中费尽脑筋地想把缓存禁掉。

  那么浏览器缓存机制到底是怎么办事的啊?焦点就是把缓存的始末保留在了本土,而不用每趟都向服务端发送相同的央求,设想下每一遍都开辟相同的页面,而在率先次打开的还要,将下载的js、css、图片等“保存”在了本地,而自此的请求每一回都在本地读取,功用是还是不是高了过多?真正的浏览器工作的时候并不是将全体的内容保留在当地,各个浏览器都有两样的办法,譬如firefox是一种恍若innodb的点子存储的key
value 的格局,在地方栏中输入 about:cache
可以望见缓存的公文,chrome会把缓存的公文保留在1个叫User
Data的文件夹下。不过一旦老是都读取缓存也会设有一定的题材,固然服务端的文本更新了吧?这时服务端就会和客户端约定两个有效期,譬如说服务端告诉客户端1天内作者服务端的文件不会更新,你就放心地读取缓存吧,于是在这一天里老是遭遇相同的伸手客户端都欢呼雀跃地得以读取缓存里的公文。不过假诺一天过去了,客户端又要读取该公文了,发现和服务端约定的有效期过了,于是就会向服务端发送请求,试图下载一个新的公文,不过很有大概服务端的公文其实并从未更新,其实还可以读取缓存的。那时该怎么判断服务端的文书有没有更新呢?有二种艺术,第壹种在上三回服务端告诉客户端约定的有效期的还要,告诉客户端该文件最后修改的时间,当再一次准备从服务端下载该公文的时候,check下该文件有没有更新(相比较最后修改时间),如果没有,则读取缓存;第2种方法是在上一回服务端告诉客户端约定有效期的还要,同时报告客户端该公文的版本号,当服务端文件更新的时候,改变版本号,再一次发送请求的时候check一下版本号是或不是相同就行了,如一致,则可一向读取缓存。

  而实质上真正的浏览器缓存机制大抵也是这么,接下去就足以分别对号入座了。

  须要留意的是,浏览器会在率先次呼吁完服务器后拿走响应,大家得以在服务器中安装这个响应,从而达到在现在的伸手中尽量缩短甚至不从服务器获取能源的目标。浏览器是依靠请求和响应中的的头新闻来控制缓存的

非HTTP协议定义的缓存机制

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

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

  上述代码的效益是报告浏览器当前页面不被缓存,每回访问都急需去服务器拉取。使用上很粗略,但唯有局地浏览器可以支撑,而且拥有缓存代理服务器都不协理,因为代理不解析HTML内容我。上边主要介绍HTTP协议定义的缓存机制。

高调浏览器缓存

  浏览器缓存一向是二个令人又爱又恨的留存,一方面极大地升级了用户体验,而单方面有时会因为读取了缓存而显得了“错误”的东西,而在支付进度中左思右想地想把缓存禁掉。即使没听旁人说过浏览器缓存大概不知道浏览器缓存的用处,可以先浏览一下那篇小说->Web缓存的效能与品种。

  那么浏览器缓存机制到底是什么行事的吗?宗旨就是把缓存的内容保留在了地面,而不用每一次都向服务端发送相同的请求,设想下每便都开辟相同的页面,而在首先次打开的还要,将下载的js、css、图片等“保存”在了当地,而之后的呼吁每一次都在本地读取,功用是还是不是高了重重?真正的浏览器工作的时候并不是将完整的情节保留在该地,种种浏览器都有例外的主意,譬如firefox是一种恍若innodb的法门存储的key
value 的情势,在地方栏中输入 about:cache
可以望见缓存的公文,chrome会把缓存的公文保留在二个叫User
Data的文件夹下。可是如果每一趟都读取缓存也会设有一定的题目,倘诺服务端的文本更新了吧?那时服务端就会和客户端约定二个有效期,譬如说服务端告诉客户端1天内小编服务端的文件不会更新,你就放心地读取缓存吧,于是在这一天里老是蒙受相同的伏乞客户端都开玩笑地得以读取缓存里的公文。不过假设一天过去了,客户端又要读取该公文了,发现和服务端约定的有效期过了,于是就会向服务端发送请求,试图下载一个新的文本,不过很有可能服务端的公文其实并从未更新,其实仍是可以读取缓存的。那时该怎么判断服务端的文书有没有立异呢?有二种艺术,第三,种在上五遍服务端告诉客户端约定的有效期的还要,告诉客户端该文件最终修改的时日,当再一次准备从服务端下载该公文的时候,check下该公文有没有更新(比较最终修改时间),假如没有,则读取缓存;第壹种方法是在上五回服务端告诉客户端约定有效期的还要,同时报告客户端该公文的本子号,当服务端文件更新的时候,改变版本号,再度发送请求的时候check一下版本号是不是一致就行了,如一致,则可间接读取缓存。

  而实际真正的浏览器缓存机制大抵也是这么,接下去就足以分别对号入座了。

  须求留意的是,浏览器会在第一回呼吁完服务器后得到响应,大家得以在服务器中安装这个响应,从而落成在随后的请求中尽量裁减甚至不从服务器获取能源的目标。浏览器是凭借请求和响应中的的头信息来控制缓存的

高调浏览器缓存

浏览器缓存一向是二个令人又爱又恨的留存,一方面极大地升级了用户体验,而单方面有时会因为读取了缓存而显得了“错误”的东西,而在开发进度中挖空心思地想把缓存禁掉。如果没传说过浏览器缓存只怕不领悟浏览器缓存的用途,可以先浏览一下这篇小说->Web缓存的效应与品种 。

那就是说浏览器缓存机制到底是怎样工作的呢?宗旨就是把缓存的始末保留在了本地,而不用每趟都向服务端发送相同的央浼,设想下每趟都开辟相同的页面,而在首先次打开的同时,将下载的js、css、图片等“保存”在了当地,而从此的伸手每便都在地头读取,效能是还是不是高了好多?真正的浏览器工作的时候并不是将全体的内容保留在地点,各样浏览器都有例外的艺术,譬如firefox是一种恍若innodb的不二法门存储的key
value 的形式,在地方栏中输入 about:cache
可以看见缓存的公文,chrome会把缓存的公文保留在1个叫User
Data的文书夹下。可是假若每一回都读取缓存也会设有一定的题材,如若服务端的文件更新了呢?那时服务端就会和客户端约定一个有效期,譬如说服务端告诉客户端1天内小编服务端的文书不会更新,你就放心地读取缓存吧,于是在这一天里老是碰到同样的伸手客户端都开玩笑地可以读取缓存里的公文。不过即使一天过去了,客户端又要读取该公文了,发现和服务端约定的有效期过了,于是就会向服务端发送请求,试图下载一个新的公文,可是很有大概服务端的文件其实并不曾创新,其实依旧足以读取缓存的。这时该怎么判断服务端的公文有没有立异呢?有二种形式,第二,种在上五遍服务端告诉客户端约定的有效期的还要,告诉客户端该公文最后修改的大运,当再度准备从服务端下载该公文的时候,check下该公文有没有立异(比较末了修改时间),假若没有,则读取缓存;第一种办法是在上一遍服务端告诉客户端约定有效期的还要,同时报告客户端该公文的本子号,当服务端文件更新的时候,改变版本号,再度发送请求的时候check一下版本号是不是同样就行了,如一致,则可直接读取缓存。

而事实上真正的浏览器缓存机制大抵也是那般,接下去就足以分级对号入座了。

亟待留意的是,浏览器会在率先次呼吁完服务器后拿到响应,大家得以在服务器中安装这一个响应,从而达到在之后的央浼中尽量缩短甚至不从服务器获取财富的目标。浏览器是依赖请求和响应中的的头音信来决定缓存的

Expires与Cache-Control

  Expires和Cache-Control就是劳动端用来预定和客户端的管用时间的。

  图片 1

  比如如上一个响应头,Expires规定了缓存失效时间(Date为当下时刻),而Cache-Control的max-age规定了缓存有效时间(2552s),理论上那多个值统计出的可行时间应该是如出一辙的(上图近似不均等)。Expires是HTTP1.0的东西,而Cache-Control是HTTP1.1的,鲜明一经max-age和Expires同时存在,前者优先级高于后者。Cache-Control的参数可以设置过多值,譬如(参考浏览器缓存机制):

图片 2

高调浏览器缓存

  浏览器缓存一向是贰个令人又爱又恨的留存,一方面极大地提高了用户体验,而单方面有时会因为读取了缓存而显得了“错误”的事物,而在支付进度中大费周章地想把缓存禁掉。

  那么浏览器缓存机制到底是什么行事的啊?宗旨就是把缓存的内容保留在了当地,而不用每一遍都向服务端发送相同的呼吁,设想下每一回都开辟相同的页面,而在首先次打开的还要,将下载的js、css、图片等“保存”在了本土,而从此的哀告每回都在地面读取,成效是否高了广大?真正的浏览器工作的时候并不是将总体的始末保留在本土,各类浏览器都有区其余章程,譬如firefox是一连串似innodb的措施存储的key
value 的形式,在地方栏中输入 about:cache
可以瞥见缓存的文本,chrome会把缓存的公文保留在三个叫User
Data的文件夹下。但是只要每一次都读取缓存也会设有一定的难点,倘使服务端的文书更新了吧?那时服务端就会和客户端约定2个有效期,譬如说服务端告诉客户端1天内我服务端的文件不会更新,你就放心地读取缓存吧,于是在这一天里老是遇到相同的请求客户端都开玩笑地得以读取缓存里的公文。不过假诺一天过去了,客户端又要读取该文件了,发现和服务端约定的有效期过了,于是就会向服务端发送请求,试图下载二个新的公文,可是很有可能服务端的文书其实并从未立异,其实还是可以够读取缓存的。那时该怎么判断服务端的公文有没有创新呢?有三种方法,第叁种在上一遍服务端告诉客户端约定的有效期的还要,告诉客户端该文件最终修改的年华,当再一次准备从服务端下载该公文的时候,check下该文件有没有更新(比较最终修改时间),就算没有,则读取缓存;第一种艺术是在上三遍服务端告诉客户端约定有效期的还要,同时报告客户端该文件的版本号,当服务端文件更新的时候,改变版本号,再度发送请求的时候check一下版本号是不是一律就行了,如一致,则可径直读取缓存。

  而实际上真正的浏览器缓存机制大抵也是那样,接下去就足以分级对号入座了。

  须要留意的是,浏览器会在率先次呼吁完服务器后拿走响应,我们得以在服务器中设置那个响应,从而达到在今后的呼吁中尽量裁减甚至不从服务器获取财富的目标。浏览器是借助请求和响应中的的头音信来支配缓存的。

Expires与Cache-Control

  Expires和Cache-Control就是劳动端用来预订和客户端的灵光时间的。

  图片 3

  比如如上1个响应头,Expires规定了缓存失效时间(Date为近日时刻),而Cache-Control的max-age规定了缓存有效时间(2552s),理论上那七个值统计出的管事时间应当是一样的(上图近似不一致)。Expires是HTTP1.0的东西,而Cache-Control是HTTP1.1的,显然一经max-age和Expires同时存在,前者优先级高于后者。Cache-Control的参数可以设置过多值,譬如(参考浏览器缓存机制):

图片 4

相关文章

发表评论

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

网站地图xml地图