在前端开发中，性能优化一直是一个重要的话题。如何优化页面的性能，让用户能够更快地打开页面并享受良好的用户体验，是每个前端开发者必须面对的问题之一。其中，利用浏览器缓存减少页面的请求次数是一个非常重要的优化方案。
什么是浏览器缓存
浏览器缓存是指将网页资源（如 HTML、CSS、JavaScript、图片等）存放在用户的本地计算机上，以便下次访问同一网站时能够更快地加载页面。当我们访问一个网站时，浏览器会首先检查本地缓存中是否已经有相应的资源，如果有，则直接从缓存中获取，而不是重新请求服务器。
浏览器缓存可以分为两种，分别为强缓存和协商缓存。
强缓存
强缓存是指浏览器在本地缓存中存储的资源，在缓存期内不需要重新向服务器发送请求，直接从本地缓存中获取资源。强缓存可以通过设置 HTTP 响应头来实现，常见的属性有 Expires 和 Cache-Control。
Expires 属性是一个绝对时间，表示资源的过期时间，如果当前时间小于过期时间，则直接从缓存中获取资源，否则重新向服务器发送请求。例如：
Expires: Wed, 12 Jul 2023 00:00:00 GMT
Cache-Control 属性是一个相对时间，表示资源的最大缓存时间，例如：
Cache-Control: max-age=86400 // 缓存无效，发送请求 Cache-Control: max-age=31536000 // 缓存一年，直接从缓存中获取资源
协商缓存
协商缓存是指浏览器在请求服务器时，会发送一些参数来询问服务器是否有更新资源。如果服务器返回的资源和本地缓存的资源相同，则直接从本地缓存中获取资源，否则重新向服务器请求资源。协商缓存可以通过设置 HTTP 响应头来实现，常见的属性有 Last-Modified 和 ETag。
Last-Modified 属性是资源的最后修改时间，在浏览器请求资源时会发送该属性值给服务器，服务器会判断资源是否有改动，如果没有改动则返回 304 状态码，否则返回新的资源。
Last-Modified: Wed, 12 Jul 2023 00:00:00 GMT
ETag 属性是资源的唯一标识符，相当于资源的指纹。服务器在发送资源时会返回该属性值，浏览器在请求资源时会发送该属性值给服务器，服务器会根据该属性值来判断资源是否有改动。
ETag: "abcdefg123456"
如何利用浏览器缓存减少页面的请求次数
通过设置合适的缓存策略，我们可以利用浏览器缓存来减少页面的请求次数，从而加快页面的加载速度，提升用户体验。下面介绍一些利用浏览器缓存的最佳实践。
1. 静态资源设置长期缓存
静态资源包括 HTML、CSS、JavaScript、图片等，这些资源在不经常变更的情况下可以设置长期缓存。我们可以通过设置 HTTP 响应头中的 Expires 或 Cache-Control 属性来实现。例如：
Cache-Control: max-age=31536000
这样可以让浏览器缓存该资源一年时间，当用户再次访问该网站时，浏览器可以直接从缓存中获取该资源，避免了不必要的请求。当然，在资源更新时，我们需要及时更新缓存策略，避免用户访问旧版本的资源。
2. 动态资源设置短期缓存
动态资源包括 API 接口、动态页面等，这些资源在不断变化的情况下可以设置短期缓存，例如 5 分钟或 10 分钟。我们可以通过设置 HTTP 响应头中的 Cache-Control 属性来实现。例如：
Cache-Control: max-age=300
这样可以让浏览器缓存该资源 5 分钟时间，当用户再次访问该网站时，如果缓存仍然有效，则可以直接从缓存中获取该资源，避免了服务器的请求压力。
3. 启用 Gzip 压缩
Gzip 压缩是一种压缩传输格式，可以将页面资源压缩后再传输给浏览器，可以显著减少传输时间和带宽占用。我们可以通过设置 HTTP 响应头中的 Content-Encoding 属性来启用 Gzip 压缩。例如：
Content-Encoding: gzip
启用 Gzip 压缩需要服务器和浏览器都支持，现代浏览器都已经支持 Gzip 压缩。
代码示例
下面是一个示例代码，可以通过设置 HTTP 响应头中的 Expires 或 Cache-Control 属性来实现静态资源的缓存策略。假设我们需要缓存一个 index.html 文件，可以添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -------------------------------- - ------- ----- -- ---- ---- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
通过上述代码，我们将 public 目录下的静态资源全部设置为缓存一天的策略。当用户再次访问网站时，可以直接从缓存中获取该静态资源，避免了不必要的请求，提升了页面的加载速度。
总结
利用浏览器缓存减少页面的请求次数是一种非常重要的性能优化方案。我们可以通过设置合适的缓存策略，将静态资源设置为长期缓存，动态资源设置为短期缓存，以及启用 Gzip 压缩等方式来优化页面性能。在实际应用中，需要权衡缓存时间和资源更新的频率，及时更新缓存策略，以便提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498069b48841e98945171d9