迎關注我的頭條號: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文件重命名。
覽器緩存究竟是什么?
瀏覽器緩存(Browser Caching)是為了加速瀏覽,瀏覽器在用戶磁盤上對請求過的文檔進行存儲,當訪問者再次請求這個頁面時,瀏覽器就可以從本地磁盤顯示文檔,這樣就可以加速頁面的閱覽。它是網站訪問統計最難解決的問題之一。為了回收重復閱覽網站而產生的資源浪費,而產生的機制。緩存的方式節約了網絡的資源,提高了網絡的效率。
為什么要清理緩存呢?緩存會帶來哪些問題?
部署前端項目以后,你會發現一個問題(為什么必須刷新頁面,頁面才會更新到最新版本),其實就是因為服務器緩存的問題。緩存會導致你頁面樣式、圖片或腳本等未能及時更新展示。
瀏覽器自身如何清理緩存呢?
以谷歌瀏覽器為例:按照下圖指示:(也可使用快捷鍵直接喚起:Ctrl + Shift + Del)
清除緩存步驟1
清除緩存步驟2
vue項目中如何清理緩存呢?
1.在根目錄下index.html的header頭中添加一下代碼:
vue不緩存-方式1
2.配置 nginx 不緩存 html
index.html在服務器端可能是有緩存的,需要在服務器nginx上配置不讓緩存index.html
vue不緩存-方式2
名詞解釋:
no-cache:數據內容不能被緩存, 每次請求都重新訪問服務器, 若有max-age(最大緩存期), 則緩存期間不訪問服務器
no-store:不僅不能緩存, 連暫存也不可以(即: 臨時文件夾中不能暫存該資源)
以上就是我本次分享的方式,各位同仁們還有什么好的方式可以下方留言,共同學習!
---攜手共進,一同進階!
者:kevinylzhao,騰訊音樂前端開發工程師
瀏覽器緩存策略對于前端開發同學來說不陌生,大家都有一定的了解,但如果沒有系統的歸納總結,可能三言兩語很難說明白,甚至說錯,尤其在面試過程中感觸頗深,很多候選人對這類基礎知識竟然都是一知半解,說出幾個概念就沒了,所以重新歸納總結下,溫故而知新。
瀏覽器緩存一般分為兩類:強緩存(也稱本地緩存)和協商緩存(也稱弱緩存)。
瀏覽器發送請求前,會先去緩存里查看是否命中強緩存,如果命中,則直接從緩存中讀取資源,不會發送請求到服務器。否則,進入下一步。
當強緩存沒有命中時,瀏覽器一定會向服務器發起請求。服務器會根據 Request Header 中的一些字段來判斷是否命中協商緩存。如果命中,服務器會返回 304 響應,但是不會攜帶任何響應實體,只是告訴瀏覽器可以直接從瀏覽器緩存中獲取這個資源。如果本地緩存和協商緩存都沒有命中,則從直接從服務器加載資源。
按照本地緩存階段和協商緩存階段分類:
上述代碼的作用是告訴瀏覽器當前頁面不被緩存,事實上這種禁用緩存的形式用處很有限:
a. 僅有 IE 才能識別這段 meta 標簽含義,其它主流瀏覽器僅識別“Cache-Control: no-store”的 meta 標簽。
b. 在 IE 中識別到該 meta 標簽含義,并不一定會在請求字段加上 Pragma,但的確會讓當前頁面每次都發新請求(僅限頁面,頁面上的資源則不受影響)。
在 HTTP 請求和響應的消息報頭中,常見的與緩存有關的消息報頭有:
上圖中只是常用的消息報頭,下面來看下不同字段之間的關系和區別:
a. Last-Modified 標注的最后修改只能精確到秒級,如果某些文件在 1 秒鐘以內,被修改多次的話,它將不能準確標注文件的新鮮度;
b. 某些文件也許會周期性的更改,但是它的內容并不改變(僅僅改變的修改時間),但 Last-Modified 卻改變了,導致文件沒法使用緩存;
c. 有可能存在服務器沒有準確獲取文件修改時間,或者與代理服務器時間不一致等情形。
瀏覽器可以在內存、硬盤中開辟一個空間用于保存請求資源副本。我們經常調試時在 DevTools Network 里看到 Memory Cache(內存緩存)和 Disk Cache(硬盤緩存),指的就是緩存所在的位置。請求一個資源時,會按照優先級(Service Worker -> Memory Cache -> Disk Cache -> Push Cache)依次查找緩存,如果命中則使用緩存,否則發起請求。這里先介紹 Memory Cache 和 Disk Cache。
200 from memory cache
表示不訪問服務器,直接從內存中讀取緩存。因為緩存的資源保存在內存中,所以讀取速度較快,但是關閉進程后,緩存資源也會隨之銷毀,一般來說,系統不會給內存分配較大的容量,因此內存緩存一般用于存儲較小文件。同時內存緩存在有時效性要求的場景下也很有用(比如瀏覽器的隱私模式)。
200 from disk cache
表示不訪問服務器,直接從硬盤中讀取緩存。與內存相比,硬盤的讀取速度相對較慢,但硬盤緩存持續的時間更長,關閉進程之后,緩存的資源仍然存在。由于硬盤的容量較大,因此一般用于存儲大文件。
下圖可清晰看出差別:
200 from prefetch cache
在 preload 或 prefetch 的資源加載時,兩者也是均存儲在 http cache,當資源加載完成后,如果資源是可以被緩存的,那么其被存儲在 http cache 中等待后續使用;如果資源不可被緩存,那么其在被使用前均存儲在 memory cache。
CDN Cache
以騰訊 CDN 為例:X-Cache-Lookup:Hit From MemCache 表示命中 CDN 節點的內存;X-Cache-Lookup:Hit From Disktank 表示命中 CDN 節點的磁盤;X-Cache-Lookup:Hit From Upstream 表示沒有命中 CDN。
從上圖能感受到整個流程,比如常見兩種刷新場景:
IndexedDB 就是瀏覽器提供的本地數據庫,能夠在客戶端存儲可觀數量的結構化數據,并且在這些數據上使用索引進行高性能檢索的 API。
異步 API 方法調用完后會立即返回,而不會阻塞調用線程。要異步訪問數據庫,要調用 window 對象 indexedDB 屬性的 open() 方法。該方法返回一個 IDBRequest 對象 (IDBOpenDBRequest);異步操作通過在 IDBRequest 對象上觸發事件來和調用程序進行通信。
常用異步 API 如下:
在 16 年曾基于 IndexDB 做過一整套緩存策略,有不錯的優化效果:
SW 從 2014 年提出的草案到現在已經發展很成熟了,基于 SW 做離線緩存,讓用戶能夠進行離線體驗,消息推送體驗,離線緩存能力涉及到 Cache 和 CacheStorage 的概念,篇幅有限,不展開了。
localStorage 屬性允許你訪問一個 Document 源(origin)的對象 Storage 用于存儲當前源的數據,除非用戶人為清除(調用 localStorage api 或者清除瀏覽器數據), 否則存儲在 localStorage 的數據將被長期保留。
sessionStorage 屬性允許你訪問一個 session Storage 對象,用于存儲當前會話的數據,存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持,并且重新加載或恢復頁面仍會保持原來的頁面會話。
通過了解瀏覽器各種緩存機制和存儲能力特點,結合業務制定合適的緩存策略,善用緩存是基本功,可以用于時常審查負責的業務,可能就會發現個別業務并沒有運用到位,共勉。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。