启发式缓存和本地存储缓存

启发式缓存详解

当服务器响应中没有包含 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 结合使用。

主要特点:

• 可以缓存网络请求和响应
• 支持离线访问
• 可以精细控制缓存策略

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