前端頁面緩存技術

A. web前端緩存機制

前端緩存森攜機制有多種，如瀏覽器緩存、CDN緩存、DNS緩存、代理伺服器緩存等。

CDN全稱是Content Delivery Network，即內容分發網路。CDN的原理是改世將資源存放在各地的緩存伺服器上，當用戶請求資源時，從就近的伺服器上返回緩存的資源，而不需要每次都從源伺服器獲取，減輕源伺服器的壓力，又能提升用戶的訪問速度。

瀏覽器可以將用戶請求的資源進行緩存，存放在本地。瀏覽器緩存一般通過請求頭來設置。
與瀏覽器緩存有關的頭部有：

瀏覽器會將伺服器的域名與IP地址的映射緩存在本地，這樣用戶在訪問網站時，不用每次都去查詢DNS映射表。

在瀏覽器和伺服器之間架設的一個伺服器 ，這個代理伺服器會幫助瀏覽器去請求頁面，然後將頁面進行處理和壓縮(例如壓縮圖片和文件)，使頁面變小，再傳輸給瀏覽器。大部分代理伺服器核春肢都有緩存的功能，如果瀏覽器所請求的文件在它本機中存在且是最新的，就不需要再從源伺服器請求數據，提高了瀏覽速度。

在瀏覽某個頁面時，瀏覽器會判斷頁面的關聯內容，進行預載入。用戶在瀏覽A頁面時，就載入好B頁面，這樣當用戶去訪問B頁面時，B頁面很快就出來，提升了用戶體驗。但這個機制有一定的缺陷，就是預判不一定準確，可能會造成流量和資源的浪費。

B. 前端SPA應用緩存問題解決與實踐

要解決問題，有先決的理論知識先要了解

分兩種：

這種機制下，瀏覽器會先找本地緩存，命中則不會從伺服器請求，並返回200狀態碼，且附有 disk cache 或者 memory cache 字樣

這種機制，強緩存失效後，瀏覽器會攜帶緩存標識向伺服器發起請求，伺服器根據標識決定是否使用緩存

首先一點，就是 「瀏覽器會攜帶緩存標識」 ,這個標識是什麼，有兩種

好，原理講了，現在凡是用到nginx的，基本上自動都會實現了ETag和Last-Modified，也就是說，這部分實現機制，已經是默認的！不需要你另加處理。

好，問題來了，如何處理前端SPA應用的緩存問題呢？

現在的SPA要麼Vue要麼React要麼Angular

默認情況下，我們會看到：

即所有資源第一次進，強緩存，第二次進，無意外情況下，會執行協商緩存。

之所以會出現SPA緩存問題，在於index.html是304，那麼客戶端讀取到的，有可能是本地的Not Modified，那麼繼續下去，讀的依舊是本地的disk cache

如何解決問題呢？

這里有個特性，SPA通過webpack打包，一般默認會帶有contenthash值，即當對應文件有改動，這個contenthash值才會改變，進而改變打包出來的文件名，意味著 只有改變了的文件，文件名才會變，沒有改變的文件是不會變的

如果需要對特殊的文件特殊處理，比如文字類型的文件設置更大的緩存時間或者別的，可以參考上述語法單獨加映射

修改後， service nginx reload 一下，瀏覽器可以看到差別：

index.html一直是200，且從伺服器直接讀取，而所有其他的靜態文件，均從memory or disk cache讀取

好，那麼接下來如果有更新，可以想像，變化的文件有

而由於index.html一直是請求伺服器的，那麼得到的入口js也必然是最新的，意味著如果沒改動的，走本地強緩存，有改動的，會請求最新的，之後請求會走本地強緩存。

Problem solved.

解決前端SPA緩存問題：

C. 前端http請求細節——Cache-Control（緩存機制）

請求和響應中的 Cache-Control 指令並不完全相同，具體可以查看 這里 ，包括指令的具體意思，這里不過多贅述。（默認值：private）

瀏覽器的緩存機制是根據 HTTP 報文的緩存標識進行的，瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中 HTTP 頭的緩存標識，決定是否緩存結果。
瀏覽器緩存策略分為兩種：強制緩存和協商緩存。

強制緩存不會向伺服器發送請求，直接從緩存中讀取資源，可以看到請求返回的狀態碼都是200，並且 Size 代表該緩存的位置。

瀏覽器讀取緩存的順序為memory –> disk。

三級緩存原理 (訪問緩存優先順序)：

在瀏覽器中，瀏覽器會在js，字體，圖片等文件解析執行後直接存入內存緩存中，那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬碟文件中，所以每次渲染頁面都需要從硬碟讀取緩存(from disk cache)。

為什麼CSS會放在硬碟緩存中？
因為CSS文件載入一次就可渲染出來,我們不會頻繁讀取它,所以它不適合緩存到內存中,但是js之類的腳本卻隨時可能會執行,如果腳本在磁碟當中,我們在執行腳本的時候需要從磁碟取到內存中來,這樣IO開銷就很大了,有可能導致瀏覽器失去響應。

若伺服器的資源最後被修改時間 > If-Modified-Since的欄位值
則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩存文件

If-None-Match 的欄位值 = 該資源在伺服器的Etag值
一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。

ETag 和 Last-Modified 區別

參考鏈接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252

D. 【源碼】微前端qiankun源碼閱讀(3)：預載入、緩存和通信

【微前端】qiankun源碼閱讀(1)：Demo與single-spa流程
【微前端】qiankun源慧消碼閱讀(2)：載入子應用與沙箱隔離

通過前面的兩篇可以大概了解qiankun的運行，其中可能會有些疑問：一個主應用有多個子應用，如果每次都在切換子應用時才去載入對應子應用的資源，那切換時的體驗會比較差。為此，qiankun提供了預載入功能，可以看到在start中調用了 doPrefetchStrategy :

去到 src/prefetch.ts 中查看 doPrefetchStrategy ，可以看到其默認預載入策略是 prefetchAfterFirstMounted ，也就是等當前子應用加巧數載完畢後，再去預載入其他子應用。 prefetchAfterFirstMounted 很簡單，就是在 requestIdleCallback 中調用我們之前講到的 importEntry 去載入每個子應用。

requestIdleCallback 是一個相對新的API，可以用它來執行一些低優先順序的任務，它會在瀏覽器空閑的時候才去執行，從而避免影響當前子應用的載入。

另外有個問題是，如果我們每次切換應用都去 importEntry 重新載入資源，前寬知那不好。可以將資源保存起來。
這里其實也是 importEntry 做好了， importEntry 會將請求到的資源保存在 embedHTMLCache 變數中。

qiankun中的通信很簡單，在 initGlobalState API文檔 可以查看其使用。
這里源碼在 src/globalState.ts 中。各種通信方式在微前端框架里同樣適用，沒啥好看。

qiankun框架的源碼閱讀暫時先這樣，希望以後有應用場景可以使用一下這個框架。

E. 能用JS或者前端的什麼方法實現清除瀏覽器緩存嗎

可以用JS實現清除瀏覽器緩存，解決方法如下：

1、在靜態頁面也就是以.html，.jsp，.aspx，.php結尾的文件中在<dead></head>中加入以下代碼。

注意事項：

JavaScriptJavaScript基於對象和事件驅動並具有相對安全性的客戶端腳本語言。也是一種廣泛用於客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能，比如響應用戶的各種操作。