務器端優化我們網站的速度時，緩存是最關鍵的技術之一。

加速站點需要緩存：它不是讓服務器為每個請求動態創建HTML輸出，而是僅在第一次請求HTML之后創建HTML，緩存它，然后從此開始提供緩存版本，緩存提供更快的響應，并釋放服務器中的資源。從服務器端優化我們站點的速度時，緩存是最重要的任務之一。

生成頁面的HTML輸出時，如果它包含具有用戶狀態的代碼，例如為登錄用戶打印歡迎消息“Hello {{User name}}！”，則無法緩存該頁面。否則，如果有人首先訪問該站點，并且緩存了HTML輸出，那么所有用戶都會受到“Hello！”的歡迎。

因此，緩存插件通常會在用戶登錄時禁用緩存，如下面的插件WP Super Cache所示：

禁用已登錄用戶的緩存是不可取的，應該避免使用，因為即使具有用戶狀態的HTML代碼量與頁面中的靜態內容相比最小，仍然不會緩存任何內容，原因是要緩存的實體是頁面，而不是頁面中HTML代碼的特定部分，因此通過包含一行不能緩存的代碼，就不會緩存任何內容，這是一種全有或全無的情況。

通常為了解決這個問題，我們會搭建服務器，以避免在服務器端使用用戶狀態呈現HTML代碼，并在通過API獲取所需數據后，僅在客戶端呈現它，通過從服務器上呈現的代碼中刪除用戶狀態，即使用戶已登錄，也可以緩存該頁面。

?我們也正在探索一種增強網站緩存的方法 ，主要是為了即使在用戶登錄時也能在網站上啟用緩存，策略依賴于僅對那些需要用戶狀態的頁面禁用緩存，以及使用哪些組件可以決定是在客戶端還是在服務器端呈現，具體取決于訪問用戶狀態的頁面。

最后我們堅信一個網站緩存技術發展，從而提供更快的響應和更好的用戶體驗。

迎關注我的頭條號：Wooola，專注于Java、Golang、微服務架構，致力于每天分享原創文章、快樂編碼和開源技術。

前言

最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面并存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是每次去通知用戶肯定不現實，所以需要對前端的js和css等文件采取一定的緩存失效的措施，強制瀏覽器重新去服務器獲取新的js代碼以及css文件。

樓主經過實際的項目情況反饋，總結以下兩點切實可行的辦法，分享給大家，希望對大家有幫助。

1. 路徑后面加時間戳或者隨機數的方式
2. 采用hash（md5）重命名文件

路徑后面加時間戳或者隨機數的方式

時間版本號

如果每次發布，針對修改過的js或者css文件路徑加上時間的版本號，一般以年月日拼寫。

<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

如果發生緊急情況，需要在一天當中對某些css或者js文件多次發版，可以把時間精確到時分秒。

目前樓主主推采用加版本號的方式，因為文件太多，只能做增量修改。好處是沒有做任何修改js或者css文件可以不用加版本號。

采用隨機數

document.write('<script src=\".lib/common.js?r=' + Math.random() + "\"" + '><\/script>');

一般不建議用隨機數的方式，因為每次刷新頁面，隨機數都會變化，那么瀏覽器認為一個新的url需要重新請求服務端獲取js或css文件，不會在使用瀏覽器本地緩存。同時占用網絡帶寬，影響服務器響應速度。

采用hash（md5）重命名文件

可以利用 gulp-rev或者webpack

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

例如百度搜索首頁，就是利用hash給js和css文件重命名。