Angular2+Primeng 4.1.1数据表格在IE11中加载性能过慢求助

我之前也碰到过类似PrimeNG表格在IE11里的性能瓶颈，给你几个针对性的解决方案试试：

• 启用虚拟滚动（Virtual Scrolling）
  PrimeNG 4.1.1的DataTable支持虚拟滚动特性，它只会渲染当前视口内的行，而非一次性渲染全部120条数据，能大幅减少IE11需要处理的DOM元素数量。你可以这样配置：

  <p-dataTable 
    [value]="yourDataList" 
    scrollable="true" 
    scrollHeight="500px" 
    [virtualScroll]="true" 
    [rows]="20">
    <!-- 你的列定义 -->
  </p-dataTable>
  

  其中rows设置单次渲染的行数，scrollHeight固定表格高度来触发虚拟滚动逻辑。

• 切换Angular组件的变更检测策略为OnPush
  IE11对Angular默认的变更检测逻辑处理效率很低，频繁的状态检查会占用大量CPU资源。把组件的变更检测改成OnPush，只有当输入属性变化或手动触发时才执行检测：

  import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'your-table-component',
    templateUrl: './your-table.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class YourTableComponent {
    // 组件业务逻辑
  }
  

• 提前处理模板中的复杂计算
  IE11对模板内的复杂表达式、自定义管道支持很差，尽量把这些计算逻辑移到组件内部完成。比如不要在模板里写{{ item.amount | customCurrencyPipe }}，而是在组件中提前计算好item.formattedAmount，再直接绑定到模板上。

• 优化数据赋值方式
  避免多次触发变更检测：不要通过push方法逐条添加数据，而是一次性把处理好的完整数据赋值给表格的value属性，同时可以把数据转为不可变对象，让Angular的变更检测更高效：

  // 不推荐的写法（逐条添加会多次触发检测）
  this.yourDataList = [];
  this.dataService.fetchData().subscribe(data => {
    data.forEach(item => this.yourDataList.push(item));
  });
  
  // 推荐的写法（一次性赋值）
  this.dataService.fetchData().subscribe(data => {
    const immutableData = Object.freeze([...data]);
    this.yourDataList = immutableData;
  });
  

• 尝试升级PrimeNG补丁版本
  PrimeNG 4.1.1属于较旧的版本，可能存在IE11专属的性能bug。你可以尝试升级到4.x系列的最新稳定版（比如4.3.0），新版本通常会修复一些兼容性和性能问题，升级前记得做好测试避免引入新问题。

额外小技巧：打开IE11的开发者工具（F12），切换到「性能」标签录制加载过程，能直观看到是DOM渲染耗时久还是JavaScript执行慢，帮你精准定位问题。

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