iT邦幫忙

0

瀏覽器的 css, js cache 通常怎麼幫使用者清?

網頁會有 css,js
但是當我 css,js 更新後,git pull 上去時
瀏覽器會先抓先前的檔案 不會更新新的
我的做法是在網址後面加上 ?v=time()
只是沒有無時無刻在更新 css,js 所以每次使用者重整都會重新下載一次 css,js 因為網址都會變
想問有沒有更好的做法?或是常規的做法為何?謝謝!

黃彥儒 iT邦高手 1 級 ‧ 2019-10-20 21:47:20 檢舉
git pull上去??
PULL+上去?
感覺語意怪怪的
5
dragonH
iT邦大師 1 級 ‧ 2019-10-20 21:29:22
最佳解答

?v=time()

已經算是蠻常見的做法

你不想每次都重新下載

可以改用固定字串配合 http header(e.g. Cache-Control: max-age)

e.g.
20191020 更新 css

就可以設為

?v=20191020

再配合 http 的 header

Cache-Control: max-age=31536000

如此一來

在 20191020 之前的 css 都會重新下載

下載後在一年以內都不會再次下載

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-10-20 22:33:17 檢舉

其實這些東西,
Google就可以找到了.

ccutmis iT邦高手 9 級 ‧ 2019-10-20 22:51:25 檢舉

我問古哥他說 ?v=time() 已經是很好的作法了

dragonH iT邦大師 1 級 ‧ 2019-10-20 23:03:08 檢舉

/images/emoticon/emoticon39.gif

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 23:05:29 檢舉

TO ccutmis 真假的可以給我網址嗎 我看看

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 23:47:14 檢舉

那這樣與其「http header(e.g. Cache-Control: max-age)」還不如我直接設定一個變數就行了⋯

dragonH iT邦大師 1 級 ‧ 2019-10-21 00:00:13 檢舉

小松菜奈

好奇你是理解了什麼

才會得到這樣的結論/images/emoticon/emoticon11.gif

ccutmis iT邦高手 9 級 ‧ 2019-10-21 00:26:46 檢舉

小松菜奈
http://n.sfs.tw/content/index/10310
上面的文章說 ?v=time() 最靠譜

giulian iT邦新手 5 級 ‧ 2019-10-21 05:01:15 檢舉

透過header處理跟在網址上帶一個變數雖然結果一樣,但中間的處理流程不一樣。

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-tw

https://medium.com/frochu/http-caching-3382037ab06f

4
浩瀚星空
iT邦大師 1 級 ‧ 2019-10-21 00:39:16

我的手法是在設定檔或是init檔,給個常數定義。
如以下的寫法

$setVer = time();//先依時間值,後續再改固定值
define('JS_VERSION', $setVer); //js版本
define('CSS_VERSION', $setVer); //css版本
define('IMG_VERSION', $setVer); //img版本

在對應的js、css跟圖片就用 xxx.js?{JS_VERSION}
的方式來處理。

這邊你可以看到我先暫時用time()。這是因為我正在開發期間。很常變動js跟css。
所以先用time()來讓它每次重讀。

等到正式版上線時,就會將其改成固定的值處理。
我是利用這些來處理緩存的問題的。給你參考。

小魚 iT邦大師 1 級 ‧ 2019-10-21 10:38:48 檢舉

所以星空大大的作法是有改動js跟css才會去改那個版本號嗎?

要這樣說也對。不過其實那個版本號變數。我有另外放在一個版本更新的地方。
正式發送上傳時,會自動更新那個變數。所以我其實也不需要自行去重新設定。
不過在開發階段時,並不會做正式發送處理的情況下。我會先改回用time()處理

1
崔斯
iT邦新手 5 級 ‧ 2019-10-21 10:50:05

因為看到你說要清cache的時候都是git有變動才清

所以我是推薦用ENV環境變數處理

?v=$_ENV['version'];

這樣的優點就是我版本有變動的時候就會重新讀取cache,

但如果沒有更新的話,就不會每次都重新存取,保留瀏覽器cache的效能。

小松 Nana iT邦研究生 3 級 ‧ 2019-10-21 10:51:09 檢舉

這環境變數需要安裝嗎?

崔斯
你教他用env的方式,對他來說會有難度的。
我想你從他的回答因該就知道了。
對他來說,其實我倒是不建議他使用env。因為這樣子的話,他要了解的東西又要多很多。

小松 Nana iT邦研究生 3 級 ‧ 2019-11-21 14:58:54 檢舉

ENV環境變數 怎麼用呀?

我要發表回答

立即登入回答