html - 一小部分用户加载几天前的 HTML？

Question

我们有一个拥有超过 50.000 名活跃用户的页面。有时，当我们在更改后端和前端的地方进行更新时，我们会看到一小部分似乎加载旧 HTML 的人出现 JavaScript 错误。 (它找不到对象 X，因为我们在后端从 JSON 中删除了它)。

我们至少在 Android 和 IOS 设备上都看到了这一点，但也可能在桌面浏览器上看到了这一点。

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

我感觉这与书签或非常旧的标签有关。

• 这是一个众所周知的常见问题吗？
• 加载旧 HTML 的原因可能是什么？
• 有什么反对的吗？

我不认为我们的用户正在经历一些真正负面的事情(也许这是一个预加载，他们甚至没有看到它)，但它制造了很多噪音来隐藏我们可能遇到的真正问题。

其中一个页面的示例:https://poules.com/en/pools/aaygun96-wk-poule/world-cup-2018/ranking

Answer 1

这其实是缓存的通病。因此，您可以采取一些措施来避免或减少问题。

1. 向文件名添加哈希 - 缓存清除«这对 Assets 特别有效»。
   如果您在构建链中使用 webpack、gulp 或 grunt 之类的东西，那么这很容易。这意味着您所有的 javascript、css 或其他文件都应该在名称中嵌入一个随 secret 钥，例如 bundle-21mn3j32j2.js这将确保它们焕然一新。

2. 也喜欢添加散列，有时效果不佳，在 urls 处向此文件添加版本 - 添加查询字符串。
   在这种情况下，您将添加类似 myscript.js?v=26062018 «实际上您可以经常看到它。»这里有一篇很好的文章，why not to use it
   关于 Why and How to Use Cache Busting

3. 为您的文件使用服务器上的缓存配置。
   在这种情况下，配置文件的响应 header «这特别适用于初始文件，如 index.html，您将无法在其中添加哈希»。
   使用类似 Etags 的配置Cache-Control和 Here more .
   是的，这取决于服务器，所以我会为主要的 «apache、nginx 和 IIS» 添加 url。Etags 的使用非常有趣，因为它会在文件更改时告诉浏览器。

现在，我的建议和我正在做的事情。制作一个小的 index.html 文件并将其从缓存中取出或为此文件使用非常好的 Etag 配置，使用 webpack(或其他之一)对所有依赖项使用哈希缓存清除，为图像、音频制定缓存策略，等等

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

最后一个建议，使用 cloudflare.com它使所有这些微调等操作变得容易。

阅读:
- Related to Webpack, cache and filename hashing
- Cache Busting Front-end Resources: Is File Name Revving Still Necessary?- Cache-control

关于服务器缓存:
- Apache , 和 here
- Nginx , 和 here
- ISS

希望对你有帮助。