浏览器缓存学习总结

学习记录

<!-- 一、缓存

-------缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。实现过程就是，当 web 缓存发现请求的资源已经被存储过了，它就会拦截请求返回该资源的拷贝，而不会去源服务器重新下载

缓存技术有很多，比如代理缓存、浏览器缓存、网关缓存、负载均衡等

https://blog.csdn.net/qq_38910842/article/details/104960509

https://www.cnblogs.com/xiaoweihuang/p/10134656.html

https://www.jianshu.com/p/ddf33f5eb555

service Worker
Memory Cache
Disk Cache
Push Cache
浏览器请求时，会按照如上的优先级顺序，进行查找缓存，都没有命中时，才会去请求网络。

浏览器的缓存策略有两种
 -----强制缓存
 如果浏览器判断所请求的目标资源有效命中，
 则可直接从强制缓存中返回请求响应
 无须与浏览器进行通信
 也就是说强制缓存不需要发请求
不过这样可能存在一个问题，就是万一资源更新了，但是它还是在走缓存

 -----协商缓存
 针对强制缓存的那个问题，所以有了协商缓存
 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程：
 它是在使用本地缓存之前，向服务器发一次get请求
 与之协商当前浏览器保存的本地缓存是否已经过期
 ！！所以说明强制缓存优先级高于协商缓存

 -----咦，那么这样的话，岂不是说
 强制缓存和协商缓存肯定是都要有的，都要设置，才完整
 一个是用来缓存的，一个是用来判断要不要更新缓存的
 不用更新就继续用旧的缓存，要更新就拿新的文件
 然后继续开始缓存
 是这样吗
 看了一下
 --------时间戳协商缓存
 是用了cache-control:'no-cache'与last-modified
 第一次请求的时候，响应last-modified回去
 然后第二次请求，请求头会自动带一个if-modified-since
 然后服务器端，把两者作对比，一样，就响应304和空数据
 浏览器就会拿缓存，不过我看了一下
 浏览器上面只显示304 not modified并没有像强制缓存那样
 显示memory cahche，
 不过也确实，它毕竟是协商缓存，要走请求的
 显示memory cache和disk cache的那种，那就是根本没请求了好吧，哈哈

 ------还有一个etag哈希值协商缓存
 是用了cache-control:'no-cache'与etag
 第一次请求的时候，响应etag回去
 然后第二次请求，请求头会自动带一个if-none-match
 然后服务器端，把两者作对比，一样，就响应304和空数据
 浏览器就会拿缓存，

 

个人理解部分：

1.------关于强缓存的那个expires的缺点是这样的

expires的值是服务器设置返回到响应头里的，浏览器会把它和客户端本地的时间对比

没超过就命中这个缓存，超过了，就不命中这个缓存了，失效了，这里是命中硬盘缓存

也就是disk cache 

这就是expires缓存的思路

--------expires 的值是一个时间戳，表示本地时间到这个设置的时间缓存就失效。这样一来 expires 就是有问题的，受限于本地时间，如果服务端和客户端的时间设置可能不同，或者我直接手动去把客户端的时间改掉，那么 expires 将无法达到我们的预期。

------expires的值一般是服务器返的，而且是以服务器时间往上加的
比如服务器现在是2020 10 10
我设置两年后 也就是返回 2022 10 10
客户端拿到后，其实也就是浏览器拿到后，它只能与本地时间也就是客户端时间对比，如果没超过就缓存，而众所周知，客户端时间你自己可以调。。。。
强制缓存expires哪里其实是这样的
   它设置是相对于服务器设置的
但是它比较是相对于客户端
这样的话比如服务端是2019年
你根据这个设置2020过期
一般来说服务器和客户端是一样得时间2019
但是假如你把客户端调成2021就过期了
  因为它比较是相对于客户端比较的
就好像有些对话游戏也是根据你本地时间来的，你就可以调
比如那个异次元通讯

2.------catch-control解决了expires这个问题，它返回一个max-age=xxx，这个时间的计算是这样的，当你第一次访问，或者是经历完了catch-control的缓存有效时间后再访问一次，会反给你max-age=xxx，它会从你这次访问开始计算时间过去了多久，只要没超过max-age，就一直走缓存，也就是说不会发请求，走强制缓存，直到过期，下次再访问就不是缓存了，然后又会作为第一次访问开始计算，如此往复，这就是catch-control缓存的思路

