Question

我们有一个拥有+50.000有效用户的页面。有时，当我们进行更新时同时更改后端和前端时，我们会看到一小部分似乎加载了旧HTML的人出现JavaScript错误。（它找不到对象X，因为我们从后端的JSON中删除了它）。

我们至少在Android和IOS设备中都见证了这一点，但在台式机浏览器中也见证了这一点。

这可能是更改代码后的几天。

我觉得这与书签或真正的旧标签页有一定关系。

我认为我们的用户并没有真正感到消极的事情（也许是一个预加载，他们甚至没有看到它），但是它却制造了很多噪音，掩盖了我们可能遇到的实际问题。

Answer 1

这实际上是缓存的常见问题。因此，您可以采取一些措施来避免或减少问题。

在文件名中添加哈希-缓存清除«这对资产特别有用»。
如果您在构建链中使用了webpack，gulp或grunt之类的东西，这很容易。这意味着您所有的javascript，css或其他文件都应在名称上嵌入一个随机密钥，例如bundle-21mn3j32j2.js 这将确保它们将是全新的负载。
就像添加哈希（有时效果不佳）一样，在URL处向此文件添加版本-添加查询字符串。
在这种情况下，您将添加类似myscript.js？v = 26062018的内容«实际上您经常会看到这一点。» 这里有一篇不错的文章，why not to use it
还有关于Why and How to Use Cache Busting
使用服务器上的缓存配置，用于文件。
在这种情况下，请配置文件的响应标头«“这特别适用于index.html之类的初始文件，在其中您将无法添加哈希”。
使用Etags Cache-Control和Here more之类的配置。
是的，这取决于服务器，因此我将为主要的«apache，nginx和IIS»添加url。 Etags的使用非常有趣，因为它告诉浏览器文件何时更改。

现在，我的建议以及我正在做什么。制作一个小的index.html文件，并将其移出缓存，或者对该文件使用非常好的Etag配置，使用webpack（其他方法之一）对所有依赖项使用哈希缓存无效化，针对图像，音频，等

请记住，从缓存中删除的所有内容都会增加带宽消耗，缓存中的所有内容都可以节省带宽并提高速度。

最后一个建议，使用cloudflare.com，可以轻松进行所有这些微调，甚至更多。

关于服务器上的缓存：
-Apache和here
-Nginx和here
-ISS

希望对您有帮助。

Answer 2

看看您的页面代码，这是服务器响应标头为我提供的HTML文档：

Cache-Control: private, no-transform, s-maxage=0

打破现状：

私有意味着只有我的机器可以缓存它，没有代理服务器。

不进行转换意味着代理应该保留内容类型，编码和范围标头。

s-maxage表示将响应视为新鲜的秒数。它的优先级高于max-age，但实际上，s-maxage仅是公共（即代理）缓存的指令，而私有缓存只会忽略它。尝试使用最大年龄。

Answer 3

miknik对发生的事情做出了很好的回答。我希望我能更多投票。

除了缓存清除之外，我还想添加一个额外的选项来处理这种情况，因为我认为这种情况在许多情况下都是过度使用和欠佳的。

首先，“过期”缓存非常常见。几乎计算机中的所有东西都有某种缓存方案，通常是多层缓存。

我建议使用适合您API的版本。客户端将发送其版本到中央端点和/或请求版本端点。该API可以根据版本执行以下两项操作之一：

这将使人们可以尽可能长地使用其缓存版本，从而减少了负载并提高了性能和用户体验。这样还可以避免所有这些无关紧要的错误的发生，因为版本调整会适当处理它。

最终，用户的缓存将过期，并且他们将与您保持最新。或最终，您将向他们发送该错误消息，然后他们将刷新其页面/清除cookie /所有内容以进行自我更新。