為了提高網站的加載速度,瀏覽器會緩存已經加載過的CSS文件。但有時候我們希望頁面上展示最新的CSS樣式,而不是使用之前緩存的舊樣式。那么如何設置CSS不緩存呢?
方法一: 在CSS文件的URL中添加一個查詢參數(shù),比如?v=1,每次修改CSS文件時將該參數(shù)的值加1,這樣瀏覽器就會重新加載該文件 示例:<link rel="stylesheet" href="style.css?v=1" />方法二: 通過在HTTP響應頭設置“cache-control”,“expires”或者“pragma”來控制瀏覽器不緩存CSS文件 示例: header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past header("Pragma: no-cache"); // HTTP/1.0 方法三: 使用CSS導入語句,讓CSS來源于不同的文件,這樣每個文件被更新時只需要更新相應的文件 示例:<link rel="stylesheet" href="style1.css" /><link rel="stylesheet" href="style2.css" />
通過上述方法,我們可以很容易地設置CSS不緩存,保證頁面展示的是最新的樣式,讓用戶有更好的體驗。