在前端開發中,經常會遇到瀏覽器緩存導致頁面不更新的問題,一種解決方案是給CSS文件后加時間戳。
所謂時間戳,就是指當前時間的數字表示形式。在CSS文件后加上時間戳,可以使瀏覽器認為這是一個新的文件,從而不會使用之前的緩存文件,而是重新下載。
在HTML中引用CSS文件時,我們一般是這樣寫:
為了給CSS文件后加時間戳,我們需要使用JavaScript來動態修改這個鏈接。具體的代碼如下:
其中,new Date().getTime()
表示獲取當前時間的時間戳。每次刷新頁面時,這個時間戳都會改變,從而使瀏覽器重新請求CSS文件。
如果你覺得手動修改HTML中的代碼比較麻煩,也可以使用插件來自動為CSS文件添加時間戳。比如,Webpack中有一個插件叫做extract-text-webpack-plugin
,它就提供了一個hash
參數可以自動為輸出的CSS文件添加時間戳。
總之,為CSS文件后加時間戳是解決緩存問題的一種有效方法。在開發過程中要注意這個問題,避免出現以前的緩存文件影響頁面展示。
下一篇css后臺用登錄模板