增加缓相关内容

Author: 张东

.vitepress/config.mts

@@ -300,6 +300,7 @@ export default defineConfig({
             { text: "概述", link: "/browser/http/introduct" },
             { text: "跨域", link: "/browser/http/crossorigin" },
             { text: "async defer", link: "/browser/http/async-defer" },
+            { text: "http缓存", link: "/browser/http/cache" },
           ],
         },
       ],

browser/http/cache.md

@@ -0,0 +1,48 @@
+---
+layout: doc
+outline: deep
+---
+:::tip :rocket:前端缓存
+前端缓存分为浏览器缓存和http缓存，浏览器缓存例如web Storage,cookie等。复杂的是http缓存，分为强缓存与协商缓存两种缓存策略
+:::
+
+当然第一次进入一个网站没有缓存的概念，但是根据第一次返回的响应字段，可以得到对应的缓存策略,得益于缓存策略，第二次乃至以后进入网站速度大大提升。
+
+## 强缓存
+对应着这两个字段：HTTP/1.0时期，使用的是Expires，而HTTP/1.1使用的是Cache-Control
+
+* Expires：服务端会返回缓存的过期时间点，超过这个时间点缓存失效。但是服务端与浏览器的时间可能不一致，会产生问题，所以被Cache-Control取代
+* Cache-Control：不是返回时间点而是持续时间
+
+其下并不只有这一个属性，还有一些其他属性
+1. no-cache：跳过强缓存，走协商缓存
+2. no-store：强，协商缓存都没有
+
+当Expires和Cache-Control同时存在的时候，Cache-Control优先级高
+
+如果第二次进入到这个页面，执行缓存策略，第一步就是先判断强缓存，也就是 浏览器 根据返回的强缓存对应字段，判断缓存是否过期，如果没有过期，直接取缓存，不需要再进行协商缓存。
+
+:::tip :rocket:
+需要补充的是强缓存不需要发送http请求,虽然返回状态码还是200。另外这里的来源是内存/磁盘，并且只要是从内存/磁盘获取的就是走了强缓存。
+:::
+
+## 协商缓存
+从 协商 的字面意思上可以看出至少是需要两个人才能协商，也就是这里浏览器还要询问远程服务器缓存是否过期，也有两个字段
+* Last-Modified：服务器把这个字段返回，下一次浏览器发送http，会在请求头将他带上，只不过字段名改成了If-Modified-Since，接着服务器判断这个时间是否过期，如果返回304代表未过期，否则返回新资源。
+
+:::tip :rocket:弊端
+last-modified 是一个时间，最小单位为秒，试想一下，如果资源的修改时间非常快，快到毫秒级别，那么服务器会误认为该资源仍然是没有修改的，这便导致了资源无法在浏览器及时更新的现象。
+另外还有一种情况，比如服务器资源确实被编辑了，但是其实资源的实质内容并没有被修改，那么服务器还是会返回最新的 last-modified 时间值，但是我们并不希望浏览器认为这个资源被修改而重新加载。
+:::
+
+* ETag：服务器根据文件内容生成的唯一标识。服务器把这个字段返回，下一次浏览器发送http，会在请求头将他带上，字段名改成了If-None-Match，服务器接着会跟服务器上该资源的ETag进行比对，如果返回304代表未过期，否则返回新资源。
+
+:::tip :rocket:
+etag也有强弱校验之分，弱校验前面会加上W/，区别是弱校验适应于内容格式发生变化但语义不变的情况下，强校验则会严格控制每个字节
+:::
+
+如果强缓存判断过期了，就会进入协商缓存，此时会发送http请求，请求头上会加上If-Modified-Since，If-None-Match,他们的值就是第一次返回的响应标头中的Last-Modified，Etag。如果返回304代表缓存没过期，否则返回200，服务器返回最新资源。
+
+
+## 参考
+[前端缓存](https://juejin.cn/post/7340676808436547603)