js文件被瀏覽器緩存的思考

 

 

我們的用戶量大，修改js文件后，用戶反饋登錄出現問題。實際上刷新一下就沒事了。就是因為用戶的瀏覽器使用的還是本地緩存的js代碼。

 

強制刷新一般就會重新去服務器獲取新的js代碼。但不能讓用戶每次都這樣子去做。

 

 

於是我思考一個問題：

如果修改了js文件中的js代碼，發布代碼到線上后。用戶的瀏覽器使用的還是原來js緩存。所以並不會馬上生效。


如何才能讓瀏覽器使用最新的js文件呢？

很多人想到的第一反應是，在<script type="text/javascript" src="/js/common.js" ></script>在后面加一個時間戳來解決。這樣url地址每次變化，瀏覽器就會請求服務端的js，而不會使用緩存。

這樣是解決了。但是會導致瀏覽器每次都要去請求服務端的js文件。占用帶寬。作為技術，能不能有種更好的辦法呢？既能避免用戶的瀏覽器每次去請求服務端獲取js文件。又能在發布新的js代碼后，能夠使用最新的js文件？

據說，在問號后面加版本號，現在很多網站都這么干。加個版本號能夠解決問題嗎？

 

 

 

加個版本號，js有個版本。如果每次發布新的js代碼。后面就會附加新的版本號。然后用戶加載html頁面的時候。版本號附加在在

 

<script type="text/javascript" src="/js/common.js?v=99" ></script>

 

如果沒有修改，那么版本號還是原來的，這樣做到了：不發布代碼的時候，瀏覽器使用的是本地緩存。因為版本號沒有變化。

 

現在疑問是，js的版本號如何生成呢？

 

生成一個日期嗎?

 

當天的日期比較好。

 

這樣的確解決了問題。讓用戶可以使用。

 

只不過出現一個新的問題來臨了。

 

js文件加上當天的發布日期作為版本號即可了。

 

 

有些人針對url后面帶時間戳的做法，會導致瀏覽器每次請求都不會緩存，因為每次請求時間都會變化，url就變化了，於是瀏覽器認為是一個新的地址了。

 

有人針對這個問題的解決辦法是： 這里URI不是靜態，可能會造成某些瀏覽器不會進行緩存，可以采用偽靜態配合URL重寫來解決

 

 網上查詢資料，縱觀大家的解決思路總結如下：

 

1、修改js的文件名。我覺得這樣很麻煩。造成版本系統的維護困難。不建議。除非是完全ftp。不過每次發布都修改文件名稱。的確造成維護的時候很茫然，接手的人看到文件名稱變化，會比較難維護

 

2、路徑后面加時間戳或者隨機數的方式。

 一般都是在html模版中使用一個時間戳或者隨機數函數生成一個值。

<script type="text/javascript" src="{{passport_host}}js/common.js?t={{date("Y-m-d")}}" ></script> 今天和明天的值不同了，重新請求服務器。

<script type="text/javascript" src="{{passport_host}}js/common.js?t={{time()}}" ></script> 使用時間戳，每刷新一次html，值都不同。隨機數也是一樣的

 

   不推薦使用這種方式。

   因為這樣的方式導致的問題是，每次刷新html，時間戳都是變化的，url就總是唯一的，於是瀏覽器總是去請求服務端獲取js文件，不會使用瀏覽器本地的緩存。占用帶寬,影響速度

 

 

3、路徑后面加js的版本號。這樣是業界比較成熟的做法。

 

關鍵是這個版本號，怎么做版本？ 難道真的納入版本系統里面去？不是的。我突然靈感來，想到一種程序員自己控制的辦法。

自己主動加時間，如果本次發布，修改了哪幾個js文件。那么就在后面加上一個時間點：年月日

如果一天會發布多次對js文件的修改，那么程序員還要精確點。年月日時分秒即可。

 

 

 如下：

 

<script type="text/javascript" src="/js/common.js?time=20150518" ></script>

 

我去看了一下淘寶，發現也是這樣一種方式額，不知道對不對？

 

如下：

 

 

 

 

 

 15年8月12日補充：

 

  公司有好幾千萬注冊會員，於是第三方應用使用我們網站會員帳號實現在第三方網站登錄，需要設計oauth2.0授權的平台，於是需要參考微博的oauth體制。

 

  無意中發現他們的css也是使用年月日來控制

 

 

 

進一步思考：

 

這種加時間方法是可行。。不是系統生成的時間，不是所有js文件都加。

 

是不是可以進一步考慮一種辦法，用程序來進行開關呢？

 

自己勾選。如果這個文件修改了。那么就設置為更新。模版中判斷，就根據這個開關，把時間戳自動打上去？

 

不過這樣子覺得沒必要。因為還沒到那么重大。其實初期，完全可以程序手動把日期打上去即可了。

 

該了什么js文件，就給哪個js文件加，這樣已經是折衷了。就跟改代碼一樣。代碼都要修改的，這點改也沒多少工作量。

 

 

總結思路：

 

js文件的內容修改了,可以加個t參數表明一下日期,用這個日期來作為版本號，看到日期也能知道是哪天發布的。

沒有修改js文件根本就不用修改日期。

 

 

 

實踐：

         <script type="text/javascript" src="{{passport_host}}js/common.js?t=20150622" ></script>

 

如果下一次修改了這個js文件，那么發布的時候，就修改日期

 

<script type="text/javascript" src="{{passport_host}}js/common.js?t=20150628" ></script>

 

沒有修改的js文件，保留原來的值不動即可。

 

思考：這樣子是不是很麻煩，有更好的方式嗎。目前我沒想到更好的辦法了。這種方式湊合能用。既能夠按需修改，也能夠保證瀏覽器使用緩存。達到了折衷和平衡。