當前位置:ag真人国际官网-ag旗舰厅官方网站 » 文件管理 » 前端頁面緩存技術

前端頁面緩存技術-ag真人国际官网

發布時間: 2024-06-23 15:04:57

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結尾的文件中在中加入以下代碼。


注意事項:

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

熱點內容
發布:2024-07-17 17:13:27 瀏覽:872
phpjava交互 發布:2024-07-17 16:58:57 瀏覽:356
resin下jsp不能正常編譯 發布:2024-07-17 16:34:44 瀏覽:229
sqlserver如何切換主備伺服器 發布:2024-07-17 16:23:02 瀏覽:299
mc18伺服器ip 發布:2024-07-17 16:23:02 瀏覽:379
仙境傳說手游腳本 發布:2024-07-17 16:09:24 瀏覽:691
matlab命令窗口和新建腳本 發布:2024-07-17 15:51:26 瀏覽:375
建ftp文件夾 發布:2024-07-17 15:51:26 瀏覽:955
魔獸撿物腳本 發布:2024-07-17 15:27:56 瀏覽:130
開發ip伺服器 發布:2024-07-17 15:24:42 瀏覽:388
网站地图