1.背景 業務需求，需要聯動多個平臺，涉及到各平臺的模擬登錄。 已知加密前明文且正常登錄。（無驗證碼要求） 某平臺驗證驗證方式為.\login介面POST一串json字元串 { "account": "********", "password": "uR+dmpMdF9MRXfkBG3wQ+w==" ...
一、背景
最近公司業務需要開發了一個js sdk，功能開髮結束，混淆之後的代碼大小差不多有300多kb。sdk主要是通過http介面請求返回至前端進行渲染。因為js包體積300多kb會消耗過多的網路資源，所以採用瀏覽器緩存策略避免多次http請求造成網路資源浪費，降低網路延遲，減少網路負荷，提高性能。
二、瀏覽器緩存
根據瀏覽器緩存的位置可以分為4類
- Memory Cache
- Disk Cache
- Service Worker
- Push Cache
| 緩存類型 | 存儲位置 | 優點 | 缺點 | 觸發時機 |
|---|---|---|---|---|
| Memory Cache | 存儲在運行記憶體中 | 讀取速度快 | 不能持久化存儲，瀏覽器tab頁關閉之後就被釋放 | 頁面載入之後，刷新頁面就會觸發 |
| Disk Cache | 存儲在本地磁碟中 | 能持久化存儲，瀏覽器tab頁關閉之後還存在 | 讀取速度慢 | 瀏覽器關閉之後，再次打開頁面 |
| Service Worker | 存儲在本地磁碟中 | 自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，並且緩存是持續性 | 讀取速度慢 | 瀏覽器關閉之後，再次打開頁面 |
| Push Cache（推送緩存） | 存儲在會話（Session）中 | - | 會話結束就被釋放 | Push Cache是針對HTTP/2標準下的推送資源設定的 ，是瀏覽器緩存的最後一道緩存機制，是在設置了Last-Modifed但沒有設置Cache-Control或者Expires時觸發 |
三、示例
- 配置nginx
#靜態資源文件緩存 location ^~ /static/ { access_log off; add_header Cache-Control max-age=2592000; expires 30d; } - 訪問
/static/observer.js
- Memory Cache
- Disk Cache
- Service Worker及Push Cache當前未涉及到後續補充
