美文网首页Web前端之路让前端飞Web 前端开发
如何让前端强制从服务器拉取最新资源(html、css、js、图像

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

作者: 一只好奇的茂 | 来源:发表于2017-05-14 16:24 被阅读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>

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

图像禁止缓存

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

css禁止缓存

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

参考:

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

相关文章

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

    为了加快浏览器访问速度,降低服务器压力,浏览器一般自动缓存html页面、 图片、Js及css文件,如需改变这种缓存...

  • 浅谈H5页面性能优化1

    传统流程 通常将html、js、css等静态资源放入cdn上,然后页面加载后,再通过CGI去拉取最新的 数据,进行...

  • http 缓存之实践联系

    使用场景说明 前端部署的资源是静态文件,大致可分为两类 html css、js、img、iconfont 强制缓存...

  • MDN

    前端HTML/CSS/JS

  • 浏览器背后的故事

    当服务器提供了资源之后(HTML,CSS,JS,图片等),浏览器会执行下面的操作: 解析 —— HTML,CSS,...

  • 关于前端项目部署发布的相关思考

    公司前端项目部署现状 将 html 托管给后端,前端只发静态资源(index.js/index.css),然后通过...

  • Ajax前端技术

    Ajax前端技术 前端技术:在浏览器中执行的程序都是前端,html , css,js等等后端技术:在服务器中执行的...

  • 前端学习资料

    前端 Html+CSS+JS Web前端开发之HTML+CSS精英课堂【渡一教育】 Web前端开发之JavaScr...

  • 搜索框模糊查询

    前端html代码 前端js代码 前端css代码 后端php返回json

  • HTML

    html+css+javascript 称作前端三剑客,html主要做前端的骨架,css做前端的效果,js做前端的...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/yquqxxtx.html