如何让前端强制从服务器拉取最新资源（html、css、js、图像
2017-05-14 本文已影响791人
一只好奇的茂
为了加快浏览器访问速度，降低服务器压力，浏览器一般自动缓存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>
做到了应该缓存的时候缓存静态文件，当版本有更新的时候从获取最新的版本，并更新缓存.
图像禁止缓存
css禁止缓存
<link rel="stylesheet" type="text/css" href="css/style.css?ver=版本号″ />
