❝
《目标》：持续输出！ 每天分享关于Web后端常识、面试题、性能优化、新技术等内容。 文字不会太长，容易理解和记忆。
❞❝
【主要针对群体：】前端开发工程师（初、中、高级）、应届毕业生、转行、培训等朋友
❞Day1-明天的话题
《如何处理前端web项目缓存问题？》
项目版本更新后，再次打开网页没有自动刷新，发现还是最后一个版本。 如何让用户在不自动刷新的情况下看到最新版本的内容？ （“手动刷新和重新打开网页的区别”见下文扩展）
动机
这些情况一般是浏览器缓存机制造成的。 为了提高页面加载速度、减少服务器负载，浏览器会在本地缓存一些资源（如样式、脚本、图像等）。 这意味着当网页更新时，浏览器可能会一直加载之前缓存的旧版本资源，导致听到的是旧的页面内容。 以下是一些可能的原因：
“不正确的缓存控制面：”如果服务器没有正确设置缓存控制面（例如Cache-Control和Expires），浏览器可能会根据过期时间来决定何时重新请求资源。 如果过期时间设置得太长，浏览器可能会继续使用缓存的资源。
“浏览器本地缓存”：浏览器会将缓存的资源存储在本地，即使服务器上的资源已经更新。 浏览器可以根据缓存策略决定是否使用本地缓存，而不用重新请求服务器。
“资源URL没有改变”：如果资源URL没有改变（文件名没有改变），浏览器可能会觉得资源没有更新，所以继续使用缓存的版本。
“代理服务器缓存”：如果网页旁边有代理服务器，代理服务器可能会缓存资源，导致更新延迟。
“使用ServiceWorker”：如果使用ServiceWorker技术，它还可以缓存资源并离线提供内容。 在这些情况下，需要正确配置 ServiceWorker 以确保它在资源更新时更新缓存。
解决
“更改资源链接的 URL 参数” 在资源（例如样式表、脚本或图像）的 URL 中添加不同的参数（版本号或时间戳），这将使浏览器认为该链接是新资源，然后强制重新下载。 例如，将链接从 styles.css 更改为 styles.css?v=2，其中 v=2 是随机值或资源版本号。
“使用meta标签” 在HTML文档部分，您可以添加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">
每次更新资源时，“版本化文件名”都会将资源的文件名更改为新的版本号。 例如，从 styles-v1.css 更新到 styles-v2.css。 这样做将导致浏览器下载新版本的资源html 选项卡，而不使用以前的缓存。
“修改HTTP Belly：”服务器端可以通过改变HTTP响应Belly来影响浏览器的缓存行为。 常见的响应包括 Cache-Control 和 Expires。 通过设置适当的值，您可以告诉浏览器不要缓存特定的资源或页面。 例如，在服务器端设置如下HTTP颈可以严格禁止浏览器缓存：
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
《使用服务器端技术：》如果有服务器端控制，可以通过修改资源URL或者响应头来实现缓存控制。 服务器端缓存控制可以更精确地管理资源缓存策略。
扩大自动刷新和重新打开页面的区别
重新打开页面：重新打开页面意味着关闭当前浏览器选项卡或窗口，然后再次打开新选项卡或窗口，输入 URL 或通过书签单步进入该页面。 当重新打开页面时，浏览器会尝试使用缓存的资源来加快页面加载速度，因此可能会听到之前加载过的资源。 这是因为浏览器默认会尝试避免重新下载缓存资源以提高页面加载速度。
自动刷新：自动刷新是指单击浏览器的刷新按钮或使用快捷键（例如F5或Ctrl+R）。 这告诉浏览器强制重新加载页面，但忽略缓存并从服务器重新获取所有资源。 自动刷新通常用于测试新的修改、修复缓存问题或确保加载最新版本的资源。
“主要区别：”
重新打开页面可能会使用缓存的资源，导致您看到内容的先前版本。
自动刷新会忽略缓存html 选项卡，确保您加载最新版本的资源和内容。
发表评论