整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
迎關注我的頭條號：Wooola，專注于Java、Golang、微服務架構，致力于每天分享原創文章、快樂編碼和開源技術。
最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面并存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是每次去通知用戶肯定不現實，所以需要對前端的js和css等文件采取一定的緩存失效的措施，強制瀏覽器重新去服務器獲取新的js代碼以及css文件。
樓主經過實際的項目情況反饋，總結以下兩點切實可行的辦法，分享給大家，希望對大家有幫助。
時間版本號
如果每次發布，針對修改過的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文件，不會在使用瀏覽器本地緩存。同時占用網絡帶寬，影響服務器響應速度。
可以利用 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文件重命名。
迎關注我的頭條號：Wooola，專注于Java、Golang、微服務架構，致力于每天分享原創文章、快樂編碼和開源技術。
最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面并存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是每次去通知用戶肯定不現實，所以需要對前端的js和css等文件采取一定的緩存失效的措施，強制瀏覽器重新去服務器獲取新的js代碼以及css文件。
樓主經過實際的項目情況反饋，總結以下兩點切實可行的辦法，分享給大家，希望對大家有幫助。
時間版本號
如果每次發布，針對修改過的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文件，不會在使用瀏覽器本地緩存。同時占用網絡帶寬，影響服務器響應速度。
可以利用 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文件重命名。
覽器緩存對于前端一點都不陌生，最常見的就是，新版本上線了，測試卻說這怎么還沒有變化呢？使用 ctr + F5 強制刷新之后，立馬就好了。或者清除瀏覽器緩存，按住ctr+shift+delete，彈出如圖：
我們會發現目前瀏覽器緩存的圖片和文件的大小。或者進入chrome://chrome-urls/找到chrome://cache/ 就可以看到所有緩存的地址列表。對于瀏覽器緩存，前端對它是又愛又恨，有時想保留，有時想禁掉，所以看看瀏覽器緩存到底是怎樣的？
瀏覽器緩存就是瀏覽器根據 url 第一次訪問網站之后，將網站的 html、css、js、圖片等文件復制一份保留到瀏覽器中，當你二次訪問這個 url 的網站時，如果網站沒有明確表示有更新時，瀏覽器直接在緩存中查找內容，不會再次請求網頁內容，只有網頁明確表示有更新時，瀏覽器才會向服務器發起網路請求，再次下載網頁。
如上圖，百度首頁就是使用了緩存機制，首次訪問之后 web資源被緩存，在后面重復請求中，資源直接在緩存中讀取，而不是向服務器請求資源。
2.1、為什么很多網站二次打開速度很快？
網頁二次打開很快，主要原因是第一次加載頁面過程中，緩存了部分耗時數據，這一現象，對于單頁面應用開發非常明顯。
上一篇文章《瀏覽器工作原理》中，瀏覽器工作流程介紹，輸入網址回車以后瀏覽器向服務器發起服務之前，會現在瀏覽器緩存中查詢是否有需要的文件？如果有則直接在緩存中獲取文件，避免向服務器請求和下載文件，所以節省了一部分時間。
2.2、瀏覽器緩存優點
1、減少網絡帶寬消耗
對于網站運營者或者訪問網頁的用戶，帶寬就代表著 money ，過多的消耗帶寬，我們服務器配置就得升級，使用瀏覽器緩存之后，就會減少網絡流量，降低運營成本。
2、降低服務器壓力
使用瀏覽器緩存之后，除第一次訪問需要向服務器請求網站全部資源，后續訪問可以重復使用瀏覽器本地緩存，減少對服務器的請求，間接降低服務器的壓力，同時，搜索引擎的爬蟲也會根據緩存過期機制降低抓取的頻率，也可以降低服務器壓力。
3、減少網絡延遲，加快網頁加載
瀏覽器緩存 web資源后，減少網絡請求，可以更快速地獲取到服務器返回數據，同時使用瀏覽器緩存內的文件比服務器獲取快很多，所以網頁加載速度明顯快很多。
對于瀏覽器端的緩存來講，這些規則是在 http 協議和 meta 標簽中定義的。分別從兩個維度：新鮮度和校驗值，規定瀏覽器是否可以直接使用緩存中的副本，還是直接從服務器獲取最新資源。
3.1、新鮮度(過期)：瀏覽器緩存的有效期，緩存必須滿足以下兩個條件，瀏覽器才會認為是最新的，可以直接使用。
3.2、校驗值(驗證)：服務器返回資源的時候，會在響應頭信息中帶上資源實體標簽 Entity Tag，可以用來作為瀏覽器再次請求過程的校驗標識，如果發現校驗標識不匹配，說明資源已經被修改過或過期，瀏覽器需要重新請求資源。
緩存規則可以設置在html的meta標簽，也可以設置在http協議頭內。
4.1、前端 html 中 meta 標簽
在 html 頁面中加入緩存設置，代碼如下：
<meta http-equiv="Pragma" content="no-cache" />
<!-- Pragma是http1.0版本中給客戶端設定緩存方式之一 -->上邊代碼，禁止瀏覽器緩存，瀏覽器每次訪問網頁都要去服務器請求。事實這種禁用緩存形式作用有限：
4.2、HTTP協議頭
http請求和響應頭中，與緩存相關的常見類型：
規則 | 消息報頭 | 值/示例 | 類型 | 作用 |
新鮮度 | Pragma | no-cache | 響應 | 告訴瀏覽器忽略資源的緩存副本，每次訪問都需要去服務器拉取【http1.0中存在的字段，在http1.1已被拋棄，使用Cache-Control替代，但為了做http協議的向下兼容，很多網站依舊會帶上這個字段】 |
Expires | Mon, 15 Aug 2016 03:56:47 GMT | 響應 | 啟用緩存和定義緩存時間。告訴瀏覽器資源緩存過期時間，如果還沒過該時間點則不發請求【http1.0中存在的字段，該字段所定義的緩存時間是相對服務器上的時間而言的，如果客戶端上的時間跟服務器上的時間不一致（特別是用戶修改了自己電腦的系統時間），那緩存時間可能就沒啥意義了。在HTTP 1.1版開始，使用Cache-Control: max-age=秒替代】 | |
Cache-Control | no-cache | 響應 | 告訴瀏覽器忽略資源的緩存副本，強制每次請求直接發送給服務器，拉取資源，但不是“不緩存” | |
no-store | 響應 | 強制緩存在任何情況下都不要保留任何副本 | ||
max-age=[秒] | 響應 | 指明緩存副本的有效時長，從請求時間開始到過期時間之間的秒數 | ||
public | 響應 | 任何路徑的緩存者（本地緩存、代理服務器），可以無條件的緩存該資源 | ||
private | 響應 | 只針對單個用戶或者實體（不同用戶、窗口）緩存資源 | ||
Last-Modified | Mon, 15 Aug 2016 03:56:47 GMT | 響應 | 告訴瀏覽器這個資源最后的修改時間。服務器將資源傳遞給客戶端時，會將資源最后更改的時間以“Last-Modified: GMT”的形式加在實體首部上一起返回給客戶端【只能精確到秒級，如果某些文件在1秒鐘以內，被修改多次的話，它將不能準確標注文件的修改時間】 | |
If-Modified-Since | Mon, 15 Aug 2016 03:56:47 GMT | 請求 | 其值為上次響應頭的Last-Modified值，再次向web服務器請求時帶上頭If-Modified-Since。web服務器收到請求后發現有頭If-Modified-Since則與被請求資源的最后修改時間進行比對。若最后修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），包括更新Last-Modified的值，HTTP 200；若最后修改時間較舊，說明資源無新修改，則響應HTTP 304(無需請求，節省瀏覽)，告知瀏覽器繼續使用所保存的cache | |
校驗值 | ETag | "fd56273325a2114818df4f29a628226d" | 響應 | 告訴瀏覽器當前資源在服務器的唯一標識符（生成規則由服務器決定） |
If-None-Match | "fd56273325a2114818df4f29a628226d" | 請求 | 當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web服務器請求時帶上頭If-None-Match（Etag的值）。web服務器收到請求后發現有頭If-None-Match則與被請求資源的相應校驗串進行比對，決定返回200或304 |
各種類型之間的關系和區別：
并不是所有的請求都能被緩存，無法被緩存的有：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
