Angular中返回新数组致性能骤降的原因及优化方案咨询

数据老陈

2026-5-14

为什么返回新数组会导致性能暴跌？

这事儿得从Angular的变更检测机制说起：

当你在*ngFor里调用getItems()时，Angular每次触发变更检测（比如组件属性变化、用户交互、定时器触发等等）都会执行这个方法。
前两种写法里，getItems()要么直接返回this.items的原引用，要么返回同一个数组对象，Angular对比数组引用后发现没变化，就不会重新渲染整个列表。
但用filter()的时候就不一样了：filter()每次调用都会返回一个全新的数组对象（哪怕里面的元素和之前完全一致）。Angular看到数组引用变了，就会默认认为整个列表的数据都更新了，于是会销毁原来的所有DOM元素，重新创建新的元素——这可是个非常耗性能的操作，数据量越大，卡顿就越明显。

优化过滤逻辑的几种方案

1. 预存过滤后的结果为组件属性

最直接的办法就是把过滤后的数组存在组件的一个属性里，只在数据源或过滤条件变化时重新计算，而不是每次变更检测都跑一遍过滤：

// 组件类代码
filteredItems: Item[] = [];

ngOnInit() {
  // 初始化时计算一次
  this.refreshFilteredItems();
}

// 当this.items或者过滤条件变动时，主动调用这个方法更新
refreshFilteredItems() {
  this.filteredItems = this.items.filter(item => item.premium === true);
}

模板里直接使用预存的属性：

<div *ngFor="let item of filteredItems"></div>

这样只有当refreshFilteredItems()被主动触发时，filteredItems才会更新，Angular也只会在这时候重新渲染列表。

2. 使用纯管道（Pure Pipe）

Angular的纯管道只会在输入参数的引用发生变化时才会重新计算，非常适合这种固定逻辑的过滤场景：

首先创建一个过滤管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'premiumItems' })
export class PremiumItemsPipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    if (!items) return [];
    return items.filter(item => item.premium === true);
  }
}

然后在模板里使用管道：

<div *ngFor="let item of items | premiumItems"></div>

这样只有当items的引用变化时，管道才会重新执行过滤，不会每次变更检测都重复计算。

3. 结合OnPush变更检测策略

如果你的组件场景允许，开启OnPush变更检测策略能进一步减少不必要的检测次数：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 开启OnPush策略
})
export class YourComponent {
  // 搭配上面的预存属性或管道使用，性能提升更明显
}

开启OnPush后，Angular只会在组件的@Input属性引用变化，或者组件内部触发事件时才会执行变更检测，能大幅降低性能消耗。

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