Alp*_*a2k 5 javascript caching google-chrome refresh
当使用外部 js 文件时，浏览器可能会被强制重新加载文件。见这里。
最近，我发现 INLINE 脚本也被缓存，至少在 Chrome 版本 80.0.3987.132 中，片段示例：
<html>
<head>
<script>alert("I am cached!");</script>
</head>
<body>
<script>alert("Me too!");</script>
</body>
</html>
刷新内联脚本的方法是什么？
更新 1：我不得不提到返回内容的网络服务器正在使用 HTTP 2.0
更新 2：一个有效的解决方案是以辅助脚本为基础，当页面加载时通过 ajax 或 websocket 获取“真实”脚本内容，然后将其附加到头部，如下所示：
function addScript(content){
let s = document.createElement('script');
s.innerHTML = content;
document.head.appendChild(s);
}
这可以完成工作，但它不是最佳的，因为它需要比必要更多的请求。
更新 3：从后端发送的标头似乎都不起作用，使用这些标头：
Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") // HTTP 1.1.
Header().Set("Pragma", "no-cache") // HTTP 1.0.
Header().Set("Expires", "0") // Proxies.
更新 4：根据 Jinxmcg 的回答，文档https://v8.dev/blog/code-caching-for-devs Don’t change URLs提到：
我们可能有一天决定将缓存与源文本而不是源 URL 相关联，这个建议将不再有效。
可能这一天已经到来，也适用于内联脚本。
谢谢大家的参与
最终解决方案（至少在我的情况下有效）：
1 后端标头：
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate, max-age=0") // HTTP 1.1.
w.Header().Set("Pragma", "no-cache") // HTTP 1.0.
w.Header().Set("Expires", "0") // Proxies.
2 HTML、JS 和 CSS 中的随机字符串，例如：
<html>
<head>
<style>
--cache-color: #8528cc; //Random hex color generated by backend
</style>
<script>
console.log("<?php echo date(); ?>");
alert("I am cached!");
</script>
</head>
<body>
<div>Hidden DIV with a random value: <?php echo date(); ?></div>
<script>
console.log("<?php echo date(); ?>");
alert("Me too!");
</script>
</body>
</html>
我认为浏览器仅在为该会话中的后续调用打开页面时才会缓存内联 javascript，并且在您关闭或刷新页面后不会保留它。
但是，这意味着在您的情况下，浏览器会从其缓存中获取 HTML（包括 JS）。因此，您可以尝试随页面一起发送一些标题，以强制浏览器不使用缓存的 HTML 副本并使用新的 html+js。
为了测试它是 HTML 缓存还是“内联 JS”缓存问题，让您的 html 动态更改并确认它在刷新时正在更改但内联 JS 执行没有。
您可以在此处找到有关 js 缓存的更多详细信息：https : //v8.dev/blog/code-caching-for-devs
| 归档时间： |
|
| 查看次数： |
907 次 |
| 最近记录： |