缓存是一种优化 Web 应用性能的重要方式。它可以减少服务器响应时间，提高页面加载速度，降低带宽消耗等。本文将介绍在 Web 应用程序中使用缓存优化性能的常见技术和最佳实践。
1. 浏览器缓存
浏览器缓存是指浏览器将 Web 资源（如 HTML、CSS、JavaScript、图片等）存储在本地磁盘或内存中，以便下次访问同一资源时可以直接从缓存中获取，而不必重新从服务器下载。这样可以减少网络请求，提高页面加载速度。
1.1 缓存控制
浏览器缓存的行为受到 HTTP 响应头中的缓存控制指令的影响。常见的缓存控制指令包括：
- Cache-Control：控制缓存的行为，可以设置 max-age、no-cache、no-store 等参数。
- Expires：指定缓存过期时间，格式为 GMT 格式的日期字符串。
- ETag：用于判断资源是否有更新，可以减少不必要的资源传输。
- Last-Modified：指定资源最后修改时间，用于判断资源是否有更新。
我们可以在服务器端设置这些响应头来控制浏览器缓存的行为。比如，设置一个资源的缓存时间为 1 小时：
--------------------------------- ------------- ---- - ------------------------------ -------- --------------- ---------------------- - -------------------------- ---
1.2 强制缓存和协商缓存
浏览器缓存有两种方式：强制缓存和协商缓存。
强制缓存是指浏览器在缓存时间内直接从缓存中获取资源，不会向服务器请求验证。如果缓存时间过期，则会向服务器发起请求。可以使用 Cache-Control 和 Expires 响应头来控制强制缓存。
协商缓存是指浏览器在缓存时间内向服务器发起请求，由服务器决定是否返回新的资源。如果服务器返回 304 响应，说明资源未更新，可以直接从缓存中获取。如果服务器返回新的资源，浏览器会更新缓存。可以使用 ETag 和 Last-Modified 响应头来控制协商缓存。
1.3 缓存清理
浏览器缓存可能会导致资源更新后仍然使用旧的缓存，从而导致错误。为了避免这种情况，我们可以使用缓存清理技术。
缓存清理有两种方式：手动清理和自动清理。手动清理是指用户手动清理浏览器缓存，这种方式不太可靠。自动清理是指服务器端通过修改资源 URL 来强制浏览器更新缓存。比如，可以将资源 URL 中添加版本号或哈希值，这样每次更新资源时，只需要修改版本号或哈希值即可。
----- ---------------- -----------------------------------
2. 服务器缓存
服务器缓存是指将动态生成的 Web 页面或 API 响应结果缓存到内存或磁盘中，以便下次请求同一资源时可以直接从缓存中获取，而不必重新生成响应。这样可以减少服务器响应时间，提高性能。
2.1 缓存策略
服务器缓存的行为受到缓存策略的影响。常见的缓存策略包括：
- 全局缓存：将所有请求结果缓存到内存或磁盘中，适用于数据更新频率较低的场景。
- 分级缓存：将请求结果按照访问频率和数据更新频率等因素进行分类，对不同类别的结果采用不同的缓存策略。
- 响应头控制缓存：使用 Cache-Control 和 Expires 响应头来控制缓存行为。
我们可以使用 Node.js 的缓存模块（如 memory-cache、node-cache、redis）来实现服务器缓存。比如，使用 memory-cache 模块将请求结果缓存到内存中：
----- ----- - ------------------------
------------------------ ------------- ---- -
----- -- - --------------
----- ---- - --------------
-- ------ -
---------------
- ---- -
----- ---- - ----------------
------------- ----- ---- - ------ -- -- - --
---------------
-
---2.2 缓存清理
服务器缓存可能会导致数据更新后仍然使用旧的缓存，从而导致错误。为了避免这种情况，我们需要使用缓存清理技术。
缓存清理有两种方式：手动清理和自动清理。手动清理是指管理员手动清理缓存，这种方式不太可靠。自动清理是指设置缓存过期时间或使用消息队列等技术来自动清理缓存。比如，可以使用 redis 的过期时间机制：
----- ----- - -----------------
----- ------ - ---------------------
------------------------ ------------- ---- -
----- -- - --------------
-------------- ------------- ----- -
-- ------ -
---------------------------
- ---- -
----- ---- - ----------------
-------------- --------------------- ----- ------ -- -- - --
---------------
-
---
---3. CDN 缓存
CDN（Content Delivery Network）是指内容分发网络，它可以将 Web 资源缓存到全球各地的服务器上，以便用户可以更快地访问这些资源。CDN 缓存可以减少带宽消耗，提高页面加载速度。
3.1 缓存控制
CDN 缓存的行为受到 HTTP 响应头中的缓存控制指令的影响，与浏览器缓存类似。我们可以在服务器端设置这些响应头来控制 CDN 缓存的行为。
3.2 缓存清理
CDN 缓存可能会导致资源更新后仍然使用旧的缓存，从而导致错误。为了避免这种情况，我们可以使用缓存清理技术。
CDN 缓存清理有两种方式：手动清理和自动清理。手动清理是指管理员手动清理 CDN 缓存，这种方式不太可靠。自动清理是指使用 CDN 提供商提供的 API 或 Webhook 来自动清理 CDN 缓存。比如，可以使用阿里云 CDN 的 API：
----- --------- - --------------------------
----- ------ - --- -----------
------------ ---------------------
---------------- -------------------------
--------- ---------------------------
----------- ------------
---
-------------------------- ------------- ---- -
----- ---- - --------------
----- ------ - -
----------- -------
----------- ---------------
--
---------------------------------- ------------- ----- -
-- ----- -
-----------------
------------------------- ----- --------
- ---- -
------------------
------------- ----- ----------
-
---
---4. 结论
缓存是一种优化 Web 应用性能的重要方式。我们可以使用浏览器缓存、服务器缓存和 CDN 缓存来减少网络请求，提高页面加载速度，降低带宽消耗等。在实际开发中，我们需要根据具体需求选择合适的缓存技术和最佳实践，来优化 Web 应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673b7d5b39d6d08e88b3b76f