3.----Cache-Control 和 Expires 可以在服务器端配置同时启用，同时启用的时候 Cache-control 的优先级高
意思是同时写的话，不管失不失效都是以cache-control来应用的
expires就和没写一样

4.------一直觉得缓存好像后端设置的，返回到响应头，但是看了下好像前端也能设置 meta里

https://www.imooc.com/wenda/detail/550154

https://blog.csdn.net/weixin_30731305/article/details/97321137

但是试了下，没生效。。

----关于html meta标签，各种属性 http://www.manongjc.com/article/149924.html 
好像请求和响应都能设置缓存
看这篇 https://blog.csdn.net/u012375924/article/details/82806617
，那他们有啥区别呢  你仔细看这篇文章嘛，已经讲的很清楚了
比如max-age
请求里，是 '告知服务器，客户端想要一个存在时间不大于多少秒的资源'
响应里，是 '告知客户端该资源在多少秒内是可以缓存的，不用再发请求拿'

5.-----关于memry catch和disk catch 这两个是属于强缓存还是协商缓存
答：是的，缓存要么存内存里，要么存硬盘里，要么service Worker
Push Cache 就这几个，所以不管你是什么强缓存还是协商缓存
它都是缓存啊，呢就都是存内存或者硬盘里


--------然后他们两个是什么时候用哪个 一个是硬盘里，一个是内存里
答:如果当前内存使用率高的话，请求资源大概率会被缓存到disk cache。
内存缓存的优先级高于硬盘缓存，也比硬盘缓存的速度快。
------还有个问题，就是协商缓存不也是缓存？
那不也会存在内存或者硬盘里？但是为什么只能看到304 not modified，那么
协商缓存是存在内存还是硬盘里了，总要有个把，不然从哪儿取
对了，存在硬盘里的话，应该会实际上可以看到这个文件
而内存里的话，在电脑上是找不到这个文件的

6.cache-control即可以做强缓存，也可以做协商缓存
7.用户行为对缓存的影响
比如ctrl+f5可以清除缓存，缓存会失效
可以具体看这篇文章下面https://blog.csdn.net/qq_38910842/article/details/104960509
 -->

<!--
--------突然产生一个小问题
就是请求里那些返回的状态码，是服务器返回的吗
比如200 500 404 301 302啥
我说的是General里的Status Code字段
是服务器返回的吗
还是说是规定好了的，改不了了，但是是谁规定的
到底是怎么回事，内部是怎么判断的
答：试了一下，就在app.js里试的
真的是服务器自己反的  我刚刚把404改成408了，确实变了
不过本来应该确实是404 路径资源找不到
改成408之后，显示reqeust timeout请求超时
看来浏览器早就有规范了，每个状态码都会有自己的功能职责标识，是干什么的，标识的是什么
浏览器其实内部已经做了规范
那个状态码，代表这个什么，浏览器要对应做什么处理等
所以即使是自己返回的，其实也是按照大家熟知的规范来写
状态码的，

 -->

 <!-- 
 -------关于http状态码中的301 302 304这三个比较常见
 301表示永久重定向
 302表示临时重定向 /
 304表示缓存了 所请求的资源未修改， 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

 200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

401 请求要求用户的身份认证 一般登录失效或者没有权限啥都是这个状态码
407 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权

1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误


 /现在一般都用301永久重定向 临时的有点问题
 可以看看这两篇
 https://blog.csdn.net/crazy_yyyyy/article/details/51316039
 https://blog.csdn.net/qmhball/article/details/7838989
  -->

  <!-- 
  -------关于通过时间戳来协商缓存的不足之处
  1.只是根据资源最后的修改时间戳进行判断的
  就算内容没变化，只要你改了名字啥的，时间戳也会更新
  这就判断比较不准确了，容易造成请求资源浪费

  2.它标识文件资源修改的时间戳单位是秒
  如果文件修改速度非常快，假设在几百毫秒完成，
  那么就无法识别出来
   -->

   <!-- 
   -----所以为了弥补协商缓存通过时间戳判断的不足
   从http 1.1规范开始新增了ETag的头信息
  它是一个针对当前文件的哈希值，只要当前文件内容不同
