zoukankan      html  css  js  c++  java
  • 分享一个控制JS 浏览器缓存的解决办法。

        JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题,

             一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端,

             但是另一方面,当js 文件有改动的时候,如何快速的将客户端缓存的js文件都失效,这是非常头痛的问题。

             以至于每次客户反馈问题的时候,我们第一个解决办法都是清理浏览器缓存。

             那么如何解决呢。

             1. 直接禁止全部的静态文件缓存

                       在html 头部加上如下代码:

                       <META HTTP-EQUIV="pragma" CONTENT="no-cache">

                       <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

                       <META HTTP-EQUIV="expires" CONTENT="0">

             这样所有的js 文件都不会被缓存。这显然是不可取的。

            

             2.加版本号,在每个js的后面,都加上js 的版本号,

             <script src="test.js?v=101"></script>

            

             当某个js文件有变动时,则修改该js文件的版本号。这样就能解决js 没有更新时,能够缓存js文件,有变动的时,也能更新到最新的js的问题。

            

             但是每次js 有变动时,所有引用到改js的地方都得改一遍,这太麻烦了吧。

            

             有办法:

             1.创建公共js文件,将所有需要控制的js文件加入到JSHash 里面

             //// js files map 本文件可独立运行,无需依赖于其他文件

             var strSite = window.location.protocol + "//" + window.location.host + "/"; //// 网站主机头

            

             var JSHash = { 

                       test: { url: strSite + "test.js",type:"javascript", version: "v0001" },

             }

            

             function loadJS(keys) {

                       if (keys) {

                                for (var i = 0; i < keys.length; i++) {

                                         var jsnode = JSHash[keys[i]];

                                         if(jsnode.type="javascript")

                                         {

                                                   document.writeln("<script type="text/javascript" src="" + jsnode.url + "?" + jsnode.version + ""></script>");

                                         }

                                         else

                                         {

                                                   document.writeln("<link type="text/css" href="" + jsnode.url + "?" + jsnode.version + "" />");

                                         }

                                }

                       }

             }

            

             2. 在相关页面引用js 的方改为:loadJS(["test"]);  

            

             这样每一次更新的时候,只需要调整相关JS的版本号即可。

            

            

  • 相关阅读:
    调查:秋色园QBlog 博客开源不开源,您的建议是?
    CYQ.Data 数据框架 V2.0 版本 开放源码 继续开源之路
    CYQ.Data 数据框架 V3.0 版本 开放源码下载有[CYQ.Blog(秋色园QBlog) 完全开放所有源码]
    秋色园QBlog技术原理解析:性能优化篇:用户和文章计数器方案(十七)
    【视频】配置信息管理 的 使用方法(六):实现添加、修改、查询
    【视频】配置信息管理 的 使用方法(五):配置程序之列表、分页控件、按钮
    自然框架的声明
    【自然框架】稳定版的Demo——看点二:权限,权限过滤与验证。
    见到了“公司”定义一个Company类,那么见到了“字段”是不是也可定义一个Column类?
    《锋利的jquery》实例源码下载
  • 原文地址:https://www.cnblogs.com/zhangweizhong/p/3770166.html
Copyright © 2011-2022 走看看