以HTML页面为例：这些浏览器(http)缓存相关知识不可不知道

2023-11-24 08:02:35

浏览器缓存是前端开发人员必须掌握的基础知识之一。它可以提高网站的性能，减少服务器的负载，改善用户体验。

在熟悉浏览器缓存之前，我们先来了解一下DNS缓存和CDN缓存。这两者虽然不属于浏览器缓存，但在一定程度上也会影响前端开发和问题的定位。

DNS缓存

DNS缓存是将域名和IP地址的对应关系存储在本地，以减少对DNS服务器的查询次数，提高域名解析的速度。

当浏览器第一次访问一个网站时，它会向DNS服务器查询该网站的IP地址。DNS服务器会将IP地址返回给浏览器，浏览器会将IP地址存储在DNS缓存中。下次浏览器访问同一个网站时，它会直接从DNS缓存中获取IP地址，而无需再向DNS服务器查询。

DNS缓存可以有效提高网站的加载速度，但它也可能导致一些问题。例如，如果DNS缓存中的IP地址已经过期，浏览器就会无法访问网站。

CDN缓存是将网站的静态资源（如HTML、CSS、JavaScript、图片等）存储在多个分布在全球各地的服务器上，以减少用户访问网站时的延迟。

当用户访问一个网站时，浏览器会首先向最近的CDN服务器请求静态资源。CDN服务器会将静态资源返回给浏览器，浏览器会将静态资源存储在本地缓存中。下次用户访问同一个网站时，浏览器会直接从本地缓存中获取静态资源，而无需再向CDN服务器请求。

CDN缓存可以有效提高网站的加载速度，减少服务器的负载，改善用户体验。

浏览器缓存是将网站的静态资源和动态资源存储在本地，以减少对服务器的请求次数，提高网站的加载速度。

浏览器缓存分为两种：强缓存和协商缓存。

强缓存是指浏览器直接从本地缓存中获取资源，而不会向服务器发送任何请求。强缓存的目的是为了提高网站的加载速度。

强缓存的规则如下：

如果资源的过期时间还没有到来，浏览器会直接从本地缓存中获取资源。
如果资源的过期时间已经到来，浏览器会向服务器发送一个条件请求。如果服务器返回304 Not Modified，浏览器会继续从本地缓存中获取资源。如果服务器返回200 OK，浏览器会将新资源存储在本地缓存中，并使用新资源。

协商缓存是指浏览器向服务器发送一个条件请求，服务器根据条件请求的返回结果决定是否返回资源。协商缓存的目的是为了确保浏览器获取的资源是最新的。

协商缓存的规则如下：

如果资源的过期时间还没有到来，浏览器会向服务器发送一个If-Modified-Since请求。服务器会将资源的最后修改时间返回给浏览器。浏览器会将本地缓存中资源的最后修改时间与服务器返回的最后修改时间进行比较。如果本地缓存中资源的最后修改时间比服务器返回的最后修改时间新，浏览器会继续使用本地缓存中的资源。如果本地缓存中资源的最后修改时间比服务器返回的最后修改时间旧，浏览器会向服务器请求新资源。
如果资源的过期时间已经到来，浏览器会向服务器发送一个If-None-Match请求。服务器会将资源的ETag值返回给浏览器。浏览器会将本地缓存中资源的ETag值与服务器返回的ETag值进行比较。如果本地缓存中资源的ETag值与服务器返回的ETag值相同，浏览器会继续使用本地缓存中的资源。如果本地缓存中资源的ETag值与服务器返回的ETag值不同，浏览器会向服务器请求新资源。