小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[解决方案]解决由于浏览器缓存导致的无法加载到最新css文件、js文件、图片文件等前端文件的问题
  • 首页 > 前端 > HTML+CSS
  • 作者:小昱
  • 2017年7月5日 9:44 星期三
  • 浏览:117
  • 字号:
  • 评论:0
  • 现象: 

        已经修改了CSS文件、js文件或图片文件等,但不断地刷新浏览器还是看不到最新效果。

     

    原因: 

        浏览器没有加载到最新的前端文件。浏览器为了提高页面的加载速度,往往缓存了前端文件(图片文件、css文件、js文件),特别是对于大文件(比如大图片),浏览器将其缓存至本地,这样就不需要每次打开都要去请求服务器,提高了速度。

     

    问题:
    提高速度的同时,我们还是要付出代价的。即:如果我们不告诉浏览器去加载最新的文件,那么浏览器就“默认”缓存在本地的文件是最新的,“懒得”到服务器上面取。

     

    解决方法

    方法一、给CSS文件、js文件、或图片文件加版本号,格式”?xxxx” (标准做法)。
    使用说明:
    (1)版本号的用法:xxx可以是数字、字母或者符号,我个人比较喜欢用日期作为标记。如果是一天改了好多次,我就用“xx.css?20130322-n”;
    (2)版本号的使用场景及示例:
        a) 在css中使用图片作为背景(即background),示例:

    background:url(../images/icons.png?20130322-2) 0 -120px no-repeat;

        b) 在html中使用图片(即img标签),示例:

    <img alt="" src="../cursor.png?30130713" />

        c) html中加载css货js文件,示例:

    <link href="xinporen/common.css?20130319-3" rel="stylesheet" type="text/css" />

    最后值得一提的是,这种方法非常有效,而且不用担心加了版本号?xxx之后浏览器加载不到文件的问题。

    方法二、巧妙地运用刷新。
    这种方法也可以讲最新文件刷出来了,但需要技巧,而不是简单地在网页上右键“刷新”。
    步骤如下:
    比如http://www.chenyunchao.com首页的css文件改了,但看不到最新效果。那么就按以下步骤操作:
    第一步:将css文件(或js文件、图片文件)用浏览器中打开,比如http://www.chenyunchao.com/css/layout.css
    操作方法:以chrome为例,F12之后,展开head标签,就可以找到各种css或js文件。在文件链接上点击右键,选择“在新标签中打开”即可。
    第二步:在刚才打开前端文件的浏览器上不断刷新。直到把你新改的文件“刷”出来为止。ctrl+f查找就知道是不是你新改的文件。
    第三步:在浏览器新建标签页,或重启浏览器,输入http://www.xinporen.com,刷新,就ok啦!!!!
    注意:一定要新建一个标签页,在原来的页面上刷没有用的。
    注意:你是刷出来的,但你发布出去到正式环境上,其他的用户可能看不到最新效果!!因此这种方法只能是自己调试看看的,要是正式发版本,还是得加版本号为妥。

     

    ———————华丽分割线 end——————–

    附:方法一加版本号会有一个副作用,就是如果同一张图片被加了不同的版本号,将会导致素材的重复加载。比如样式中使用了sprite,两行样式使用了

    .first{background:url(../images/a.png?20130713-1) 0 0 no-repeat}
    .second{background:url(../images/a.png?20130713-2) 0 -20px no-repeat}

    那么,浏览器将会请求服务器两次,影响了页面加载的速度。前端速度优化时需要避免这种情况。

    避免的方法是引用相同图片的地方合并成一处:

    .first,.second{background:url(../images/a.png?20130713) no-repeat;}
    .first{background-position:0 0;}
    .second{background-position:0 -20px;}

    ———————华丽分割线 end——————–

     

    参考链接:

    http://www.sxrczx.com/pages/www.chenyunchao.com/p26.html
     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [解决方案]解决由于浏览器缓存导致的无法加载到最新css文件、js文件、图片文件等前端文件的问题
    本文地址:http://www.xiaoyulive.top/?post=103
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号