1. 程式人生 > >解決修改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呼叫語句如下:

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檔案後面的問號起不到實際作用,僅能當作字尾,如果用問號加引數的方法,可以新增版本號等資訊,同時可以重新整理一下瀏覽器端的快取。一個小小的細節,可以給我們帶來很大的方便。

相關推薦

解決修改cssjs檔案瀏覽器快取更新問題

  在搜尋引擎中搜索關鍵字.htaccess 快取,你可以搜尋到很多關於設定網站檔案快取的教程,通過設定可以將css、js等不太經常更新的檔案快取在瀏覽器端,這樣訪客每次訪問你的網站的時候,瀏覽器就可以從瀏覽器的快取中獲取css、js等,而不必從你的伺服器讀取,這樣在一定

解決修改cssjs檔案後瀏覽器快取更新問題

問題描述:最近在上線新版本專案的時候,發現有的使用者的操作還是呼叫的老版本JS裡面的內容,這樣就造成原來新的JS裡面加上的限制不能限制使用者的操作,從而導致使用者可以重複操作。 問題產生原因:        如果在使用者之前已經訪問過系統,那麼瀏覽器中會快取該系統的CSS

引用外部.css.js檔案的路徑問題

jsp或html頁面引用外部.css或.js檔案時,注意路勁問題,如果設定不當,會引用不到這些外部的檔案 假設使用下面的目錄結構: -webapp  |-MyProject  目錄   |--WebContent 目錄   |---scripts 目錄    ---dt

解決js檔案瀏覽器快取問題

1、加版本號<script type="text/javascript" src="/js/common.js?v=1" ></script>2、加發布時間<script type="text/javascript" src="/js/commo

關於谷歌瀏覽器不能及時預覽修改後的js檔案的問題

環境說明:MyEclipse 10 在解決該問題前,應該完成的步驟(個人建議):      1.確認js檔案編碼是您需要的(以我的專案為例,截圖說明)    在我的專案中,為了避免亂碼的問題,我將涉及到的所有字符集都設定為“utf-8”    ①jsp檔案   ②js檔

HTML檔案裡把所有的cssjs檔案引入後其他的HTML檔案引入該頁面後可以使用該頁面引入的cssjs

怎樣將一個HTML檔案裡把所有的css、js檔案引入後,然後其他的HTML檔案就不需要在進行引入了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

解決eclipse編輯jsp js檔案經常出現卡死的問題

使用Eclipse編輯jsp、js檔案時,經常出現卡死現象,解決方法如下: 1、取消驗證 windows–>perferences–>validation 把 除了manual 下面的全部點掉,build下只留 classpath depend

mvc區域下cssjs檔案不能訪問的解決

最近又有需要做網站的手機版,因此在areas下建立了MM,當做手機版訪問頁面。由於一些js及css檔案與電腦版的有區別,所以我單獨在/areas/MM下建立了scripts資料夾放置js檔案,建立了Content資料夾放置css檔案。在本地測試沒有問題,但是挪到伺服器上卻發

JS前端建立htmljson檔案瀏覽器匯出下載

https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/ 侵刪   一、HTML與檔案下載 如果希望在前端側直接觸發某些資源的下載,最方便快捷的方法就是使用HT

IOS開發(7)WKWebView載入本地HTML、CSSJS檔案JS解決html內訪問其他資源路徑問題)

這段時間開發IOS應用,自己本身是搞java web 和 android,搞ios應用後面還有好多坑要跳,所以學習一點就整理一點筆記。不敢保證內容都是對的,但至少,我嘗試過分析整理的。 UIWebVIew和WKWebView都是ios提供的web控制元件。但是

在Asp.net中動態新增css檔案js檔案控制元件

一、動態新增CSS檔案        HtmlLink link = new HtmlLink();             link.Href = cssUrl;  //路徑             link.Attributes.Add("type", "text/css");             

Django網站建設-頭像修改郵箱及密碼修改(formjs檔案模板配置)

1.選擇好模板,並分析頁面 2.修改並自定義基礎模板 3.修改各個頁面,修改title,麵包屑等 4.定義好使用者資訊的View 5. 資料繫結,資料回填 6. 配置路徑利用include 7. 模板顯示,在模板中顯示預設值:{{request.us

解決CSSJS檔案更新網站效果卻沒實時更新的問題

一、原因 修改了CSS/JS 檔案卻沒能夠實時更新的原因是瀏覽器存在快取,當訪問一個頁面,如果引用沒變,那麼就會用快取的下來的檔案,以節省頻寬,提高速度。這是個好東西,但是用不好就坑了自己。 關閉快取雖然能夠解決,但是會浪費資源,所以不推薦。 二、解決 1、修改檔

vue外掛(自定義元件js檔案使用)vue.extend()vue.component()註冊元件

一、vue.use()自定義元件或者引用第三方元件(即vue文件中的外掛)?參考:https://cn.vuejs.org/v2/guide/plugins.html1.1、使用第三方元件通常我們在vue裡面使用別人開發的元件,第一步就是install,第二步在main.js

webpack-dev-conf r.js檔案如何進行後臺資料模擬?

參照了別人寫的記錄一下 最新的vue裡dev-server.js被替換成了webpack-dev-conf.js 在模擬後臺資料的時候直接在webpack-dev-conf.js檔案中修改 第一步,在const portfinder = require(‘portfinder’)

CSSJS實現gif動態圖片的停止與播放

 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5081  一、 對於習慣性刷微博的我,總時不時

解決Android studio編譯大檔案狂佔記憶體、卡爆的問題

本人使用Android studio3.1進行NDK/JNI開發,遇到編譯一個11.4M的巨大.h檔案(儲存一個5萬行的陣列),編譯器預設1024M記憶體,完全不夠用,編譯後狂戰記憶體直至卡爆。 解決方法:調整Android studio記憶體設定 Help -> Edit Custo

webpack.dev.conf.js檔案進行後臺資料模擬

第一步:安裝json-server  cnpm install json-server --save 第二步:在bulid目錄下找到webpack.dev.conf.js 第三步:在const portfinder = require(‘portfinder

Android WebView注入js檔案判斷當前HTML有沒有某個js然後再注入

Android WebView注入js檔案,判斷當前HTML有沒有某個js然後再注入 1.注入js程式碼 判斷當前有沒有jQuery檔案引入,然後再進行注入。 判斷依據其實很簡單,獲取script 的dom物件 判斷src的值 進行遍歷就行了。 (function () {

關於CSSJS檔案引用順序---BS的標準模版(轉)

<!DOCTYPE html> <html> <head> <!--網頁頁面字符集--> <meta charset="utf-8"> <!--讓IE使用最