JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

lolomaco 发布于2019-08-23 14:56 / 2073人阅读

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存，

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安全性问题都有什么区别前端都有什么前端都有什么服务器云计算的应用有哪些什么是云计算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101381.html

JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存， 20190116问: 前端的缓存有哪些？都适用什么场景？区别是什么？参考回答前端缓存分为两部分: http 缓存浏览器缓存 http 缓存强...

MockingBird 2019-08-30 15:55 评论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