前端资源文件缓存清除一法 | 影の域

影の域

关注web前端,追逐html5脚步,体会code人生

前端资源文件缓存清除一法

| 6,341 点击

对于前端开发来说,经常要面对JS,CSS,图片等资源的缓存更新问题(CDN永久缓存的就另当别论)。

大部分情况,为了节省服务器压力及带宽且又不失可维护性,习惯对这些资源文件添加比较久的缓存时间,这样就给前端开发人员带来一个自动更新的棘手问题。

其实,较简单的解决办法,就是固定周期或有条件的或每次(这样要缓存何用?)的增加随机数击穿缓存,强制更新即可。

这里说一个也较为简单的方式,利用AJAX的访问来更新本地缓存。

原理很简单,使用http协议的 If-Modified-Since 和 Cache-Control 两个header头参数即可。

脚本举例:

var xhr = false;
try {
 xhr = new XMLHttpRequest();
} catch(e1) {
 try {
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e2) {
  try {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (failed) {
   xhr = false;
  }
 }
}
if (xhr) {
 xhr.open('GET', '要缓存的资源文件地址');
 xhr.setRequestHeader('If-Modified-Since', '0');
 xhr.setRequestHeader('Cache-Control', 'no-cache');
 xhr.send();
}

当然,这种做法有一个显而易见的局限性,就是不能跨域更新。

不过换个思路也可以简单解决,把这个更新服务脚本分别部署到有需要的资源文件服务器上即可。

就如腾讯,微博里就很多在这样使用。

腾讯的更新服务页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>更新文件--Ptlogin</title>
<script>
function cleanCache(f){
 var xmlHttp = false;
 try {
   xmlHttp = new XMLHttpRequest();
 } catch (trymicrosoft) {
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
     try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (failed) {
      xmlHttp = false;
     }
    }
  }
 if (!xmlHttp){
  alert("请按F5刷新页面");
  return;
 }
 xmlHttp.open('GET', f);
 xmlHttp.setRequestHeader('If-Modified-Since', '0');
 xmlHttp.setRequestHeader('Cache-Control', 'no-cache');
 xmlHttp.send();
}
if (location.hash){
 //var file = location.hash.substring(1,location.href.length);
 var file = location.href.substring(location.href.indexOf("#")+1, location.href.length);
 cleanCache(file);
}
</script>
</head>
<body>
</body>
</html>

使用上,很明显,利用IFRAME去访问此页面即可。而部署,则会将此文件复制多份,部署在需要更新的资源服务器对应目录内。