JS每日一題: 前端的緩存有哪些？都適用什麼場景？區別是什麼？

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點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

掃描下方二維碼便可加入答題