启发式缓存详解
当服务器响应中没有包含 Expires、Cache-Control: max-age 或 Cache-Control:s-maxage 时,浏览器会采用一个启发式的算法来确定缓存的时间。
1. 启发式缓存的计算方法
通常,启发式缓存会根据响应头中的 Date 和 Last-Modified 之间的时间差来计算缓存时间。
计算公式: 缓存时间 = (Date - Last-Modified) * 0.1
例如,如果 Date 是当前时间,Last-Modified 是 10 天前,那么启发式缓存的有效期就是 1 天。
2. 启发式缓存的应用
启发式缓存主要用于那些没有明确指定缓存策略的资源。它是浏览器的一种兜底策略,为没有设置缓存策略的资源提供一定的缓存能力。
3. 启发式缓存的优缺点
优点:
- 为没有明确缓存策略的资源提供缓存能力
- 减少了对服务器的请求次数
缺点:
- 缓存时间不精确,可能导致资源更新不及时
- 不同浏览器的实现可能不同,缓存行为不可控
本地存储缓存详解
本地存储缓存是指在客户端(如浏览器、移动应用等)本地保存数据的一种机制。它可以提高应用程序的性能和用户体验,减少对服务器的请求,并支持离线访问等功能。本地存储缓存主要包括以下几种技术:
1. Web Storage
是 HTML5 提供的本地存储方案,包括 localStorage 和 sessionStorage 两种机制:
1.1 localStorage
localStorage 是一种持久化的本地存储,数据永远不会过期,除非被明确删除。
特点:
- 容量较大,通常为 5MB
- 数据在相同域名下的所有页面间共享
- 只能存储字符串,需要手动序列化和反序列化
使用示例:
// 存储数据
localStorage.setItem('username', 'John');// 获取数据
const username = localStorage.getItem('username');// 删除数据
localStorage.removeItem('username');// 清空所有数据
localStorage.clear();
1.2 sessionStorage
sessionStorage 类似于 localStorage,但数据只在当前会话(窗口或标签页)中有效,关闭窗口后数据会被清除。
特点:
- 容量通常为 5MB
- 数据只在同一个窗口(或标签页)的同源页面间共享
- 只能存储字符串
使用方法与 localStorage 相同。
Web Storage 的优点:
- 简单易用
- 存储容量较大(通常为5MB左右)
- 可以存储字符串类型的数据
缺点:
- 只能存储字符串,复杂数据结构需要手动序列化和反序列化
- 同步操作,可能会阻塞主线程
- 不支持索引和复杂查询
2. IndexedDB
IndexedDB 是一个低级 API,用于客户端存储大量结构化数据。它可以存储更复杂的数据结构,如 JavaScript 对象。
特点:
- 可以存储大量数据
- 支持索引,可以高效检索
- 支持事务,保证数据一致性
- 异步 API,不会阻塞主线程
3. Cache API
Cache API 是一种用于存储网络请求和响应的 API,主要用于实现离线 Web 应用和提高性能。它通常与 Service Workers 结合使用。
主要特点:
- 可以缓存网络请求和响应
- 支持离线访问
- 可以精细控制缓存策略
关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓
