可能你已注意到上面的 CSS 文件链接都加上了一个版本号,格式如:
<link rel="stylesheet" type="text/css" href="{CSS文件连接地址}?v=XXXXXXXX"/>
当页面对应的 CSS 或 JS 发生更新,如果文件链接未发生改变,由于浏览器缓存的时候是以 URL 作为存储单位,那么页面使用的 CSS 或 JS 仍然是浏览器之前缓存的文件,而不是最新文件。但也是因为浏览器是以 URL 作为存储单位进行缓存,当页面的 CSS 或 JS 文件更新时,我们只需要更改链接中的版本号,浏览器由于没有新的 URL 对应的缓存文件,就会重新下载该文件。
同样,这里也会引来另外一个问题,就是版本号如何生成?网上通常做法就是发布的时候,版本号改为发布日期或者时间戳,这对于一两个文件更新时,版本号更新没什么问题,但对于 CSS 和 JS 较多的网站,发布时版本号的维护成本是比较高的,也存在版本号忘记更新的可能。
对于上述问题,我觉得有个更为妥当的方式,就是版本号使用文件的 Md5,当文件未更新时 Md5 保持不变,而文件更新时文件 Md5 会发生变化,这就将所有文件版本号统一进行生成,不管是否更新,生成规则是一致的,减少了维护成本。同时,我也推荐 ASP.NET 中 Razor 标记生成版本号,原理与按文件 Md5 生成版本号类似。ASP.NET 中 Razor 标记用法如下:
<link rel="stylesheet" href="~/themes/@theme/css/custom.css" type="text/css" media="all" asp-append-version="true" />
<script type="text/javascript" src="~/themes/@theme/js/jquery.js" asp-append-version="true"></script>
关键在于后面的:asp-append-version="true",意思是开启附件版本号。