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

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

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