[7]能不能说一说浏览器缓存

前言

浏览器缓存有两种：强制缓存和协商缓存

浏览器第一次发送http请求

结论：

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

强制缓存

强制缓存三种情况：不存在强制缓存，存在强制缓存但是已失效，存在强制缓存且有效

①不存在强制缓存

②存在强制缓存但是已失效

③存在强制缓存且有效

看完上面三张图，大家有没有疑问，就是我是怎么知道有没有缓存，然后缓存是否失效的呢？

这里就涉及到了一些缓存标识：Expires和Cache-Control【这里通过network看看】

Expires是HTTP/1.0控制网页缓存的字段；其字段内容是到期时间。这个到期时间是有bug的。因为我们缓存的是服务器时间，但是比对的时候是使用客户端时间，这样服务器时间和客户端时间可能有时区差异，导致缓存失效。

Cache-Control是HTTP/1.1控制网页缓存的字段；其字段内容是如下：

public：所有内容都将被缓存（客户端和代理服务器都可缓存）

private：所有内容只有客户端可以缓存，Cache-Control的默认取值

no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定【使用缓存，但是需要经过协商缓存】

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存【完全不缓存】

max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效【使用相对时间】

Cache-Control 优先级高于Expires

在network中，我们可能看到size是这样的（打开一个网站，然后刷新一下）

内存缓存(from memory cache)

硬盘缓存(from disk cache)

通过这个字样，我们知道请求数据是直接从缓存中取得的

协商缓存

包括两种情况：

1.协商成功

2.协商失败

那怎么判断协商缓存是否成功呢？【打开network看看】

Last-Modified / If-Modified-Since：表示文件什么时间修改的

Etag / If-None-Match: 由资源的内容而生产的唯一标识符

客户端存的是：If-Modified-Since 和 If-None-Match

服务器端的是：Last-Modified 和 Etag

然后由服务器端去成对匹配，一致的话就直接协商成功，否则协商失败！！！

其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。原因有三：

①一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候,我们并不希望客户端认为这个文件被修改了,而重新 get

②某些文件修改非常频繁,比如在秒以下的时间内进行修改(比方说 1s 内修改了 N 次),If-Modified-Since能检查到的粒度时 s 级的,这种修改无法判断

③某些服务器不能精确得到的文件的最后修改时间

最后总结：

1.强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)

2.协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；若协商缓存生效则返回304，继续使用缓存

更多学习视频学习资料请参考：B站搜索“我们一起学前端”

[7]能不能说一说浏览器缓存相关推荐

浏览器缓存网站静态文件
当用户第一次访问你的网站时,让用户的浏览器缓存网站的静态文件,如图片\CSS\JS等,然后接访问接下来的页面就会直接调用浏览器的缓存而不是重新从服务器下载,这样既节省带宽和流量又加快了用户打开网页的速 ...
同源策略禁止读取位于_用浏览器缓存绕过同源策略（SOP）限制
本文分享的Writeup是作者在做Keybase.io的漏洞众测中发现的SOP(同源策略)绕过漏洞,由于Keybase.io在用的多个API端点都启用了CORS(跨域资源共享)机制,这种缓解同源策略的 ...
浏览器缓存导致FLASH资源更新问题的解决方案
在网上搜浏览器缓存问题时,遇上了很多问题.一是不知道应该用何种关键字搜索,二是一搜出来,就全是讲的是如何禁用浏览器缓存的方案. 作为大型点的FLASH WEBGAME来说,不缓存显然是不行的.总体上来 ...
浏览器缓存和webpack缓存配置
网络请求会耗费大量时间和请求,如果可以重用为改变的网络资源,对于用户来说可以更快更流畅的查看网页,对于服务器来说减少了很多负荷,所以浏览器缓存是前端优化的重要内容.本文介绍了浏览器缓存的机制和缓存在w ...
禁止Chrome浏览器缓存
为什么80%的码农都做不了架构师?>>> 禁止Chrome浏览器缓存 HTML: <META HTTP-EQUIV="pragma" CONTENT= ...
apache下用expires_module让浏览器缓存静态文件
apache下用expires_module让浏览器缓存静态文件 apache配置静态缓存的原因: 第一点, 减轻服务器的压力. 第二点, 省去浏览器经常要去服务端下载CSS. ...
给url添加时间戳，解决浏览器缓存
//解决浏览器缓存function timestamp(url){// var getTimestamp=Math.random();var getTimestamp=new Date().getTi ...
解决修改css或js文件，浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...
给js加版本号解决浏览器缓存问题
给js加版本号解决浏览器缓存问题参考文章: (1)给js加版本号解决浏览器缓存问题 (2)https://www.cnblogs.com/wblx/p/11050498.html 备忘一下.
浏览器缓存浅解--记录备复习
最近在学习前端优化的问题,正好看到浏览器缓存.看别人的感觉都会,等到自己说出个所以然来可能就有卡壳了.好记性不如烂笔头,记录下来加深下印象. 前端缓存一个数据流程:前端请求.后台处理.浏览器响应.第 ...

[7]能不能说一说浏览器缓存

[7]能不能说一说浏览器缓存相关推荐

最新文章

热门文章