原创｜前端缓存引发的生产问题和解决方案

一天，客服反馈，说用户购买某一产品时，提交订单失败，并发来用户的接口提示。我一看，这不是昨天晚上升级之前的页面吗？昨天验证过没有问题呢。为什么用户看到的是老的页面？应该是缓存的原因。回客服，让客户多刷新下页面，重新购买就可以了。

问题倒是解决了，但是客户体验非常不好，不能让老客户进来都重多次刷新页面吧！有没有方法可以解jsp、html或者js的缓存问题呢？

前言

解决前端缓存问题，就需要页面加载的时候，不去读取浏览器的缓存，而是从Web服务器上重新获取页面。

方法的讲解
Jsp、html缓存的解决
Js、css缓存的解决

一、方法讲解

服务端方法

response.setHeader("Pragma","No-cache"); 
response.setHeader("Cache-Control","no-cache"); 
response.setDateHeader("Expires", -10);

Pragma头域用来包含实现特定的指令，最常用的是Pragma:no-cache。在HTTP/1.1协议中，它的含义和Cache- Control:no-cache相同。

Cache -Control指定请求和响应遵循的缓存机制,no-cache指示请求或响应消息不能缓存。

Expires 响应头包含日期/时间，即在此时候之后，响应过期，无效的日期，比如 -10, 代表着过去的日期，即该资源已经过期。

客户端方法

meta 是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的＜head＞与＜/head＞中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和 keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：

name 属性

1、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；

2、＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；

3、＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；

4、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；

http-equiv属性

1、＜meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"＞和＜meta http-equiv="Content-Language" contect="zh-CN"＞用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、 shift-Jis、Euc、Koi8-2等字符集；

2、＜meta http-equiv="Refresh" contect="n;url=http://yourlink"＞定时让网页在指定的时间n内，跳转到页面http;//yourlink；

3、＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

4、＜meta http-equiv="Pragma" contect="no-cache"＞是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5、＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6、＜meta http-equiv="Pics-label" contect=""＞网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7、＜meta http-equiv="windows-Target" contect="_top"＞强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8、＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)"＞和＜meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion =6)"＞设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

二、Jsp、html缓存的解决

前端页面处理方法

禁止客户端缓存要在<head>中加入类似如下内容：

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">

不设置超时时间

<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
%>

设置超时时间10分钟

<%
int minutes = 10; 
Date d = new Date(); 
String modDate = d.toGMTString(); 
String expDate = null; 
expDate = (new Date(d.getTime() + minutes * 60000)).toGMTString(); 
response.setHeader("Last-Modified", modDate); 
response.setHeader("Expires", expDate); 
response.setHeader("Cache-Control", "public"); // HTTP/1.1 
response.setHeader("Pragma", "Pragma"); // HTTP/1.0 
%>

后端处理方法

public class CacheJiejue extends HttpServlet { 
 public void doGet(HttpServletRequest request, HttpServletResponse response) 
 throws ServletException, IOException { 
 response.setContentType("text/html;charset=utf-8"); 
 //指定该页面不缓存 
 response.setDateHeader("Expires",-1); //IE游览器支持的 
 //保证兼容性 
 response.setHeader("Cache-Control", "no-cache"); 
 response.setHeader("Pragme", "no-cache"); 
 } 
 
 public void doPost(HttpServletRequest request, HttpServletResponse response) 
 throws ServletException, IOException { 
 this.doGet(request, response); 
 } 
 
}

三、Js、css缓存的解决

Js或者css会被浏览器缓存下来，只有浏览器重启后才会删除，甚至重启都不会删除。这样用户可能看到的就是缓存的页面效果。会照成生产问题。怎么解决呢？

方法一

在js或者css地址后面添加时间戳或者随机数，这样每次请求都是新的地址，可以骗过浏览器的缓存，每次去服务器获取最新的代码。但是每次都去请求服务器获取新的代码，会占用带宽。

 <link rel="stylesheet" href="/Resource/css/webapp_reset.css?s=<%=System.currentTimeMillis()%>"/>
 <script type="text/javascript" src="/Resource/js/mobiscroll.custom-2.16.1.min.js?s=<%=Math.random()%>" ></script>

方法二

可以添加版本号，每次修改的话在地址后面生成新的版本号，可以用系统时间作为当前更新的版本号。

<script type="text/javascript" src="/Resource/js/mobiscroll.custom-2.16.1.min.js?version=20190908" ></script>

搞定！！喜欢的朋友可以关注下~

言

最近写博客真的是太痛苦了，倒不是写博客本身，而是写完之后往多个平台发布的过程，一不注意就是十多分钟往上的时间消耗。

为了解决这个问题，之前立项的“解决自媒体一键多平台发布”项目必须得立刻着手完善了，争取早日让自己从发布这件事情上解脱出来专心写文章。

【hxsfx的JavaScript库】这个系列基本上是为“一键多平台发布”项目打基础用的。之所以把各个功能模块拆分出来，是为了尽量让小伙伴能够复制即用（在兼容性方面，因为个人能力的原因，几乎只会兼容Chrome浏览器）。

hxsfx.ajax库

（一）介绍

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML），开发hxsfx.ajax库的主要目的就是希望通过异步加载HTML，从而尽量避免直接在js中写HTML来刷新页面内容。

hxsfx.ajax这个库与jquery的ajax功能基本一致，不过短时间内应该是写不到人家那么完善的。哈哈~

各位小伙伴别问，为什么不用jquery的ajax而要自己再写一个呢？

问就是，博主喜欢造轮子。开玩笑了~

其实原因是为了减少三方库的依赖，达到对项目的全面掌控。

