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

MockingBird 發布于2019-08-30 15:55 / 780人閱讀

摘要：問前端的緩存有哪些都適用什么場景區別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強緩存強緩存主要是采用響應頭中的和兩個字段進行控制的值理解指定設置緩存最大的有效時間單位為指定響應會被緩存，并且在多用戶間共享響應只作為私有的緩存，

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)

協商緩存是指當強緩存機制如果檢測到緩存失效，就需要進行服務器再驗證

瀏覽器緩存

LocalStorage

SessionStorage

Service Worker

Cookie

Cookie主要用于用戶信息的存儲, 容量為4KB

LocalStorage

LocalStorage的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據為止, 容量為5MB

SessionStorage

SessionStorage的其他屬性同LocalStorage, 不同是的當頁面關閉時會隨之清除

Service Worker

主要是為了提高web app的用戶體驗，可以實現離線應用消息推送等等一系列的功能, 可以看做是一個獨立于瀏覽器的Javascript代理腳本, 在離線狀態下也能提供基本的功能。出于安全性的考慮，Service Worker 只能在https協議下使用

往期

每日一題: 元素水平垂直居中的方式有哪些？

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

加入JS每日一題

云服務器 GPU云服務器 js安全性問題都有什么區別前端都有什么前端都有什么服務器云計算的應用有哪些什么是云計算

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117312.html

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

摘要：問前端的緩存有哪些都適用什么場景區別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強緩存強緩存主要是采用響應頭中的和兩個字段進行控制的值理解指定設置緩存最大的有效時間單位為指定響應會被緩存，并且在多用戶間共享響應只作為私有的緩存， 20190116問: 前端的緩存有哪些？都適用什么場景？區別是什么？參考回答前端緩存分為兩部分: http 緩存瀏覽器緩存 http 緩存強...

lolomaco 2019-08-23 14:56 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

zacklee 2019-08-30 15:55 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

lbool 2019-08-23 14:52 評論0 收藏0