将随机数添加到.css，使其不会缓存

我正在尝试获取样式.css不缓存，因为服务器在缓存时遇到 css 问题。

<script>
var numBAH = Math.floor(Math.random()*100);
</script>
<link href="styles.css+ numBAH +" rel="stylesheet" type="text/css" />

您可以在文档的头部执行此操作：

<script>
document.write('<link href="styles.css?r='+ Math.floor(Math.random()*100) +'" rel="stylesheet" type="text/css" />');
</script>

但：

你很有可能找到两倍相同的数字
通常不应避免缓存

我提出的解决方案：

1）使用(new Date()).getTime()而不是随机数

2）只需在版本更改时更改数字：styles.css?v=3（无JavaScript）

如果您可以访问服务器端语言，那么使用查询字符串呈现链接标记会更整洁，该查询字符串是文件整个内容的哈希值。这样，缓存无效器 ey 只会在文件内容实际更改时更改。

在看了后面关于你永远不想使用缓存的讨论之后，因为它加载得太快了，我想改变我的答案。不是new Date()，而是：修复您的页面，以便快速加载是所需的结果。如果您对此有具体问题，请创建一个针对这些问题的问题，不要直接采用糟糕的解决方法。

缓存无效化可以在没有服务器端渲染的情况下工作。我在移动设备和桌面上测试了最新版本的Firefox，chrome和safari，此代码有效。（不过，我不确定IE..）

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    var numBAH = Math.floor(Math.random()*10000);
    document.write('<LI' + 'NK HREF="./path/to/style.css?cacheBusting='+numBAH+'" rel="stylesheet">');
    </SCRIPT>
</HEAD>

相关内容

最新更新

热门标签：