避免缓存过期对性能的影响
在现代 Web 应用程序中，缓存是提高性能的关键。通过缓存页面和 assets 可以减少请求次数，并在客户端上加载资源，以减轻服务器负载。 但是，缓存也可能会对性能造成负面影响。缓存过期后，客户端将不得不再次请求服务器以获取相同的资源。
如果您正在开发 Web 应用程序，并关心性能，那么避免缓存过期就是值得探讨的问题。本文将讲述如何优化应用程序以避免缓存过期。
浏览器如何缓存资源
在讨论如何避免缓存过期之前，让我们深入了解浏览器如何缓存资源。
浏览器将资源分为两类：可缓存的和不可缓存的。不可缓存的资源主要是指 HTML 文档，因为它们是动态生成的，并且每次都会有不同的内容。
可缓存的资源包括：
- JS 文件
- CSS 文件
- 图像
- 字体文件
当客户端第一次请求 Web 页面时，浏览器将缓存以下资源：HTML、CSS、JS、图像和字体。
现代 Web 应用程序一般使用 HTTP 缓存机制来管理缓存。HTTP 缓存分为两种类型：强缓存和协商缓存。
强缓存的工作方式是使用 cache-control 和 expires 头来指示浏览器何时可以使用缓存的内容而不必再次发送请求。比如下面的示例：
-------------- ---------- -------- ---- -- --- ---- -------- ---
在上述示例中，浏览器将保存资源 60 秒钟。在此期间，浏览器将使用缓存的文件而不是请求服务器。如果文件的改动在 60 秒钟内，则会使用缓存的版本。否则，浏览器将发送新的请求以获取最新版本的文件。
协商缓存的工作方式是使用 ETag 和 Last-Modified 标头来检查资源是否已更新。比如下面的示例：
-------------- ---- -- --- ---- -------- --- ----- ----------------------
在上面的示例中，服务器将对资源进行版本标记。一旦资源被标记，客户端将向服务器发送请求，并使用 If-None-Match 和 If-Modified-Since 标头来检查资源是否已更新。
避免缓存过期
现在我们已经了解了缓存机制的工作原理，接下来就是如何优化应用程序以避免缓存过期。
- 在静态资源的 URL 中包含版本号
将版本号包含在 URL 中是避免缓存过期的最基本方法。通过更新 URL 中的版本号，浏览器将认为资源已经过时。例如：
----- ---------------- ---------------------------
在上述示例中，如果您更新了 styles.css 文件，则可以更改版本号，例如 /css/styles.css?v=3。
- 使用文件哈希
文件哈希是另一种为静态资源使用的版本控制技术。它的工作原理是为每个文件生成唯一的哈希值，并使用哈希值来命名文件。
----- ---------------- --------------------------------
在上述示例中，哈希值是唯一的，所以即使您更新了文件，文件名也会更改，从而使浏览器重新加载文件。
有许多工具可以为您自动添加哈希值，例如 Webpack 和 Gulp。
- 设置适当的 HTTP 标头
通过使用适当的 HTTP 标头，可以控制浏览器缓存过程。 Cache-Control 标头允许您设置缓存的最长时间：
-------------- ----------------
在上述示例中，资源将被缓存 一年。请注意，以秒为单位指定 max-age，而不是分钟或小时。
Expires 标头可让您指定资源何时过期：
-------- ---- -- --- ---- -------- ---
在上述示例中，资源将被缓存一年，但是过期日期是 2022 年 1 月 19 日。
- 版本控制所有内容
不仅仅是静态资源需要版本控制。 HTML、JavaScript、CSS 和其他动态内容也需要版本控制。确保每个文件都可以独立地进行版本控制，并在每个文件发生更改时进行更新。
- 选择正确的缓存类型
选择正确的缓存类型，可以极大地优化缓存机制。强缓存适用于不会频繁更改的资源。对于更经常发生更改的资源，协商缓存通常是更好的选择。
在实际中，正确地管理缓存是有点复杂的, 有时候需要各种方式的缓存混合使用。无论您选择哪个策略，都要测试和调整以获得最佳效果。
结论
缓存是提高性能的关键，但过期缓存可能会对性能造成负面影响。在本文中，我们深入了解了浏览器缓存机制的工作原理，并介绍了可以避免缓存过期的最佳实践。
避免缓存过期要点：
- 在静态资源 URL 中包含版本号
- 使用文件哈希
- 设置适当的 HTTP 标头
- 版本控制所有内容
- 选择正确的缓存类型
通过遵循这些最佳实践，我们可以优化 Web 应用程序以减少缓存过期对性能的影响。
示例代码：
---- ------ --- ----- ---------------- -------------------------------- ---- ------ --- -------------- ---------------- -------- ---- -- --- ---- -------- ---
-- -----
----- ------- - --
----- ------ - ---------------------------------
---------- - -----------------------------
----------------------------------
-- ----
------------------ -
-------- -
---------------- ----------------------
-
---------------- -- -
-- ---------------- --- ---- -
-- --- ------ -------
- ---- -
-- --- --- ----
-
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710379f5f55128102697a0f