day1:前端缓存问题

❝

「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。篇幅不会过长，方便理解和记忆。

❞

❝

「主要面向群体：」前端开发工程师（初、中、高级）、应届、转行、培训等同学

❞

Day1-今日话题

「前端web项目缓存问题如何处理？」

项目版本更新后，在不进行手动刷新的前提下，再次打开网页，发现还是上一次的版本。如何实现用户无需手动刷新便就能看到最新版本的内容？（「手动刷新和重新打开网页的区别」见下文拓展）

成因

这种情况通常是由于浏览器缓存机制引起的。浏览器为了提高页面加载速度和减少服务器负载，会将一些资源（如样式、脚本、图像等）缓存到本地。这意味着当网页更新时，浏览器可能仍然加载之前缓存的旧版本资源，导致看到的是旧的页面内容。以下是一些可能导致这种情况的原因：

1. 「缓存控制头部不正确：」 如果服务器没有正确设置缓存控制头部（如 Cache-Control 和 Expires），浏览器可能会根据过期时间来决定何时重新请求资源。如果过期时间设置得过长，浏览器可能会继续使用缓存的资源。

2. 「浏览器本地缓存」： 浏览器会在本地存储缓存的资源，即使服务器上的资源已经更新。浏览器可以根据缓存策略决定是否使用本地缓存，而不是向服务器重新请求。

3. 「资源 URL 没有变化」： 如果资源 URL 没有发生变化（文件名没变），浏览器可能会认为资源没有更新，因此继续使用缓存的版本。

4. 「代理服务器的缓存」： 如果网页在代理服务器后面，代理服务器可能会缓存资源，导致更新不及时。

5. 「使用 Service Worker」： 如果使用了 Service Worker 技术，它也可能缓存资源并在离线情况下提供内容。在这种情况下，需要正确配置 Service Worker 来确保它在资源更新时更新缓存。

解决

1. 「更改资源链接的URL参数」 在资源（如样式表、脚本或图像）的URL中添加一个不同的参数（版本号或时间戳），这会让浏览器认为链接是一个新的资源，从而强制重新下载。例如，将链接从 styles.css 修改为 styles.css?v=2，其中 v=2 是一个随机值或者资源版本号。

2. 「使用meta标签」 在HTML文档的部分中，你可以添加一个meta标签来控制浏览器的缓存行为，这些meta标签的组合会告诉浏览器不要缓存页面内容。以下是一个例子：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

3. 「版本化文件名」 在每次更新资源时，将资源的文件名修改为新的版本号。例如，从 styles-v1.css 更新为 styles-v2.css。这样做会迫使浏览器下载新版本的资源，而不使用之前的缓存。

4. 「修改HTTP头部：」 服务器端可以通过修改HTTP响应头部来影响浏览器的缓存行为。常见的响应头部包括Cache-Control和Expires。通过设置适当的值，可以告诉浏览器不要缓存特定资源或页面。例如，在服务器端设置以下HTTP头部，可以禁止浏览器缓存：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

5. 「使用服务端技术：」 如果有服务器端的控制权，可以通过更改资源URL或响应头来实现缓存控制。服务器端的缓存控制可以更精确地管理资源的缓存策略。

拓展

手动刷新和重新打开页面的区别

1. 重新打开页面： 重新打开页面意味着关闭当前浏览器选项卡或窗口，然后再次打开一个新的选项卡或窗口，输入网址或通过书签进入页面。在重新打开页面时，浏览器会尝试使用缓存的资源来加速页面加载，因此可能会看到之前加载过的资源。这是因为浏览器默认会尽量避免重新下载已缓存的资源，以提高页面加载速度。

2. 手动刷新： 手动刷新意味着您点击浏览器的刷新按钮或使用快捷键（如 F5 或 Ctrl+R）。这会告诉浏览器强制重新加载页面，并且会忽略缓存，从服务器重新获取所有资源。手动刷新通常用于测试新的更改、修复缓存问题或确保加载最新版本的资源。

「关键区别：」

1. 重新打开页面可能使用缓存的资源，导致您看到之前版本的内容。
2. 手动刷新会忽略缓存，确保您加载的是最新版本的资源和内容。

本文由 mdnice 多平台发布