这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天 HTTP缓存是一种让浏览器能够缓存页面资源的机制。通过使用HTTP缓存，可以让用户更快地浏览网站，减少网络流量和服务器负担。HTTP缓存的原理是：当浏览器请求一个资源时，服务器会在响应头中添加一个Cache-Control或Expires字段，告诉浏览器这个资源是否可以被缓存，缓存的时间等等。浏览器接收到这个响应后，会根据响应头中的信息来判断是否要缓存这个资源。
HTTP缓存有两种方式：强缓存和协商缓存。
强缓存
强缓存是一种浏览器缓存机制，其作用是使浏览器可以直接从本地缓存中读取资源，而无需向服务器发起请求。这种机制可以有效地提高网站的加载速度，减少服务器的负担。
Cache-Control特点：
- 在 Response Headers 中。
- 控制强制缓存的逻辑。
- 例如 Cache-Control: max-age=3153600（单位是秒）
Cache-Control 取值：
- max-age：缓存最大过期时间。
- no-cache：可以在客户端存储资源，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。
- no-store：永远都不要在客户端存储资源，永远都去原始服务器去获取资源。
协商缓存
协商缓存是指浏览器在发送请求到服务器时，服务器会返回一个状态码304，向浏览器表示资源未被修改，可以直接使用本地缓存中的资源，从而减少网络传输和服务器负载。这个过程可以通过比较请求头中的缓存标识和服务器中的资源缓存标识来实现。
特点：
- 服务端缓存策略。
- 服务端判断客户端资源，是否和服务端资源一样。
- 一致则返回 304，否则返回 200 和最新的资源。
标识：
- 在 Response Headers 中，有两种。
- Last-Modified：资源的最后修改时间。
- Etag：资源的唯一标识（一个字符串，类似于人类的指纹，sni）。
强缓存和协商缓存都可以减少网络流量和服务器负担，但是在不同情况下，需要使用不同的缓存方式。
当浏览器第一次访问一个页面时，会先请求服务器获取资源，并将资源缓存到本地。当再次访问这个页面时，浏览器会先检查这个资源是否已经缓存在本地，如果已经缓存，则直接使用缓存，否则重新请求服务器获取资源。在HTTP缓存中，可以通过设置响应头中的Cache-Control或Expires字段来控制缓存时间，从而提高页面的性能和速度。
在实际的开发过程中，可以使用一些工具来测试HTTP缓存的效果。例如，可以使用浏览器的开发者工具来查看资源是否已经被缓存，以及缓存的时间和方式。同时，可以使用一些在线工具，如Google PageSpeed Insights和GTmetrix，来测试页面的性能和速度，并优化HTTP缓存策略。
总之，HTTP缓存是提高页面性能和速度的重要机制，通过合理地设置缓存时间和方式，可以让用户更快地浏览网站，减少网络流量和服务器负担。在实际开发中，需要根据页面的实际情况和用户需求来优化HTTP缓存策略，从而实现更好的用户体验和更高效的工作流程。
