Angular Effects性能对比：合并多信号更新vs单信号专属Effect

问题背景 #

希望通过effect函数基于Signals更新元素属性，但涉及多个信号时，不确定是用单个Effect处理所有信号，还是为每个信号单独创建Effect性能更优，同时想了解底层运行机制。

示例1：单个Effect处理所有信号 #

任意信号更新时，重置所有属性：

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

示例2：每个信号对应专属Effect #

每个信号更新时仅更新对应属性：

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

底层运行机制 #

Signal的核心逻辑 #

Signal是可观察的状态容器，每个Signal内部维护一个订阅者列表。当Signal的值发生变更时，会遍历列表通知所有依赖它的Effect，标记这些Effect为待执行状态。

Effect的工作流程 #

1. 依赖追踪：首次执行Effect回调时，会自动记录回调中访问的所有Signal，建立Effect → 依赖Signal的映射关系。
2. 触发调度：当任意依赖的Signal更新时，该Effect会被加入调度队列，等待下一次微任务周期执行。
3. 重新执行与依赖更新：Effect执行时会重新运行回调，再次追踪依赖（自动移除不再使用的Signal订阅，添加新的依赖）。

两种方案的性能对比 #

方案1（单个Effect）的性能特点 #

• 依赖范围：该Effect会订阅所有涉及的Signal，任何一个Signal更新都会触发整个回调执行。
• 开销点：
  • 每次触发时，无论哪个Signal变化，都会重复执行所有属性的setAttribute操作，哪怕大部分属性的值没有变化。
  • 每次执行都要读取所有Signal的值并完成字符串转换，产生无效计算。

方案2（多专属Effect）的性能特点 #

• 依赖范围：每个Effect仅订阅对应的单个Signal，只有当该Signal更新时，才会触发对应Effect执行。
• 优势：
  • 仅在必要时更新DOM：每个Effect只负责一个属性，避免了大量无效的DOM操作（DOM操作是前端性能开销的核心点之一）。
  • 减少无效计算：每次仅处理变化的Signal相关逻辑，无需读取其他未变化的Signal值。
  • 调度开销可忽略：多个Effect的调度成本远低于无效DOM操作的开销，即使信号数量超过4个，这部分成本也不会成为性能瓶颈。

结论 #

当信号数量超过4个时，方案2（每个Signal对应专属Effect）的性能更高效。

唯一的例外场景是：所有Signal几乎总是同时更新（比如每次状态变化都会触发所有Signal的值变更），此时方案1的调度次数更少，性能差异不大。但这种场景在实际业务中非常少见。

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