解决前端html页面缓存的问题

原创已于 2022-03-25 10:36:43 修改 · 4.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #缓存 #html

于 2022-03-14 15:41:40 首次发布

本文介绍了前端HTML页面缓存的三个部分：页面内容、CSS和JS文件，并提供了相应的解决策略。通过设置HTTP头信息的Cache-Control和Expires，可以控制页面缓存行为。对于CSS和JS，更新版本号是常见做法。此外，还提到了Chrome开发者工具的Disable cache选项以及针对Safari浏览器的body添加class=“no-cache”的方法。

对于一个html页面，缓存分3部分，一个是页面内容，一个是css样式，一个是js文件

1、页面内容

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法：

1) no-cache:强制缓存从服务器上获取新的页面

2) no-store: 在任何环境下缓存不保存任何页面

HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

2、CSS和JS文件

<link rel="stylesheet" href="../css/register.css"/>
<script src="../scripts/register.js"></script>
改成
<link rel="stylesheet" href="../css/register.css?v=20161020"/>
<script src="../scripts/register.js?v=20161020"></script>

就是只要在每次修改后改一下版本号即可

这样每次修改后都要改，有没有自动加版本号的东西，估计有，如果是JSP和php可以通过脚本
自动生成，如果是纯html也可以通过document.write，或者用动态加载JS的框架啥的。

3、chrome：

现在新版的Chrome在developer Tools（F12调出来）的Settings（右下角有个齿轮标志）中有了个Disable cache选项。勾了便可以。（只适用于咱们开发人员老板们不懂，所以还是代码清理缓存吧）

4、在body元素里边添加class=“no-cache”这个类，第三个方法是专门针对清除Safari浏览器缓存的

if (isSafari()) {
$(window).bind("pageshow", function (event) {
if (event.originalEvent.persisted && $('body').hasClass("no-cache")) {
document.body.style.display = "none";
window.location.reload();
}
});
}

function isSafari() {
if (navigator.userAgent.indexOf("Safari") > -1) {
return true;
}
return false;
}