原生 Getter 本身不执行异步操作，但可封装已采集的性能指标作为只读快照，配合 PerformanceObserver、定时轮询或事件触发更新底层缓存，实现轻量、响应式、无副作用的长效性能视图。
原生 Getter 本身不执行异步操作，也不能直接监听异步状态变化，但它可以作为“被动计算层”与异步监控系统协同工作——关键在于把异步指标的读取逻辑封装进 Getter，再配合外部主动更新机制（如 PerformanceObserver、定时轮询或事件触发），实现轻量、响应式、无副作用的长效性能视图。
用 Getter 封装可响应的性能快照
Getter 不适合做采集动作，但非常适合暴露当前已采集到的指标。例如将页面驻留时长、最大内存占用、累计 LCP 延迟等聚合值，通过 Getter 暴露为只读属性：
- 定义一个全局监控上下文对象（如 PerfStore），内部用 Map 或普通属性缓存最新指标值
- 在该对象上声明 Getter，如 get maxJSHeapUsed()，直接返回
PerfStore.metrics.jsHeapMax - 所有真实采集逻辑（如监听
performance.getEntriesByType('navigation')或轮询Performance.getMetrics）独立运行，仅负责更新PerfStore.metrics - 组件或调试工具访问
PerfStore.maxJSHeapUsed时，拿到的是最新快照，无需重复计算或触发副作用
结合 PerformanceObserver 实现自动指标注入
要让 Getter “长效”反映运行时状态，必须有持续的数据源。推荐用 PerformanceObserver 监听资源加载、导航、自定义标记等事件，并实时写入存储：
- 注册 Observer 监听
['resource', 'navigation', 'paint', 'longtask']等 entryTypes - 在回调中解析关键字段：如
entry.duration、entry.startTime、entry.name，并按需聚合到PerfStore.metrics - 对 Web Vitals 类指标（如 LCP、CLS），用
PerformanceObserver+entryType: 'largest-contentful-paint'精准捕获，更新PerfStore.lcpTime - Getter 如
get lcpElement()可返回PerfStore.lcpEntry?.element || null，保持语义清晰且线程安全
嵌入异步生命周期钩子提升上下文精度
单页应用中路由跳转、组件挂载/卸载、数据请求等都是异步过程。Getter 可与这些过程绑定，提供带上下文的指标视图：
- 在路由切换前调用
performance.mark('route-start')，切换后performance.measure('route-load', 'route-start') - 将测量结果存入
PerfStore.routeDurations数组，Getterget avgRouteLoad()返回平均值 - 对异步请求，可在封装的 fetch 函数中自动打点：
performance.mark(`${url}-start')→.then(() => performance.mark(`${url}-end'))→ 触发 measure - Getter 如
get slowestFetch()可遍历performance.getEntriesByType('measure')中匹配的条目，返回耗时最长的记录
规避常见陷阱：惰性、时效与内存
Getter 的惰性求值特性是优势，但也需注意边界：
- 不要在 Getter 内部调用
performance.getEntriesByType等开销操作——它每次访问都重新查表，违背“快照”本意 - 避免长期持有 DOM 引用（如 LCP 元素）导致内存泄漏；Getter 返回后应由调用方决定是否保留引用
- 对高频变化指标（如帧率、滚动速度），不建议用 Getter 暴露瞬时值，而应提供
onFpsUpdate(cb)订阅接口 - 可通过
WeakMap关联组件实例与性能数据，确保组件销毁后指标自动清理
