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

启发式缓存详解

当服务器响应中没有包含 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
  • 数据在相同域名下的所有页面间共享
  • 只能存储字符串,需要手动序列化和反序列化

使用示例:

javascript 复制代码
// 存储数据
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 结合使用。

主要特点:

  • 可以缓存网络请求和响应
  • 支持离线访问
  • 可以精细控制缓存策略
相关推荐
风尚云网17 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020419 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing21 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月24 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆32 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China33 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q33 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海34 分钟前
Chrome离线安装包下载
前端·chrome
endingCode38 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m51271 小时前
LinuxC语言
java·服务器·前端