20190116問:
前端的快取有哪些？都適用什麼場景？區別是什麼？
參考回答
前端快取分為兩部分:
- http 快取
- 瀏覽器快取
http 快取
- 強快取
強快取主要是採用響應頭中的Cache-Control和Expires兩個欄位進行控制的
Cache-Control 值理解:
max-age 指定設定快取最大的有效時間(單位為s)
public 指定響應會被快取，並且在多使用者間共享
private 響應只作為私有的快取，不能在使用者間共享
no-cache 指定不快取響應，表明資源不進行快取
no-store 絕對禁止快取
Expires 理解:
快取過期時間，用來指定資源到期的時間，是伺服器端的具體的時間點, 需要和Last-modified結合使用
Last-modified 理解
伺服器端檔案的最後修改時間，需要和cache-control共同使用，是檢查伺服器端資源是否更新的一種方式
ETag 理解
根據實體內容生成一段hash字串，標識資源的狀態，由服務端產生。瀏覽器會將這串字串傳回伺服器，驗證資源是否已經修改
- 協商快取(304)
協商快取是指當強快取機制如果檢測到快取失效，就需要進行伺服器再驗證
瀏覽器快取
- Cookie
- LocalStorage
- SessionStorage
- Service Worker
Cookie
Cookie主要用於使用者資訊的儲存, 容量為4KB
LocalStorage
LocalStorage的資料將一直儲存在瀏覽器內，直到使用者清除瀏覽器快取資料為止, 容量為5MB
SessionStorage
SessionStorage的其他屬性同LocalStorage, 不同是的當頁面關閉時會隨之清除
Service Worker
主要是為了提高web app的使用者體驗，可以實現離線應用訊息推送等等一系列的功能, 可以看做是一個獨立於瀏覽器的Javascript代理指令碼, 在離線狀態下也能提供基本的功能。 出於安全性的考慮，Service Worker 只能在https協議下使用
往期
JS每日一題: Call，Apply，Bind的使用與區別，如何實現一個bind？
JS每日一題: 說說你對前端模組化的理解
JS每日一題: web安全攻擊手段有哪些？以及如何防範
關於JS每日一題
JS每日一題可以看成是一個語音答題社群
每天利用碎片時間採用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案
- 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路
掃描下方二維碼即可加入答題
