css和js帶引數v或version
css和js帶引數(形如.css?v=
與.js?v=
或 .css?version=
與.js?version=
)
<script type="text/javascript" src="jb51.js?version=1.2.6"></script>
<link rel="stylesheet" href="base.css?version=2.3.3" type="text/css" />
使用引數有兩種可能:
第一、指令碼並不存在,而是服務端動態生成的,因此帶了個版本號,以示區別。 即上面程式碼對於檔案來說 等價於
<script type="text/javascript" src="jb51.js"></script>
<link rel="stylesheet" href="base.css" type="text/css" />
但瀏覽器會認為他是該檔案的某個版本!
第二、客戶端會快取這些css
或js
檔案,因此每次升級了js
或css
檔案後,改變版本號,客戶端瀏覽器就會重新下載新的js
或css
檔案,重新整理快取的作用。大家可能有時候發現修改了樣式或者js,重新整理的時候不變,就是客戶端快取了css或者js檔案,因此加上引數還是有好處的!
第二種情況最多,也可能兩種同時存在。
背景
在搜尋引擎中搜尋關鍵字.htaccess
快取,你可以搜尋到很多關於設定網站檔案快取的教程,通過設定可以將css、js等不太經常更新的檔案快取在瀏覽器端,這樣訪客每次訪問你的網站的時候,瀏覽器就可以從瀏覽器的快取中獲取css、js
等,而不必從你的伺服器讀取,這樣在一定程度上加快了網站的開啟速度,又可以節約一下你的伺服器流量。
問題
現在問題來了,.htaccess
設定的css、js
快取都有一個過期時間,如果在訪客的瀏覽器中已經快取了css、js
,在這些css、js
快取未過期之前,瀏覽器只會從快取中讀取css
和js
,如果你在伺服器上修改了css
和js
,那麼這些更改在回頭客的瀏覽器中是不會有變化的,除非回頭客按了Ctrl + F5
重新整理了你的網站頁面或者手動清空了瀏覽器的快取。一個網站的訪客成千上萬,回頭客也會有不少,你不可能在更新css
後讓每個訪客都重新整理一下快取吧,那麼這個問題你會怎麼處理呢?
方法一
更改css
檔名:其實解決這個問題很簡單,快取是通過檔名標記快取的內容的。在你更新了網站的css
檔案內容後,在更換一下css
的檔名就可以了。如原先html
中的css
呼叫語句如下:
<link rel="stylesheet" href="style.css" />
改一下css
檔名就可以了:
<link rel="stylesheet" href="index.css" />
另外一種更改css
檔名的方法是將版本號寫到檔名中,如:
<link rel="stylesheet" href="index.v2011.css" />
css
檔案更新後,改一下檔名中的版本號即可:
<link rel="stylesheet" href="index.v2012.css" />
方法二
給css
檔案加個版本號:其實每次修改css
檔案後還要修改css
的檔名有點麻煩,那麼我們可以在載入css
語句中加入個版本號(即css
連結中?後面的內容)就可以了。如原先html
中的css
呼叫語句如下:
<link rel="stylesheet" href="style.css?v=2011" />
改一下css
檔案的版本號改成2012就可以了:
<link rel="stylesheet" href="style.css?v=2012" />
需要注意的是,部分代理快取伺服器不會快取網址中包含 “?
” 的資源,所以方法二可能會導致你原先的快取功能失效,可以改用第一種方法。
總結
其實css
檔案後面的問號起不到實際作用,僅能當作字尾,如果用問號加引數的方法,可以新增版本號等資訊,同時可以重新整理一下瀏覽器端的快取。一個小小的細節,可以給我們帶來很大的方便。
相關文章
- js獲取帶#號連結後的引數JS
- sendEmail帶的引數AI
- js解析url引數JS
- Laravel 帶引數分頁Laravel
- 帶引數的檢視
- js 和 css動畫JSCSS動畫
- [Python] 傳遞引數前面的*或**Python
- C#通過反射獲取類中的方法和引數個數,反射呼叫方法帶引數C#反射
- js獲取url傳遞引數,js獲取url?號後面的引數JS
- CSS 和 JS 阻塞二三事CSSJS
- vue事件帶預設引數,怎麼傳遞其他引數Vue事件
- 使用js修改url地址引數JS
- js去除url中指定引數JS
- JS forEach()第二個引數JS
- js 將負數或小數轉成正整數JS
- 封裝帶引數的函式封裝函式
- EXTJS 建構函式帶引數JS函式
- python中getattr如何帶引數呼叫?Python
- Bash變數和引數變數
- python變數和引數Python變數
- 深入瀏覽器工作原理和JS引擎(V8引擎為例)瀏覽器JS
- Java對比有引數和無引數Java
- CSS3-陰影引數基礎CSSS3
- js實現獲取URL引數JS
- 封裝一個強大的追加或更新多個Query引數並自動重新整理的JS方法,附加Query引數獲取封裝JS
- 引數的定義和引數的傳遞
- 帶你深入理解傳遞引數
- java傳送get請求帶引數Java
- nginx url必須攜帶引數判定Nginx
- 用whistle清除js和css快取JSCSS快取
- thinkphp: fastadmin頁面上新增css和jsPHPASTCSSJS
- TypeScript 函式可選引數和預設引數TypeScript函式
- postman 請求引數和 Spring Boot Controller 接受引數PostmanSpring BootController
- 小程式內引數和掃碼引數統一
- js動態載入 js檔案和 css檔案JSCSS
- 【JS 逆向百例】X球投資者社群 cookie 引數 acw_sc__v2 加密分析JSCookie加密
- PB帶引數帶結果集的動態SQL查詢SQL
- C# 帶引數帶互鎖多執行緒呼叫方法C#執行緒