资讯专栏INFORMATION COLUMN

浏览器的缓存机制

娣辩孩 / 2377人阅读

摘要:浏览器缓存浏览器缓存是将文件保存在客户端。是服务器响应消息头字段,在响应请求时告诉浏览器在过期时间内浏览器可以直接从浏览器缓存读取数据,无需再次请求。

缓存分类

web缓存分为很多种,比如数据库缓存、代理服务器缓存、CDN缓存,以及浏览器缓存。
浏览器通过代理服务器向源服务器发起请求的原理如图。

浏览器先向代理服务器发起Web请求,再将请求发到源服务器。它属于共享缓存,所以很多地方都可以使用其缓存资源,所以节省了很多流量。

浏览器缓存

浏览器缓存是将文件保存在客户端。在同一个回话过程中检查缓存的副本是否足够新,在后退网页时,访问过的资源可以从浏览器缓存中拿出来使用。

浏览器一般都是通过http缓存的,但是也可以通过其他方式,如在html页面中的meta标签增加属性,但不是所有浏览器都支持的,因为有些浏览器不能理解HTML内容本身


HTTP中的header来控制的缓存

大多数的浏览器缓存都是有http的header所决定的。

Expires

Expires: 是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间内浏览器可以直接从浏览器缓存读取数据,无需再次请求。但是Expires是HTTP1.0的东西,在HTTP1.1中,他的作用基本上可以忽略。

1.max-age 指定设置缓存最大的有效时间,定义的是时间长短。当浏览器向服务器发送请求后,在max-age这段时间里,浏览器就不会再向服务器发送请求了。

2.s-maxage与max-age一样,只用于共享缓存(如CDN缓存)。如s-maxage=60,在这60秒呢,即使更新了CDN的内容,浏览器呀不会发送请求。max-age用于普通缓存,而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖掉max-age和Expires header.

3.public指定响应会被缓存,并且在多用户间共享。默认是public。

private响应只为私有缓存,不能在用户间共享

4.设置no-chache表明资源不进行缓存,但是设置了no-cache之后,并不代表浏览器不缓存,而是在缓存前要向浏览器确认资源是否被更改。有的时候只设置no-cache防止缓存还是不够保险,还可以加上private指令,将过期时间设为过去的时间。

Cache-control策略

Cache-control策略:与Expires的作用是一致的,都是指当前资源的有效期,控制浏览器是直接从浏览器缓存中存取数据,还是重新发送请求到服务器取数据。它的优先级高于Expires,而且它的选择更多,设置也更细致。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用

Last-Modified: 表示这个资源的最后修改时间。Web服务器在响应请求时,告诉浏览器资源的最后修改时间。当浏览器再次进行请求时,会向服务器传送If-Modified-Since抱头,询问Last-Modified时间点之后资源是否被修改。

If-Modified-Since: 当资源过期时(用Cache-Control标识的max-age),发现资源具有Last-Modified声明,则再次向Web服务器请求头带上If-Modified-Since,表示请求时间。Web服务器收到请求后发现有头信息If-Modified-Since,则与被请求资源的最后修改时间进行比较。若最后修改时间比较新,说明资源修改过,则返回相应整片资源内容(卸载响应消息包体内),HTTP Code为200; 若最后修改时间比较旧,说明资源没有更新,则相应的HTTP Code为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),发现资源具有ETag声明,则再次向Web服务器请求时带上头信息If-None-Match(ETag的值)。Web服务器收到请求后,头信息If-None-Cache与被请求的资源进行校验串比较,然后返回200或者304.

你可能觉得Last-Modified已经足够让浏览器知道本地缓存是否是最新的,为什么还是要增加ETag呢?
HTTP1.1中的ETag的出现主要为了解决几个Last-Modified中比较难解决的问题:

Last-Modifed标注的最后修改只能精确到秒,如果某些文件在1秒以内,被修改多次的话,它将不能准确标注文件的修改时间

某些文件会被定期生成,当时内容并没有发生任何变化,但Modified却变了,导致文件没法使用缓存

有可能存在服务器没有准确获取文件修改时间,或者与代理服务器的时间不一致等情形

ETag是服务器自动生成,或者由开发者对生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag可以一起使用,服务器会优先验证ETag,一致的情况下,才会继续对Last-Modifed,最后才决定是否返回304.

cache-control指令的使用

用户行为和缓存




几篇不错的缓存的文章

浏览器缓存知识小结及应用
浏览器缓存

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

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

相关文章

  • Web缓存相关知识整理

    摘要:缓存缓存,也叫网关缓存反向代理缓存。浏览器先向网关发起请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享,但却拥有更好的处扩展性。 一、前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API ...

    rickchen 评论0 收藏0
  • H5 缓存机制浅析 - 移动端 Web 加载性能优化

    摘要:根据标准,到目前为止,一共有种缓存机制,有些是之前已有,有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。 腾讯 Bugly 特约作者:贺辉超 1. H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web ...

    alin 评论0 收藏0
  • 览器缓存是什么?它机制又是什么?

    摘要:对于浏览器缓存,相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说,浏览器缓存就是把一个已经请求过的资源如页面,图片,,数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了错误的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

    jsummer 评论0 收藏0
  • 览器缓存是什么?它机制又是什么?

    摘要:对于浏览器缓存,相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说,浏览器缓存就是把一个已经请求过的资源如页面,图片,,数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了错误的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

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

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

    LeanCloud 评论0 收藏0

发表评论

0条评论

娣辩孩

|高级讲师

TA的文章

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