优化高频继承getter的核心是减少重复计算、避免强制同步布局、切断无效依赖链，具体包括合并读取与缓存、用css变量替代js查询、以resizeobserver等异步api替代轮询、以及通过requestidlecallback延后非紧急读取。

直接优化高频触发的继承 Getter，核心在于减少重复计算、避免隐式强制同步布局、切断无效依赖链。它不是“删掉”或“禁用”Getter，而是让它的执行时机更可控、结果更可复用。

识别哪些继承 Getter 正在高频消耗 CPU
浏览器中很多样式属性（如 offsetTop、clientWidth、getComputedStyle(el).color）本质是继承 Getter，每次读取都可能触发 layout。高频场景常见于：

• 滚动/拖拽过程中反复读取元素位置或尺寸
• 动画帧（requestAnimationFrame）里无差别查询多个样式值
• 表格行高自适应、弹窗定位、虚拟滚动计算等逻辑中嵌套调用

用 Chrome DevTools 的 Performance 面板录制操作，开启“Layout Shifts”和“Paint Profiling”，筛选出耗时长且调用频次高的 getComputedStyle、offsetHeight 等堆栈，就能准确定位问题 Getter。

合并读取 + 缓存结果，一次 layout 解决所有需求
同一个元素的多个布局相关属性，应一次性读完，而不是分散在多次调用中。例如：

// ❌ 错误：三次强制 layout
const top = el.offsetTop;
const height = el.offsetHeight;
const color = getComputedStyle(el).color;

// ✅ 正确：一次 layout + 一次 computedStyle
const style = getComputedStyle(el);
const top = el.offsetTop;
const height = el.offsetHeight;
const color = style.color;

对静态区域（如侧边栏、顶部导航），首次读取后可用 WeakMap 缓存整套值；对动态区域（如随数据变化重排的卡片列表），可在 MutationObserver 监听到结构变更后再清空对应缓存。

用 CSS 自定义属性替代 JS 继承读取
若只是为传递主题色、字号、断点状态等设计变量，优先用 :root 定义 CSS 变量，再通过 getComputedStyle(document.documentElement).getPropertyValue('--primary-color') 一次性读取。这样既解耦逻辑，又避免对具体 DOM 元素反复查询。

替换为被动监听或声明式方案
部分 Getter 场景其实可被替代：

• 元素尺寸变化 → 用 ResizeObserver 替代轮询 offsetWidth
• 滚动位置依赖 → 用 IntersectionObserver 判断可视性，而非实时查 getBoundingClientRect()
• 主题/暗色模式切换 → 订阅 prefers-color-scheme 媒体查询变更，而非每次渲染都读 window.matchMedia

这些 API 是异步、批量、浏览器原生优化的，不会打断渲染流水线。

限制执行节奏，避开关键帧
即使必须读取，也要避开 rAF 中间段。可封装安全读取函数：

function safeReadLayout(fn) {
  return () => {
    if (document.hidden) return;
    requestIdleCallback(() => fn(), { timeout: 100 });
  };
}

把非紧急的 Getter 调用延后到空闲时段，防止挤压动画帧。

不复杂但容易忽略