成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lolomaco / 2114人閱讀

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

20190116問:

前端的緩存有哪些？都適用什么場景？區(qū)別是什么？

參考回答

前端緩存分為兩部分:

http 緩存

瀏覽器緩存

http 緩存

強緩存

強緩存主要是采用響應(yīng)頭中的Cache-Control和Expires兩個字段進行控制的

Cache-Control 值理解:

max-age 指定設(shè)置緩存最大的有效時間(單位為s)
public 指定響應(yīng)會被緩存，并且在多用戶間共享
private 響應(yīng)只作為私有的緩存，不能在用戶間共享
no-cache 指定不緩存響應(yīng)，表明資源不進行緩存
no-store 絕對禁止緩存

Expires 理解:

緩存過期時間，用來指定資源到期的時間，是服務(wù)器端的具體的時間點, 需要和Last-modified結(jié)合使用

Last-modified 理解

服務(wù)器端文件的最后修改時間，需要和cache-control共同使用，是檢查服務(wù)器端資源是否更新的一種方式

ETag 理解

根據(jù)實體內(nèi)容生成一段hash字符串，標(biāo)識資源的狀態(tài)，由服務(wù)端產(chǎn)生。瀏覽器會將這串字符串傳回服務(wù)器，驗證資源是否已經(jīng)修改

協(xié)商緩存(304)

協(xié)商緩存是指當(dāng)強緩存機制如果檢測到緩存失效，就需要進行服務(wù)器再驗證

瀏覽器緩存

Cookie

LocalStorage

SessionStorage

Service Worker

Cookie

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

LocalStorage

LocalStorage的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶清除瀏覽器緩存數(shù)據(jù)為止, 容量為5MB

SessionStorage

SessionStorage的其他屬性同LocalStorage, 不同是的當(dāng)頁面關(guān)閉時會隨之清除

Service Worker

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

往期

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

關(guān)于JS每日一題

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

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

加入JS每日一題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101381.html

相關(guān)文章

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

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

    MockingBird 評論0 收藏0

  • JS每日一題：如何理解es6中的Proxy？

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

    tinysun1234 評論0 收藏0

  • JS每日一題：如何理解es6中的Proxy？

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

    PumpkinDylan 評論0 收藏0

  • 前端知識點(二)

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

    zacklee 評論0 收藏0

  • 前端知識點(二)

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

    lbool 評論0 收藏0

發(fā)表評論

0條評論

lolomaco

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<