美文网首页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、图像

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