升级Angular13后swimlane/ngx-datatable大数据卡顿如何解决

• 你通过overrides强制全局升级rxjs到7.4.0属于跨大版本断层升级，rxjs7对内部调度逻辑做了破坏性改动：原本rxjs6里防抖、节流、事件监听类操作符默认的调度策略，在rxjs7里调整了微任务触发时机，会直接导致Angular的NgZone反复触发全量变更检测。ngx-datatable加载大量数据时本身就会跑高频的虚拟滚动计算、行高测量、滚动事件监听逻辑，多出来的几十上百次没必要的变更检测循环，直接就会导致渲染卡顿。
• 你项目里用的ngx-datatable如果是v20以下的版本，本身是完全适配rxjs6的，没有做rxjs7的兼容。组件内部写的fromEvent绑定滚动事件、debounceTime做滚动防抖的逻辑，在rxjs7下因为调度器默认参数变更，防抖直接失效，滚动、渲染相关的事件一秒钟能触发上百次，必然出现明显延迟。
• 全局overrides的方式只会把顶层的rxjs版本换掉，项目里其他依赖如果带了rxjs6的内联代码，运行时会同时跑两套rxjs的逻辑，事件传递的时候多了很多没必要的上下文转换开销，进一步拖慢性能。

按优先级从高到低排：

• 首选用兼容层方案，改动最小见效最快：先删掉package.json里那段rxjs的overrides配置，直接安装和rxjs7版本匹配的兼容包，执行命令npm install rxjs-compat@7.4.0就行。这个包是rxjs官方出的6版本兼容层，会把rxjs6的API、调度逻辑全量补全，既满足Angular13对rxjs最低版本的要求，又能让老版本ngx-datatable按照原来的逻辑跑，不会出现防抖失效、多余变更检测的问题，装完直接重启项目就能解决卡顿。
• 如果你本来就计划升级组件库，可以直接把@swimlane/ngx-datatable升到20.1.0及以上的版本，这个版本开始官方正式适配Angular13和rxjs7，组件内部已经把rxjs7下调度器参数不对的问题修了，升级完不用额外改rxjs相关的配置，注意核对下组件的输入输出属性，大版本升级有少量API调整，改下对应业务代码就行。
• 要是暂时动不了依赖版本，可以先做临时优化：首先给用到ngx-datatable的组件开启OnPush变更检测，在组件装饰器里加changeDetection: ChangeDetectionStrategy.OnPush，然后给ngx-datatable标签加[trackByProp]属性，绑定你数据列表里的唯一主键（比如id），减少DOM重绘的范围。要是还卡，就把项目里所有和表格滚动、筛选、排序相关的rxjs操作符手动指定异步调度器，比如debounceTime(150, asyncScheduler)，强制把高频事件收束，不过这种方案要改的业务代码多，不如前两个方案省心。

提醒：Angular项目里别随便用overrides强制改rxjs、zone.js这类核心依赖的大版本，跨大版本升级一定要跟着官方升级指南走，不然很容易出这种表面能跑、实际性能拉胯的隐性问题。

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