LocalStorage可作为轻量持久缓存支撑前端性能数据闭环，通过累加结构、节流写入、合理上报策略及容错降级保障数据不丢。
LocalStorage 可以作为轻量、持久的本地缓存层，支撑前端性能数据的“采集—累积—上报”闭环。它不替代监控后端，但能有效缓解网络抖动、页面意外关闭导致的数据丢失问题，特别适合首屏时间（FP/FCP）、资源加载耗时、JS错误计数、用户停留时长等可聚合指标的本地暂存。
设计可累加的性能数据结构
避免每次记录完整日志，应定义精简、可增量更新的对象结构。例如：
- 初始化时检查
localStorage.getItem('perf_stats')，为空则写入默认值：{"fp": 0, "fcp": 0, "loadCount": 0, "errors": 0, "visits": 1, "lastActive": 1718469230000} - 后续访问读取后解析为对象，仅更新对应字段（如
stats.errors++或stats.fcp = Math.max(stats.fcp, performance.getEntriesByName('first-contentful-paint')[0]?.duration || 0)） - 时间类字段统一用毫秒整数；计数类用数字；禁止存
Date实例、函数或循环引用对象
控制写入时机，减少主线程阻塞
频繁调用 localStorage.setItem 会同步阻塞渲染，应合并与节流：
- 页面隐藏或卸载前写入快照：监听
visibilitychange或beforeunload，保存当前会话关键指标（如 LCP、CLS、错误总数） - 使用
setTimeout延迟 3–5 秒再写入，避开首屏关键路径 - 对高频事件（如滚动、输入）做节流，例如 10 秒内最多触发一次本地更新
设定合理上报策略
本地累积 ≠ 立即发送。需结合业务容忍度选择触发条件：
- 按条数：累计满 5–10 条聚合记录后发起上报（适合低频埋点场景）
- 按时间窗口：每 15–30 分钟检查
Date.now() - lastReportTime > 900000，满足则打包上报并更新时间戳 - 强制兜底：在
beforeunload中用navigator.sendBeacon()发送最终汇总，确保关闭时不丢数据 - 上报成功后清空对应字段（非全量
clear()），例如重置errors和loadCount，保留visits累计
容错与降级保障数据不丢
LocalStorage 并非 always available，必须主动检测和 fallback：
- 封装
isStorageAvailable()：尝试写入 + 读取 + 删除一个测试键，失败则返回false - 不可用时降级到内存缓存：
window.__perfBuffer = window.__perfBuffer || []，仅维持当前会话 - 上报失败后，将待发数据以
pending_perf_${Date.now()}形式重新写入 localStorage，并在下次页面加载时扫描所有pending_*键进行重试 - 定期清理过期缓存项：维护一个索引数组，按时间戳剔除超过 24 小时未上报的 pending 记录
