Angular+PrimeNG中按Esc键致页面卡顿2秒的问题求助

问题根源 #

PrimeNG的p-table组件在监听Esc键时，若开启了单元格编辑、行选择等交互功能，会遍历所有表格行执行状态检查或重置操作——200行数据的情况下，大量DOM遍历和变更检测会直接导致卡顿。

无需自定义全局Esc服务的解决方案 #

• 局部阻止表格的Esc事件冒泡
  不要全局拦截Esc，只在那个200行的表格上阻止事件冒泡，这样既避免表格的低效遍历，又不影响对话框、浮层等组件的默认Esc行为：

  <p-table [value]="largeDataset" (keydown.escape)="$event.stopPropagation()">
    <!-- 表格列配置 -->
  </p-table>
  

• 优化PrimeNG表格的渲染与交互配置

  1. 给表格配置rowTrackBy，减少不必要的DOM重渲染：

     trackByRowId(index: number, item: any): any {
       return item.id; // 用数据唯一标识作为trackBy依据
     }
     

     模板中绑定：[rowTrackBy]="trackByRowId"
  2. 若未用到表格的编辑功能，关闭editable、cellEdit等相关属性，避免Esc触发额外的编辑状态重置逻辑。

• 升级PrimeNG版本
  部分旧版本的p-table存在键盘事件处理的性能缺陷，升级到最新稳定版（比如15.x及以上），官方可能已修复此类遍历导致的卡顿问题。

• 排查自定义指令/管道的影响
  检查表格行、列上的自定义指令或管道，确认是否在Esc触发时触发了大量重复计算。比如某些未做缓存的格式化管道，会在变更检测时为200行数据重复执行计算，叠加耗时。

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