分享一個控制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的版本號便可。