拖拽动态增删元素的数组访问性能优化：克隆代价与改进方案

当前实现的性能代价 #

• 内存与GC压力：每次调用constraints getter都会创建新数组，若原_constraints数组元素量大（比如示例中的100000个元素），每次都会分配大量内存。每秒60次的高频访问会产生大量临时数组，触发频繁的垃圾回收（GC），严重时会导致UI线程卡顿，影响拖拽等交互的流畅度。
• CPU资源消耗：合并数组需要遍历_constraints和_extras的所有元素并复制到新数组，元素越多，遍历和复制的耗时越长。高频调用下，CPU占用会显著升高，可能阻塞主线程，导致动画帧丢帧、响应延迟。
• 不必要的实例创建：每次返回的新数组都是独立实例，若外部代码无修改需求，这种完全冗余的实例创建纯粹是性能浪费。

更优编码方式 #

方案1：缓存合并结果（适合大多数场景） #

核心思路是仅在_extras变化时重新合并数组，平时直接返回缓存的结果，避免高频重复合并。

class Hello {
  private _cachedConstraints?: number[];
  _extras?: number[];

  constructor(readonly _constraints: number[]) {}

  set extras(newExtras: number[] | undefined) {
    this._extras = newExtras;
    // 当_extras变化时，重新生成缓存
    this._cachedConstraints = newExtras 
      ? [...this._constraints, ...newExtras] 
      : [...this._constraints];
  }

  get constraints() {
    // 若缓存不存在，初始化一次
    if (!this._cachedConstraints) {
      this._cachedConstraints = this._extras 
        ? [...this._constraints, ...this._extras] 
        : [...this._constraints];
    }
    return this._cachedConstraints;
  }
}

// 使用示例
let hello = new Hello([1,2,3,4, 100000]);
hello.extras = [5,6,7]; // 仅此处执行一次合并操作

function step() {
  console.log(hello.constraints); // 直接返回缓存，无合并开销
  requestAnimationFrame(step);
}
requestAnimationFrame(step);

方案2：虚拟组合数组（极致性能，无内存复制） #

如果不需要返回真实数组，仅需支持元素访问或遍历，可以实现一个虚拟组合结构，直接代理两个数组的访问，完全避免元素复制。

class CombinedConstraints {
  constructor(private readonly primary: number[], private readonly secondary?: number[]) {}

  get length() {
    return this.primary.length + (this.secondary?.length ?? 0);
  }

  // 实现索引访问
  get(index: number): number {
    if (index < this.primary.length) {
      return this.primary[index];
    }
    return this.secondary![index - this.primary.length];
  }

  // 支持for...of遍历
  *[Symbol.iterator]() {
    yield* this.primary;
    if (this.secondary) yield* this.secondary;
  }
}

class Hello {
  _extras?: number[];

  constructor(readonly _constraints: number[]) {}

  get constraints() {
    return new CombinedConstraints(this._constraints, this._extras);
  }
}

// 使用示例
let hello = new Hello([1,2,3,4, 100000]);
hello._extras = [5,6,7];

function step() {
  const constraints = hello.constraints;
  // 直接访问指定索引元素
  console.log(constraints.get(0), constraints.get(100000));
  // 遍历所有元素
  for (const num of constraints) {
    // 处理逻辑
  }
  requestAnimationFrame(step);
}
requestAnimationFrame(step);

这种方式内存开销几乎为0，CPU消耗极低，适合元素量极大、对性能要求极高的场景。

内容的提问来源于stack exchange，提问作者eguneys