浏览器，强缓存协商缓存，让网页飞起来！

前端

2023-10-09 18:21:37

强缓存

强缓存，顾名思义，就是强制浏览器缓存资源。也就是说，当浏览器再次请求相同资源时，它不会向服务器发送请求，而是直接从本地缓存中获取。

强缓存的使用场景

强缓存通常用于以下两种场景：

静态资源： 静态资源，例如图片、CSS 和 JavaScript 文件，不会经常发生变化。因此，将它们缓存到本地可以减少对服务器的请求数量，从而提高网站的速度。
不经常更新的资源： 一些资源，例如新闻文章或博客文章，虽然不是静态的，但也更新得不够频繁。将它们缓存到本地可以减少对服务器的请求数量，从而提高网站的性能。

强缓存的实现方式

强缓存可以通过以下两种方式实现：

Expires 头： Expires 头告诉浏览器资源的过期时间。当浏览器再次请求资源时，它会检查 Expires 头，如果资源已经过期，它就会向服务器发送请求。否则，它就会直接从本地缓存中获取资源。
Cache-Control 头： Cache-Control 头告诉浏览器如何缓存资源。Cache-Control 头可以设置以下值：
- max-age：max-age 值告诉浏览器资源可以缓存多长时间。当浏览器再次请求资源时，它会检查 max-age 值，如果资源已经过期，它就会向服务器发送请求。否则，它就会直接从本地缓存中获取资源。
- no-cache：no-cache 值告诉浏览器不要缓存资源。当浏览器再次请求资源时，它总是会向服务器发送请求。
- no-store：no-store 值告诉浏览器不要缓存资源，也不要将资源存储在本地。

协商缓存

协商缓存，又称协商一致性缓存，是指浏览器在向服务器请求资源时，会先发送一个 If-Modified-Since 或 If-None-Match 头。如果资源没有发生变化，服务器就会返回一个 304 Not Modified 状态码，浏览器就会直接从本地缓存中获取资源。否则，服务器就会返回资源的内容，浏览器就会更新本地缓存。

协商缓存的使用场景

协商缓存通常用于以下两种场景：

经常更新的资源： 一些资源，例如新闻文章或博客文章，经常更新。将它们缓存到本地可以减少对服务器的请求数量，从而提高网站的性能。
不确定资源是否发生变化的场景： 当浏览器不确定资源是否发生变化时，它会使用协商缓存。例如，当用户刷新页面时，浏览器就会向服务器发送一个 If-Modified-Since 或 If-None-Match 头。如果资源没有发生变化，服务器就会返回一个 304 Not Modified 状态码，浏览器就会直接从本地缓存中获取资源。否则，服务器就会返回资源的内容，浏览器就会更新本地缓存。