浏览器缓存小结

raise_yang 发布于2019-08-06 13:22 / 956人阅读

摘要：告知浏览器我希望内容来自缓存我并不关心被缓存响应是否是新鲜的。客户端请求验证缓存的有效性。

因为最近面试经常会被问到304缓存的问题，因此在网上搜集了各种资料，小记一下

缓存有浏览器缓存，代理服务器缓存，服务端缓存等，这里着重记一下浏览器缓存

浏览器第一次像服务器发起请求时，如果有缓存，浏览器在返回信息里面会带上相应的缓存策略，下面介绍一下有哪些常用的缓存策略。

Expires 过期时间，这是HTTP1.0就有的。客户端在首次请求服务器资源的时候服务器设置一个资源的过期时间，这个时间是绝对的，如果设置的缓存策略是这个，那么浏览器再次请求的时候会跟所请求资源的过期时间比对一下，如果在过期时间之内，那么从本地读取，否则会看看是否设置了其他缓存策略，按照其他策略来，没有的话就向服务器发起请求了。我们可以看出，这个是否发起请求跟客户端本地时间有很大关系，如果时间设置的不对，那么缓存策略就有可能失效。

Cache-control 这一项的可选值有 max-age／no-cache/no-store/public/private／must-revalidate/s-maxage
这里面最常用到的有max-age／no-cache/no-store， max-age

max-age 会设置一个相对的过期秒数，即从首次请求算起，在这一段时间内都不会过期。
no-cache 响应是可以被缓存的，只不过再跟服务器进行新鲜度匹配之前都不会提供给客户端使用。所以应该叫do-not-serve-from-cache-without-revalidation更好一点。
no-store 绝对禁止缓存，客户端缓存不能复制响应，之后的每次请求都从服务器获取资源。
must-revalidate 在跟服务器进行新鲜度验证之前，缓存不可以把缓存的响应给浏览器。如果原始服务器不可用，会返回504 Gateway Timeout的错误。
only-if-cached 告知浏览器,我希望内容来自缓存,我并不关心被缓存响应,是否是新鲜的。

Last-modified
在浏览器第一次请求某一个资源时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间。

客户端请求验证缓存的有效性。

If-modified-since

客户端再次请求某个资源时请求头会带上这个属性。验证在上次修改的时间之后是否有再次修改。

If-none-match

客户端再次请求某个资源时请求头会带上这个属性。属性值是第一次请求该资源时返回的etag值
验证在上次修改之后是否有新的版本。

缓存命中速度

缓存命中 > 缓存再验证成功 > 缓存未命中 = 缓存再验证失败；

缓存命中优先级

Cache-Control http1.1 > Expires > Pragma http1.0来决定是否 (200 from cache)

根据Last-Modified http1.0 和 ETag http1.1 来验证是否返回 (304 Not Modified) 两者都有，就必须同时验证，并且两者都满足才会返回304；

盗图一张，整个的浏览器请求的时候缓存验证过程如下图

首先看有没有缓存，没有的话直接请求服务器，这时候没出意外的话，正常地返回应该是200
有缓存然后看是否过期，没过期的话就用缓存的资源了这时候不会发器请求
如果过期了再向服务器发起请求看资源是否有修改，如果没修改则返回304，如果修改了则返回200连同最新的资源一起返回，更新浏览器缓存副本。

参考文章

https://segmentfault.com/a/11...

https://my.oschina.net/leejun...

http://blog.csdn.net/pojianbi...

https://segmentfault.com/a/11...

云服务器 GPU云服务器浏览器缓存清除浏览器缓存 cdn浏览器缓存 webrtc浏览器接收缓存

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

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

高性能JavaScript（文档）

摘要：最近在全力整理高性能的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。最近在全力整理《高性能JavaScript》的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。前端开发文档高性能JavaScript 第1章：加载和执行脚本位置阻止脚本无阻塞的脚本延迟的脚本动态脚本元素 XMLHTTPRequest脚本注入推荐的无阻塞模式...

RayKr 2019-08-22 18:32 评论0 收藏0
http 缓存小结

摘要：为了优化性能，使用缓存是一种比较常见的手段。由于篇幅原因，本篇重点讲述缓存。缓存未命中达缓存的请求没有副本可用，而被转发给原始服务器，与缓存命中相反。协商缓存协商缓存是在用户强缓存失败的情况下，向服务器端进行再验证。为了优化性能，使用缓存是一种比较常见的手段。那么如何实现缓存以及如何避免缓存呢，都是要探讨的话题。可以从三个部分：http 缓存、cookie、localStorage&...

miguel.jiang 2019-08-06 13:41 评论0 收藏0
Web站点缓存技术小结

摘要：导言本文将列举站点常用缓存技术的基本概念与特点，为想要了解缓存技术的读者们提供提纲式的技术介绍。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。参考连接网站缓存技术总结高性能网站的关键缓存静态资源缓存导言：本文将列举web站点常用缓存技术的基本概念与特点，为想要了解web缓存技术的读者们提供提纲式的技术介绍。在互联网迅速发展的今天，一个互联网站点的请求量是十分惊人的，动辄上...

printempw 2019-08-06 13:21 评论0 收藏0
CDN小结

摘要：二目的是一个经策略性部署的整体系统，从技术上全面解决由于网络带宽小用户访问量大网点分布不均而产生的用户访问网站响应速度慢的根本原因。一、CDN全称: Content Delivery Network或Content Ddistribute Network，即内容分发网络。二、目的： CDN是一个经策略性部署的整体系统，从技术上全面解决由于网络带宽小、用户访问量大、网点分布不...

cod7ce 2019-08-23 11:36 评论0 收藏0
浏览器缓存小结

摘要：原文链接浏览器缓存浏览器缓存强缓存协商缓存强缓存释义客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，告诉客户端将这个资源保存在本地，并且在未来的某个时点之前如果还需要这个资源，直接从本地获取就行了，不用向服务器请求原文链接:浏览器缓存浏览器缓存强缓存 & 协商缓存强缓存释义: 客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源...

pepperwang 2019-08-23 13:43 评论0 收藏0