其hash就会不同，etag自然也就不同，
这种做法和webpack里的基本一样啊。。
他们是用的同一种检测文件变化，变更hash值的原理吗
是啥原理啊，有空瞧瞧，是什么映射吗，类似虚拟dom真实dom比对那种？
有空瞧瞧把
    -->

  <!-- 
  ----然后etag也有缺陷，它只能算是modified的一种补充方案
  1.就是生成文件hash值需要额外开销
  2.就是针对这个开销问题，它分为了强验证和弱验证
  强验证就是完整把把文件读完生成哈希值
  弱验证就是根据文件的部分来生成
  显然一眼就能知道，强验证的话，准确性高，但是开销大，生成慢
  弱验证的话，准确性低，但是开销小，生成快
  所以要根据实际情况来选择
   -->

差不多搞懂了
多亏了这个视频和它的课件网址 讲的特别好
https://www.bilibili.com/video/BV1DA411V75g
https://www.yuque.com/docs/share/51c50cef-36e2-4e40-9a6d-c4c0bcc7b2b4

app.js

const http = require('http')
const fs = require('fs')
const url = require('url')
const etag = require('etag')

http.createServer((req, res) => {


  const { pathname } = url.parse(req.url)//得到查询字符串
  // 如果对url的结果不太清楚，可以看看这里
  // http://nodejs.cn/api/http.html  message.url
  // URL {
  //   href: 'http://localhost:3000/status?name=ryan',
  //   origin: 'http://localhost:3000',
  //   protocol: 'http:',
  //   username: '',
  //   password: '',
  //   host: 'localhost:3000',
  //   hostname: 'localhost',
  //   port: '3000',
  //   pathname: '/status',
  //   search: '?name=ryan',
  //   searchParams: URLSearchParams { 'name' => 'ryan' },
  //   hash: ''
  // }
  console.log(pathname)
  if (pathname === '/') {
    const data = fs.readFileSync('./index.html')
    res.end(data)
  }
  // 强缓存 expires
  else if (pathname === '/img/1.jpeg') {
    const data = fs.readFileSync('./img/1.jpeg')
    res.writeHead(200, {
      // 'Cache-Control': 'max-age=5',
      // 关于Cache-Control的值
      // ---no-store与no-cache，一对互斥属性，只能设置其中一个
      //no-store是不缓存，no-cache是强制进行协商缓存
      // 'Cache-Control': 'no-store',
      //no-store表示禁用缓存，客户端每次请求都需要服务器端给予全新响应
      // 'Cache-Control': 'no-cache',
      //no-cache的意思是对于每次发起的请求都不会再判断强制
      // 缓存是否过期，也就是不会再走max-age这一套了，而是直接走协商缓存
      // 与服务器协商验证缓存的有效性，若缓存未过期，则会使用本地缓存
      // ----如果Cache-Control我想设置多个值
      // 是这样 Cache-Control:'max-age=5;private'
      // 还是这样  Cache-Control:'max-age=5';然后再加一个Cache-Control:'private';
      // 看了一下，第一种  Cache-Control:'public,max-age=5'可以这样
      // 第二种我就不知道了，应该也是可以的把
      // 试了下没作用第二种，但是看到一篇文章上是有了多个Cache-Control

      // ----private与public，一对互斥属性，只能设置其中一个
      // 他们用以明确响应资源是否可被代理服务器进行缓存
      // 比如有时候用nginix缓存静态资源
      // 这个属性就可以起作用了
      // public表示响应资源既能被浏览器缓存，也能被代理服务器缓存
      // private表示只能被浏览器缓存，不能被代理服务器换粗
      // 其实我们默认的就是浏览器缓存。。我们理解的缓存

      // 都不设置，默认是private


      // ----max-age与s-maxage
      // max-age是针对浏览器的缓存过期时间，
      // s-maxage是针对代理服务器的缓存过期时间，当然了，这个你得首先
      // 设置public，s-maxage才会生效


      Expires: new Date('2021-6-26 21:40:00').toUTCString()
    })

    res.end(data)
  } // 强缓存 cache-control
  else if (pathname === '/img/2.png') {
    const data = fs.readFileSync('./img/2.png')
    res.writeHead(200, {
      'Cache-Control': 'max-age=5',
      // 关于Cache-Control的值
      // ---no-store与no-cache，一对互斥属性，只能设置其中一个
      //no-store是不缓存，no-cache是强制进行协商缓存
      // 'Cache-Control': 'no-store',
      //no-store表示禁用缓存，客户端每次请求都需要服务器端给予全新响应
      // 'Cache-Control': 'no-cache',
      //no-cache的意思是对于每次发起的请求都不会再判断强制
      // 缓存是否过期，也就是不会再走max-age这一套了，而是直接走协商缓存
      // 与服务器协商验证缓存的有效性，若缓存未过期，则会使用本地缓存
      // ----如果Cache-Control我想设置多个值
      // 是这样 Cache-Control:'max-age=5;private'
      // 还是这样  Cache-Control:'max-age=5';然后再加一个Cache-Control:'private';
      // 看了一下，第一种  Cache-Control:'public,max-age=5'可以这样
      // 第二种我就不知道了，应该也是可以的把
      // 试了下没作用第二种，但是看到一篇文章上是有了多个Cache-Control

      // ----private与public，一对互斥属性，只能设置其中一个
      // 他们用以明确响应资源是否可被代理服务器进行缓存
      // 比如有时候用nginix缓存静态资源
      // 这个属性就可以起作用了
      // public表示响应资源既能被浏览器缓存，也能被代理服务器缓存
      // private表示只能被浏览器缓存，不能被代理服务器换粗
      // 其实我们默认的就是浏览器缓存。。我们理解的缓存

      // 都不设置，默认是private


      // ----max-age与s-maxage
      // max-age是针对浏览器的缓存过期时间，
      // s-maxage是针对代理服务器的缓存过期时间，当然了，这个你得首先
      // 设置public，s-maxage才会生效


      Expires: new Date('2021-6-26 21:40:00').toUTCString()
    })

    res.end(data)
  }
  // 时间戳协商缓存 
  else if (pathname === '/img/3.png') {
    const { mtime } = fs.statSync('./img/3.png')//获取文件的修改时间
    const ifModifiedSince = req.headers['if-modified-since']
    if (ifModifiedSince === mtime.toUTCString()) {
      // 缓存生效
      // 设置304 这样浏览器就会拿本地缓存，
      res.statusCode = 304

      // 返回空
      res.end()
      return
    }

    const data = fs.readFileSync('./img/3.png')

    res.setHeader('last-modified', mtime.toUTCString())
    res.setHeader('Cache-Control', 'no-cache')
    res.end(data)
  }
  // etag哈希值协商缓存 
  else if (pathname === '/img/4.gif') {
    const data = fs.readFileSync('./img/4.gif')
    const etagContent = etag(data)//获取文件的哈希值
    const ifNoneMatch = req.headers['if-none-match']
    if (ifNoneMatch === etagContent) {
      // 缓存生效
      // 设置304 这样浏览器就会拿本地缓存，
      res.statusCode = 304
      // 返回空
      res.end()
      return
    }


    res.setHeader('etag', etagContent)
    res.setHeader('Cache-Control', 'no-cache')
    res.end(data)
  }
  else {
    res.statusCode = 404
    res.end()
  }

}).listen(3000, () => {
  console.log('http://192.168.200.1:3000')
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 这两种客户端创建缓存的方法不知道为什么不生效，可能是因为
  已经html5了 不支持了？ -->
  <meta http-equiv="Cache-Control" content="max-age=5" />
  <!-- <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" /> -->
  <title>Document</title>
</head>

<body>
  <img src="./img/1.jpeg" alt="">
  <img src="./img/2.png" alt="">
  <img src="./img/3.png" alt="">
  <img src="./img/4.gif" alt="">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
  console.log(window)
  // window.navigator.cookieEnabled = true;
  window.navigator.cookieEnabled = false;
  document.cookie = 'name=123'

  // 创建axios实例
  const service = axios.create({
    // 超时
    timeout: 10000
  })
  console.log(service.interceptors.request)//为什么axios是个函数，却能够点出别的方法
  // request拦截器
  service.interceptors.request.use(
    config => {
      console.log('config', config)
      config.headers['Authorization'] = 'Bearer ' + 'safgdsfg' // 让每个请求携带自定义token 请根据实际情况自行修改
      config.headers.token = 'asdffasdfsd'
      config.headers.fuck = '53453'
      // 请求头上可以自定义属性
      return config
    },
    error => {
      console.log(error)
      Promise.reject(error)
    }
  )
  service.post('/', { name: 'asdfasdf' });
</script>

</html>

关于 请求头上的General上的refer-policy和请求头上的refer字段可以看看这几篇文章

https://blog.csdn.net/thlzjfefe/article/details/102521707

https://www.cnblogs.com/aeolian/p/11083804.html

https://blog.csdn.net/weixin_31100705/article/details/112946238?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.baidujsUnder6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.baidujsUnder6

https://blog.csdn.net/dbp47524/article/details/102396408

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Expose-Headers