资讯专栏INFORMATION COLUMN

浏览器缓存

lijinke666 / 1672人阅读

摘要:服务器通过这两个首部字段告知客户端资源的缓存过期时间和缓存最大生命周期。客户端得知资源的缓存过期时间和最大生命周期后,即可自行判断是否可不建立与服务器的链接,直接从浏览器缓存中获取资源。

浏览器缓存
浏览器缓存分为强缓存和协商缓存

强缓存

客户端第一次问服务器要某个资源时,服务器丢还给客户端所请求的这个资源的同时,告诉客户端将这个资源保存在本地,并且在未来的某个时点之前如果还需要这个资源,直接从本地获取就可以,不用向服务器请求,这种方式缓存下来的资源称为强缓存。

强缓存利用http的返回头部中的Expires(实体首部字段)或者Cache-Control(通用首部字段)两个字段来控制,用来表示资源的缓存时间。

服务器通过这两个首部字段告知客户端资源的缓存过期时间和缓存最大生命周期。

客户端得知资源的缓存过期时间和最大生命周期后,即可自行判断是否可不建立与服务器的链接,直接从浏览器缓存中获取资源。

注:命中强缓存时,浏览器同样会收到status=200的respones,chrome中可通过size区分从服务器返回的资源还是强缓存获得的资源。

(1). Expires(http1.0的规范)

其值为一个绝对时间的GMT格式的时间字符串,代表缓存资源的过期时间,在该时点之前,即为命中缓存。

缺点:服务器返回的Expires时点是服务器上的时间,可能与客户端有时间差,时间差太大可能造成缓存混乱

(2). Cache-Control:max-age(http1.1的规范)

强缓存利用其max-age值来判断资源缓存的最大生命周期,它的值单位为秒。Cache-Control:max-age=3600代表资源有效时间为1小时,即从第一次获取该资源起一小时内的请求都被认为可命中强缓存。

注:Cache-Control描述的是相对时间,采用本地时间来计算资源的有效期,所以相比Expires更可靠

这两个Header可以只用其一,也可以一起使用。一起使用时以Cache-Control为准

协商缓存

客户端第一次问服务器要某个资源时,服务器丢给客户端所请求的这个资源的同时,将该资源的一些信息(文件摘要、或最后修改时间)也返回给客户端,告诉客户端将这个资源缓存在本地。当客户端下一次需要这个资源时,将请求以及相关信息(文件摘要、或者最后修改时间)一并发送给服务器,由服务器来判断客户端缓存的资源是否需要更新:如不需要更新,就直接告诉客户端获取本地缓存资源;如需要更新,则将最新的资源连同相应的信息一并返回给客户端。

当强缓存未命中时,浏览器就会发送请求到服务器,服务器会验证协商缓存是否命中,如果协商缓存命中,请求返回的http状态为304,并会显示说明Not Modified,浏览器收到该返回后,就会从缓存中加载了。

协商缓存利用[Last-Modified , If-Modified-Since] 和 [ETag , If-None-Match]这两对Header来管理。

(1). Last-Modified & If-Modified-Since

Last-Modified为实体首部字段,值为资源最后更新时间,随服务器response返回。

If-Modified-Since为请求首部字段,通过比较两个时间来判断资源在两次请求期间是否有过修改,如果没有修改,则命中协商缓存,浏览器从缓存中获取资源;如果有过修改,则服务器返回资源,同时返回新的Last-Modified时间

(2). ETag & If-None-Match

ETag为相应头部字段,表示资源内容的唯一标识,随服务器response返回

If-None-Match为请求头部字段,服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改,如果没有修改,则命中协商缓存,浏览器从缓存中获取资源;如果有过修改,则服务器返回资源,同时返回新的ETag

协商缓存管理:

    [Last-Modified , If-Modified-Since]和[ETag , If-None-Match]一般同时启用,这是为了处理Last-Modified不可靠的情况。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51604.html

相关文章

  • 深入剖析览器缓存策略

    摘要:浏览器缓存只存在于每个单独的客户端,因此它是私有缓存。表示该资源既能被浏览器缓存,也能被任何中间人比如代理服务器等缓存。普通刷新会启用协商缓存,忽略强缓存。只有在地址栏或收藏夹输入网址通过链接引用资源等情况下,浏览器才会启用强缓存。 前言 在访问一个网页时,客户端会从服务器下载所需的资源。但是有些资源很少发生变动,例如 HTML、JS、CSS、图片、字体文件等。如果每次加载页面都从源服...

    Cympros 评论0 收藏0
  • 览器缓存机制

    摘要:从浏览器角度来看,整个就是一个源服务器,从这个层面来说,浏览器和服务器之间的缓存机制,在这种架构下同样适用。如果命中,则返回,告诉浏览器资源未更新,可使用本地的缓存。 缓存类型 缓存在宏观上可以分成两类:私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的,各级代理不能缓存的缓存。 微观上可以分下面几类: 浏览器缓存 缓存存在的意义就是当用户点击back按...

    LeanCloud 评论0 收藏0
  • 【前端基础进阶】览器缓存机制

    摘要:接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。在所有浏览器缓存中,覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为...

    Mertens 评论0 收藏0
  • 深入理解览器缓存机制

    摘要:接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。在所有浏览器缓存中,覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分...

    binaryTree 评论0 收藏0
  • 深入理解览器缓存机制

    摘要:接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。在所有浏览器缓存中,覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分...

    mikasa 评论0 收藏0
  • 深入理解览器缓存机制

    摘要:接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。在所有浏览器缓存中,覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分...

    draveness 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<