css和js帶參數v或version



1
<span style="font-size:14px;">css和js帶參數(形如.css?v=與.js?v= 或 .css?version=與.js?version= ) 2 3 <script type=”text/javascript” src=”jb51.js?version=1.2.6″></script> 4 <link rel=’stylesheet’ href=’base.css?version=2.3.3′ type=’text/css’ /> 5 6 7 使用參數有兩種可能: 8 9 10 第一、腳本並不存在,而是服務端動態生成的,因此帶了個版本號,以示區別。 即上面代碼對於文件來說 等價於 11 <script type=”text/javascript” src=”jb51.js”></script> 12 <link rel=’stylesheet’ href=’base.css’ type=’text/css’ /> 13 14 15 但瀏覽器會認為他是 該文件的某個版本! 16 17 18 第二、客戶端會緩存這些css或js文件,因此每次升級了js或css文件后,改變版本號,客戶端瀏覽器就會重新下載新的js或css文件 ,刷性緩存的作用。大家可能有時候發現修改了樣式或者js,刷新的時候不變,就是客戶端緩存了css或者js文件,因此加上參數還是有好處的! 19 第二種情況最多,也可能兩種同時存在。 </span>

 

背景

     在搜索引擎中搜索關鍵字.htaccess 緩存,你可以搜索到很多關於設置網站文件緩存的教程,通過設置可以將css、js等不太經常更新的文件緩存在瀏覽器端,這樣訪客每次訪問你的網站的時候,瀏覽器就可以從瀏覽器的緩存中獲取css、js等,而不必從你的服務器讀取,這樣在一定程度上加快了網站的打開速度,又可以節約一下你的服務器流量。

 

問題

     現在問題來了,.htaccess設置的css、js緩存都有一個過期時間,如果在訪客的瀏覽器中已經緩存了css、js,在這些css、js緩存未過期之前,瀏覽器只會從緩存中讀取css和js,如果你在服務器上修改了css和js,那么這些更改在回頭客的瀏覽器中是不會有變化的,除非回頭客按了Ctrl + F5刷新了你的網站頁面或者手動清空了瀏覽器的緩存。一個網站的訪客成千上萬,回頭客也會有不少,你不可能在更新css后讓每個訪客都刷新一下緩存吧,那么這個問題你會怎么處理呢?

 

方法一

     更改css文件名:其實解決這個問題很簡單,緩存是通過文件名標記緩存的內容的。在你更新了網站的css文件內容后,在更換一下css的文件名就可以了。如原先html中的css調用語句如下:

1
<link rel="stylesheet" href="style.css" />

     改一下css文件名就可以了:

1
<link rel="stylesheet" href="index.css" />

     另外一種更改css文件名的方法是將版本號寫到文件名中,如:

1
<link rel="stylesheet" href="index.v2011.css" />

     css文件更新后,改一下文件名中的版本號即可:

1
<link rel="stylesheet" href="index.v2012.css" />

方法二

     給css文件加個版本號:其實每次修改css文件后還要修改css的文件名有點麻煩,那么我們可以在加載css語句中加入個版本號(即css鏈接中?后面的內容)就可以了。如原先html中的css調用語句如下:

1
<link rel="stylesheet" href="style.css?v=2011" />

     改一下css文件的版本號改成2012就可以了:

1
<link rel="stylesheet" href="style.css?v=2012" />

     需要注意的是,部分代理緩存服務器不會緩存網址中包含 "?" 的資源,所以方法二可能會導致你原先的緩存功能失效,可以改用第一種方法。

總結

     其實css文件后面的問號起不到實際作用,僅能當作后綴,如果用問號加參數的方法,可以添加版本號等信息,同時可以刷新一下瀏覽器端的緩存。一個小小的細節,可以給我們帶來很大的方便。

 

轉載自:http://blog.csdn.net/zanychou/article/details/8813076

 

參考文章:

  1. https://www.ludou.org/css-version.html
  2. http://blog.sina.com.cn/s/blog_6e423dc601015qui.html
  3. https://www.oschina.net/question/12_58586


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM