浏览器的缓存机制

Channe 发布于2019-08-22 13:54 / 2417人阅读

摘要：缓存类型强缓存协商缓存强缓存不会向服务器发请求，直接从浏览器的缓存里面读取。协商缓存会向服务器发送请求，服务器会根据里面的参数判断是否命中缓存，如果命中就会返回，并且带上新的返回通知浏览器从缓存文件里面读取数据。

1:缓存类型

 1：强缓存
 2：协商缓存

1: 强缓存：不会向服务器发请求，直接从浏览器的缓存里面读取。状态码为200，size为from disk cache 或者 from memory cache。

2: 协商缓存：会向服务器发送请求，服务器会根据request header里面的参数判断是否命中缓存，如果命中就会返回304，并且带上新的response header返回通知浏览器从缓存文件里面读取数据。

2: 与强缓存相关的request header

1: Expires
2: Cache-Control

先来看一下各自的用法：

1: Expires: Wed, 21 Oct 2015 07:28:00 GMT
2: Cache-Control: "max-age=60"

Expires设置的是一个在服务器端的绝对时间，意思是在这个绝对之间之前的请求，浏览器都直接从浏览器本地的缓存里面读取资源，不发请求。
Cache-Control: "max-age=60" 里面的60，单位是秒，以上设置的意思是指之后的60秒以内的请求都从浏览器本地缓存里面读取，不发请求。
Expires是http1.0的，而Cache-Control是http1.1的，当两者都有的时候，是Cache-Control生效。只有在不支持http1.1的情况下，Expires才生效。
Expires属于response header, 但是，Cache-Control即可以出现在request header里面，也可以出现在response header里面，它的值也还有很多，下一篇再细讲。

3: 协商缓存
跟协商缓存相关的header主要有四个，其中request header 2个，response header 2个。
1: request header

1: If-None-Match
2: If-Modified-Since

2: response header

1: Etag
2: Last-Modified

1: 先解释一下2个response header是什么：
Etag
Etag是资源的唯一标识，只要资源发生变化，Etag就是重新生成。Etag会在上一次资源加载时，通过reponse header返回，浏览器会把这个Etag保存起来。
Last-Modified
Last-Modified是资源最后一次被修改的时间，也是通过response header返回，浏览器也会把这个时间保存起来。
2: 再来看看这2个response header怎么用
浏览器在请求的时候，会把Etag的值赋给If-None-Match；把Last-Modified的值给If-Modified-Since,也就是：

If-None-Match: ${Etag}
If-Modified-Since: ${Last-Modified}

服务器处理这条请求，拿到这次的Etag和Last-Modified的值与服务器上的资源的Etag和Last-Modified比较，如果相同，那就命中协商缓存。

这两队的作用是一样的，但是都有各自的优缺点：
1: 精确度
Etag > Last-Modified
因为Last-Modified的精读是秒，如果一个文件在一秒之内改变了很多次，那Last-Modified不会变。但是Etag是只要资源发生变化，Etag就会更新，那缓存的命中率就会高一些，也可以说是更精确。
2: 性能
Last-Modified > Etag
因为Last-Modified只需要保存一个时间值就好，而Etag需要服务器用算法算一个hash值。
3: 优先级
Etag> Last-Modified

PS: 虽然在上面的内容里面，在cache-control出现在强缓存那节，协商缓存也没有提到cache-control，但是cache-control的某些情况下也会触发协商缓存，这个内容在下一篇文章再讲。

GPU云服务器云服务器三级缓存机制 cdn缓存机制 php缓存机制 android缓存机制

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

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

Web缓存相关知识整理

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

rickchen 2019-08-06 13:23 评论0 收藏0
H5 缓存机制浅析 - 移动端 Web 加载性能优化

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

alin 2019-08-06 13:14 评论0 收藏0
浏览器缓存是什么？它的机制又是什么？

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

jsummer 2019-08-06 13:37 评论0 收藏0
浏览器缓存是什么？它的机制又是什么？

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

godruoyi 2019-08-16 13:43 评论0 收藏0
浏览器的缓存机制

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

LeanCloud 2019-08-06 13:41 评论0 收藏0