如何让前端强制从服务器拉取最新资源(html、css、js、图像)

为了加快浏览器访问速度,降低服务器压力,浏览器一般自动缓存html页面、 图片、Js及css文件,如需改变这种缓存机制,每次访问均从服务器拉取最新资源,具体可以操作如下:

html页面禁止缓存

http://hi.marsthink.com?v=20150316

禁止缓存:

  • html在头部加如下代码:
<HEAD> 
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="Expires" CONTENT="0"> 
</HEAD>
  • asp代码如下:
Response.Buffer = True 
Response.ExpiresAbsolute = Now() - 1 
Response.Expires = 0 
Response.CacheControl = "no-cache" 
Response.AddHeader "Pragma", "No-Cache" 
  • php代码如下:
<?php 
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); 
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT'); 
header('Cache-Control: no-cache, must-revalidate'); 
header('Pragma: no-cache'); 
?>

js禁止缓存

方法一:
<script>
document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+
Math.random()+"'></scr"+"ipt>");
</script>

// 方法二:   
var  js = document.createElement( " script " )  
js.src = " test.js " + Math.random()  
document.body.appendChild(js)  

以上两种办法,均导致js永远无法缓存,现有改进方法如下:

<script src="test.js?ver=113"></script>

做到了应该缓存的时候缓存静态文件,当版本有更新的时候从获取最新的版本,并更新缓存.

图像禁止缓存

![](test.jps?ver=版本号) 

css禁止缓存

<link rel="stylesheet" type="text/css" href="css/style.css?ver=版本号″ />

参考:

gulp自动添加版本号?v=e23f4

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容