Angular 5应用加载对象时性能低下问题排查求助

嘿，针对你Angular 5应用里网格拖拽的性能问题，我在实战中踩过不少类似的坑，分享几个亲测有效的优化思路给你：

• 用事件委托替代逐个单元格绑定事件
  每个单元格都绑3个拖拽事件，网格数量一大，事件监听器的数量直接爆炸，这绝对是性能杀手。你可以把拖拽事件统一绑定到网格的父容器上，利用事件冒泡来定位触发事件的单元格。这样只需要3个监听器就能覆盖所有单元格，内存占用和事件触发开销会大幅降低。
  给你个简单的代码示例：

  // 在网格父组件中绑定事件
  @HostListener('dragenter', ['$event'])
  onDragEnter(event: DragEvent) {
    const targetCell = event.target.closest('.grid-cell'); // 精准定位触发事件的单元格
    if (targetCell) {
      // 这里处理单元格的拖拽进入逻辑，比如判断是否可放置
      this.handleCellDragEnter(targetCell);
    }
  }
  

• 切换到OnPush变更检测策略
  Angular默认的Default变更检测策略，每次事件触发都会遍历整个组件树检查变更，大量单元格组件存在时，这个过程会慢到离谱。你可以把单元格组件的变更检测改成OnPush，这样只有当组件输入属性变化，或者手动触发变更检测时，才会更新视图。
  代码示例如下：

  import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'app-grid-cell',
    templateUrl: './grid-cell.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush // 启用OnPush
  })
  export class GridCellComponent {
    @Input() cellData: any;
    // ... 其他业务逻辑
  }
  

  注意用了OnPush后，如果组件内部有需要更新视图的操作，得手动注入ChangeDetectorRef，调用detectChanges()或者markForCheck()来触发变更检测。

• 用虚拟滚动减少DOM渲染量
  如果你的网格有几十甚至上百个单元格，Angular一次性渲染所有DOM元素的开销会非常大。试试Angular CDK的虚拟滚动组件CdkVirtualScrollViewport，它只会渲染当前视口内的单元格，滚动时动态加载/销毁超出视口的内容，能直接把DOM元素数量降到个位数，性能提升立竿见影。
  大致的使用方式参考：

  <cdk-virtual-scroll-viewport itemSize="50">
    <div *cdkVirtualFor="let cell of cellList" class="grid-cell">
      <app-grid-cell [cellData]="cell"></app-grid-cell>
    </div>
  </cdk-virtual-scroll-viewport>
  

• 优化拖拽状态判断逻辑
  每次拖拽事件触发时的状态判断如果太复杂，也会拖慢响应速度。可以试试这两个小技巧：

  • 提前缓存判断条件：比如把拖拽对象的类型、权限等信息提前计算好，存起来，避免每次事件触发都重复计算；
  • 节流/防抖处理高频事件：dragenter这类事件触发频率极高，用节流（比如每隔100ms才执行一次逻辑）能减少不必要的计算。用lodash的throttle很方便，或者自己写个简单的实现：

  import { throttle } from 'lodash';
  
  private throttledHandleDragEnter: (event: DragEvent) => void;
  
  ngOnInit() {
    // 节流处理，100ms内只执行一次
    this.throttledHandleDragEnter = throttle(this.handleDragEnter.bind(this), 100);
  }
  
  @HostListener('dragenter', ['$event'])
  onDragEnter(event: DragEvent) {
    this.throttledHandleDragEnter(event);
  }
  

• 用CSS类控制样式，避免直接操作DOM
  切换边框样式这类操作，别直接去改DOM的style属性，尽量用CSS类来控制。比如定义.drag-allowed（绿色边框）和.drag-disallowed（禁用样式），通过Angular的[ngClass]来切换，这样不仅代码更简洁，还能减少浏览器的重排重绘，性能更好。
  示例：

  <div class="grid-cell" [ngClass]="{ 'drag-allowed': isDropAllowed, 'drag-disallowed': !isDropAllowed }">
    <!-- 单元格内容 -->
  </div>
  

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