Angular 7+Angular Material自动完成组件5000+值优化方案咨询

嘿，针对Angular 7结合Angular Material Autocomplete处理5000+条数据的性能瓶颈，我整理了几个在实际项目中验证有效的优化策略，你可以按需组合使用：

这是解决大量DOM节点渲染性能问题的核心方案——不用一次性渲染所有选项，只渲染当前可视区域内的条目。Angular CDK的ScrollingModule提供了虚拟滚动支持，可以直接和Material Autocomplete结合：

步骤： #

1. 先导入ScrollingModule到你的模块中：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // ... 其他模块
    ScrollingModule
  ]
})
export class YourModule { }

2. 修改Autocomplete模板，用cdk-virtual-scroll-viewport包裹mat-option：

<mat-autocomplete #auto="matAutocomplete">
  <cdk-virtual-scroll-viewport itemSize="48" class="autocomplete-viewport">
    <mat-option *cdkVirtualFor="let option of filteredOptions | async" [value]="option">
      {{ option.label }}
    </mat-option>
  </cdk-virtual-scroll-viewport>
</mat-autocomplete>

3. 添加样式限制视口高度：

.autocomplete-viewport {
  height: 300px; /* 根据需求调整高度 */
}

itemSize是每个选项的固定高度（单位px），CDK会根据这个值计算要渲染的条目数量。

用户输入时，不要每按一次键就触发筛选逻辑——用RxJS的debounceTime操作符，等待用户停止输入几百毫秒后再执行筛选，避免频繁的计算和变更检测：

import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { FormControl } from '@angular/forms';

export class YourComponent {
  myControl = new FormControl();
  filteredOptions: Observable<any[]>;
  allData: any[]; // 你的5000+条原始数据

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      debounceTime(300), // 等待300ms用户停止输入
      distinctUntilChanged(), // 只有输入值真正变化时才继续
      switchMap(value => this.filterOptions(value)) // 切换到筛选数据流
    );
  }

  private filterOptions(value: string): Observable<any[]> {
    const filterValue = value?.toLowerCase() || '';
    return of(this.allData.filter(item => 
      item.label.toLowerCase().includes(filterValue)
    ));
  }
}

如果你的数据是从后端获取的，switchMap还能自动取消之前未完成的请求，避免无效请求堆积。

提前对原始数据做预处理，避免每次筛选时重复执行转换操作，比如统一转小写、提取关键字，甚至按首字母分组创建索引：

export class YourComponent {
  allData: any[];
  preprocessedData: Array<{original: any, lowerLabel: string}>;

  ngOnInit() {
    // 初始化时预处理数据，把label转成小写存起来
    this.preprocessedData = this.allData.map(item => ({
      original: item,
      lowerLabel: item.label.toLowerCase()
    }));

    // 或者按首字母分组创建索引
    this.letterIndex = this.preprocessedData.reduce((acc, item) => {
      const firstLetter = item.lowerLabel[0];
      if (!acc[firstLetter]) acc[firstLetter] = [];
      acc[firstLetter].push(item.original);
      return acc;
    }, {} as Record<string, any[]>);
  }

  private filterOptions(value: string): Observable<any[]> {
    const filterValue = value?.toLowerCase() || '';
    // 用预处理好的lowerLabel筛选，避免重复转小写
    const filtered = this.preprocessedData
      .filter(item => item.lowerLabel.includes(filterValue))
      .map(item => item.original);
    
    // 如果用索引的话，用户输入第一个字符时直接取对应组
    // if (filterValue.length === 1) return of(this.letterIndex[filterValue] || []);
    
    return of(filtered.slice(0, 30)); // 额外限制结果数量
  }
}

即使做了筛选，宽泛的关键词可能还是会返回几百条结果——可以限制返回的条目数量（比如前30条），用户如果需要更精确的结果会继续输入，这样能进一步减少DOM渲染压力：

// 在筛选逻辑最后添加slice
return of(filtered.slice(0, 30));

把Autocomplete所在的组件设置为OnPush变更检测策略，这样只有当输入值变化、输入属性更新或手动触发变更检测时，Angular才会执行变更检测，减少不必要的性能消耗：

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

@Component({
  selector: 'app-your-autocomplete',
  templateUrl: './your-autocomplete.component.html',
  styleUrls: ['./your-autocomplete.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // 启用OnPush
})
export class YourAutocompleteComponent {
  // ... 组件逻辑
}

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