项目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代码

要自己开发一个ajax库，需要借助Web API接口中的XMLHttpRequest（XHR）对象。

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

1、在window对象上新建一个hxsfx对象，本系列的所有库基本都会在hxsfx对象之中：

//hxsfx.js
(function () {
    window.hxsfx = {};
})();

2、在hxsfx对象的基础上新建一个ajax对象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
    };
})();

3、在ajax对象中新建loadHTML方法，设置两个参数，分别是ele准备加载HTML的容器元素和url加载HTML的地址：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
        }
    };
})();

4、在loadHTML方法中新建XMLHttpRequest对象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //为了让代码更健壮，使用try...catch来捕获返回状态判断和处理HTML代码的异常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                              //在这处理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")请求出错】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")异常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

5、为了解决加载HTML缓存的问题，将loadHTML方法中传入的URL参数后面加上一个时间戳：

//ajax.js
//时间戳用来解决加载页面缓存的问题
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

6、【重点】在这处理返回的HTML时，如果直接将HTML加载到容器中，会出现HTML中Javascript代码不执行的问题。解决这个问题，需要将加载的script标签替换为script元素：

//ajax.js
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
    var scriptElement = document.createElement("script");
    scriptElement.setAttribute("type", "text/javascript");
    var src = scriptElements[i].getAttribute("src");
    if (src) {
        //因为加载的src路径是之前相对加载HTML页面的，需要修改为当前页面的引用路径
        src = url.substring(0, url.lastIndexOf('/') + 1)  + src;
        src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
        scriptElement.setAttribute("src", src);
    }
    var scriptContent = scriptElements[i].innerHTML;
    if (scriptContent) {
        scriptElement.innerHTML = scriptContent;
    }
    //用生成的script元素去替换html中的script标签，以此来激活script代码
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代码：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //时间戳用来解决加载页面缓存的问题
            var urlTimeStamp = "timeStamp=" + new Date().getTime();
            url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //为了让代码更健壮，使用try...catch来捕获返回状态判断和处理HTML代码的异常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                            ele.innerHTML = httpRequest.responseText;
                            var scriptElements = ele.getElementsByTagName("script");
                            for (var i = 0; i < scriptElements.length; i++) {
                                var scriptElement = document.createElement("script");
                                scriptElement.setAttribute("type", "text/javascript");
                                var src = scriptElements[i].getAttribute("src");
                                if (src) {
                                    //因为加载的src路径是之前相对加载HTML页面的，需要修改为当前页
                                    src = url.substring(0, url.lastIndexOf('/') + 1) + src;
                                    src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                                    scriptElement.setAttribute("src", src);
                                }
                                var scriptContent = scriptElements[i].innerHTML;
                                if (scriptContent) {
                                    scriptElement.innerHTML = scriptContent;
                                }
                                //用生成的script元素去替换html中的script标签，以此来激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")请求出错】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")异常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）调用文档

1、将hxsfx.js和ajax.js放入Scripts文件夹中的hxsfx文件夹

2、在Scripts文件夹同级目录新建index.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js库测试</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload = function () {
                //调用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>

3、在Scripts文件夹同级目录，首先新建Views文件夹，接着其中新建test文件夹，最后在test文件夹中新建testPage.html

<style>
    div#TestPageContainer {
        height: 300px;
        width: 300px;
        background-color: #F0F0F0;
    }
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
    function updateBackgroundColor() {
        try {
            var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
            document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
        }
        catch (ex) {
            console.log(ex.message);
        }
    }
</script>
<div id="TestPageContainer">
    <button onclick="updateBackgroundColor()">更改背景色</button>
    <button onclick="modifyPFontColor()">更改下面一句话的字体颜色</button>
    <p id="P">这儿是一句话。</p>
</div>

最后

以上内容只是hxsfx.ajax库的开始，后续的内容更新小伙伴可以通过访问Github项目地址进行获取。

迎关注我的头条号：Wooola，专注于Java、Golang、微服务架构，致力于每天分享原创文章、快乐编码和开源技术。

前言

最近发版前端项目，用户经常反馈新添加功能在线上环境不好用，常出现新老页面并存的状况。经前端同事排查法发现，实际上只需要重新刷新一下页面就没事了。但是每次去通知用户肯定不现实，所以需要对前端的js和css等文件采取一定的缓存失效的措施，强制浏览器重新去服务器获取新的js代码以及css文件。

楼主经过实际的项目情况反馈，总结以下两点切实可行的办法，分享给大家，希望对大家有帮助。

路径后面加时间戳或者随机数的方式
采用hash（md5）重命名文件

路径后面加时间戳或者随机数的方式

时间版本号

如果每次发布，针对修改过的js或者css文件路径加上时间的版本号，一般以年月日拼写。

<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

如果发生紧急情况，需要在一天当中对某些css或者js文件多次发版，可以把时间精确到时分秒。

目前楼主主推采用加版本号的方式，因为文件太多，只能做增量修改。好处是没有做任何修改js或者css文件可以不用加版本号。

采用随机数

document.write('<script src=\".lib/common.js?r=' + Math.random() + "\"" + '><\/script>');

一般不建议用随机数的方式，因为每次刷新页面，随机数都会变化，那么浏览器认为一个新的url需要重新请求服务端获取js或css文件，不会在使用浏览器本地缓存。同时占用网络带宽，影响服务器响应速度。

采用hash（md5）重命名文件

可以利用 gulp-rev或者webpack

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

例如百度搜索首页，就是利用hash给js和css文件重命名。

在线咨询

上一篇：初步认识html标签
下一篇：原生CSS3教你写一个漂亮的，带动画的checkbox效果

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商