面试题：Angular中ngFor指令在大数据集下的性能优化策略与实践

1. 虚拟滚动

原理：只渲染当前视口可见的项目，当用户滚动时，动态替换视口外的数据，避免一次性渲染大量DOM元素，显著提升性能。
实现方式：
- 使用@angular/cdk/scrolling库：这是Angular官方提供的CDK（Component Dev Kit）中的滚动模块，提供了虚拟滚动的支持。
- 安装：在项目目录下运行npm install @angular/cdk安装该库。
- 代码实现思路：
  - 在组件模板（.html文件）中，引入cdk-virtual-scroll-viewport指令。例如：

<cdk - virtual - scroll - viewport
    [itemSize]="itemHeight"
    [minBufferPx]="100"
    [maxBufferPx]="200"
    class="example-viewport">
    <div *cdkVirtualFor="let item of largeDataList">{{item}}</div>
</cdk - virtual - scroll - viewport>

这里itemHeight是每个列表项的高度，minBufferPx和maxBufferPx分别是视口上方和下方预渲染的缓冲区像素大小。largeDataList是包含上万条记录的数据源数组。 - 在组件类（.ts文件）中，定义数据源和itemHeight等属性。例如：

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

@Component({
    selector: 'app - virtual - scroll',
    templateUrl: './virtual - scroll.component.html',
    styleUrls: ['./virtual - scroll.component.css']
})
export class VirtualScrollComponent {
    largeDataList: any[] = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
    itemHeight = 50; // 假设每个列表项高度为50px
}

2. 数据分批加载

原理：避免一次性加载全部上万条数据，而是根据用户的操作（如滚动到列表底部），逐步加载更多数据。
实现方式：
- 结合后端API：后端提供接口，根据前端传递的偏移量（offset）和数量（limit）返回对应的数据。
- 代码实现思路：
  - 在组件类中，定义当前加载的数据、偏移量、每次加载的数量等变量。例如：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app - data - batch - load',
    templateUrl: './data - batch - load.component.html',
    styleUrls: ['./data - batch - load.component.css']
})
export class DataBatchLoadComponent {
    loadedData: any[] = [];
    offset = 0;
    limit = 100;
    constructor(private http: HttpClient) {}

    loadMoreData() {
        this.http.get<any[]>(`api/data?offset=${this.offset}&limit=${this.limit}`)
          .subscribe(data => {
                this.loadedData = [...this.loadedData, ...data];
                this.offset += this.limit;
            });
    }
}

    - 在组件模板中，使用`ngFor`指令展示`loadedData`，并添加加载更多按钮或监听滚动事件来触发`loadMoreData`方法。例如：

<div *ngFor="let item of loadedData">{{item}}</div>
<button (click)="loadMoreData()">Load More</button>

3. 变更检测优化

原理：Angular默认的变更检测策略是Default，会在每个事件周期检查组件树中的所有组件。对于大数据集场景，可通过设置变更检测策略为OnPush来减少不必要的检查。
实现方式：
- 在组件装饰器中设置：在组件类的@Component装饰器中，设置changeDetection: ChangeDetectionStrategy.OnPush。
- 代码实现思路：

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

@Component({
    selector: 'app - on - push - cd',
    templateUrl: './on - push - cd.component.html',
    styleUrls: ['./on - push - cd.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushCDComponent {
    dataList: any[] = [];
    // 组件逻辑
}

- **注意事项**：当使用`OnPush`策略时，只有当输入属性引用变化、组件接收到事件（如点击事件）或Observable发出新值时，才会触发变更检测。所以在更新数据时，需要确保数据的引用发生变化，比如通过创建新数组而不是直接修改原数组。例如：

// 错误方式，不会触发变更检测
this.dataList.push(newItem);

// 正确方式，触发变更检测
this.dataList = [...this.dataList, newItem];

面试题：Angular中ngFor指令在大数据集下的性能优化策略与实践

知识考点

面试题答案

1. 虚拟滚动

2. 数据分批加载

3. 变更检测优化