Angular 4中*ngFor遍历700个元素致应用卡顿，求延迟加载方案

嘿，这种长列表拖慢应用的情况我太熟悉了！结合你提到的只更新整个数组、不会修改单个对象细节这个关键特点，给你几个高效且贴合场景的解决方案：

1. 虚拟滚动（最推荐的长列表优化方案） #

因为你不需要单独更新列表项，虚拟滚动简直是量身定做——它只会渲染当前可视区域内的元素，700条数据最终只会加载屏幕能装下的十几/几十条，性能提升立竿见影。

在Angular 4里可以用适配版本的第三方库ngx-virtual-scroller，步骤大概是：

• 安装对应版本：npm install ngx-virtual-scroller@2.x --save（注意选适配Angular 4的版本）
• 在模块中导入VirtualScrollerModule
• 模板里替换*ngFor为虚拟滚动指令：

  <virtual-scroller [items]="yourArray" [itemSize]="60"> <!-- itemSize是每条元素的高度，根据你的UI调整 -->
    <div *ngFor="let item of virtualScroller.viewPortItems">
      <!-- 你的列表项内容 -->
      {{ item.name }}
    </div>
  </virtual-scroller>
  

这种方式完全不需要关心单个元素的更新，数组整体替换后，虚拟滚动会自动重新计算可视区域内容，完美匹配你的使用场景。

2. 分页（最简单直接的方案） #

如果不想引入第三方库，分页是最省心的选择。把700条数据拆成若干页（比如每页50条），每次只渲染当前页的内容：

• 在组件里维护两个变量：currentPage = 1，pageSize = 50
• 计算当前显示的切片数组：

  get displayItems() {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    return this.yourArray.slice(startIndex, startIndex + this.pageSize);
  }
  

• 模板里用*ngFor遍历displayItems，再加上分页按钮切换currentPage即可。
  因为你只更新整个数组，分页逻辑完全不需要额外处理，数组更新后displayItems会自动刷新。

3. 变更检测优化（配合上面方案效果翻倍） #

既然你明确说只更新整个数组，不修改单个对象，那把列表组件的变更检测策略改成OnPush能大幅减少不必要的性能消耗：

• 先导入相关依赖：

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

• 在组件装饰器里设置：

  @Component({
    selector: 'your-list-component',
    templateUrl: './your-list.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  

• 注意：更新数组时一定要返回新的数组引用，比如用扩展运算符：

  // 正确的更新方式
  this.yourArray = [...newUpdatedArray];
  // 不要直接修改原数组（比如push/splice），因为OnPush只检测引用变化
  

这样只有当数组引用改变时，组件才会触发变更检测，避免了Angular对700个元素逐个做脏检查的开销。

额外小技巧 #

• 尽量简化列表项模板：别在模板里写复杂表达式、自定义管道，必须用管道的话优先用pure: true的纯管道。
• 把列表项拆成独立子组件，给子组件也加上OnPush策略，进一步降低性能消耗。

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