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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对于一个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;
}

工作之余 用博客记录自己 希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值