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

栏目: JavaScript · 发布时间: 5年前

内容简介:强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的max-age 指定设置缓存最大的有效时间(单位为s)public 指定响应会被缓存,并且在多用户间共享
  • 强缓存

强缓存主要是采用响应头中的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每日一题: 前端的缓存有哪些?都适用什么场景?区别是什么?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

"笨办法"学Python

"笨办法"学Python

肖 (Zed A.Shaw) / 王巍巍 / 人民邮电出版社 / 2014-11-1 / CNY 49.00

本书是一本Python入门书籍,适合对计算机了解不多,没有学过编程,但对编程感兴趣的读者学习使用。这本书以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现,让初学者从基础的编程技术入手,最终体验到软件开发的基本过程。 本书结构非常简单,共包括52个习题,其中26个覆盖了输入/输出、变量和函数三个主题,另外26个覆盖了一些比较高级的话题,如条件判断、循环、类和对象、代码测......一起来看看 《"笨办法"学Python》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试