Angular 12应用Detached HTMLElements内存泄漏问题排查求助

• 你看到的大量Detached HTMLElement，本质是已经从页面DOM树中移除，但仍然被JavaScript代码持有引用的DOM节点，这类节点无法被垃圾回收机制清理，运行时间越长堆积越多，内存占用持续上涨，自然会导致交互越来越卡顿。
• 引用链最终锚定到Angular核心的LView（即Angular内部维护的视图实例对象），说明这些游离DOM是被未正常销毁的Angular视图持有引用，链路里出现的cleanup、elementStart标记，指向视图销毁阶段的清理逻辑没有执行完整，要么是业务代码漏了清理操作，要么是销毁流程被异常打断。
• 这类全链路都是Angular核心方法引用的情况非常普遍，基本不是Angular框架本身的bug，绝大多数场景是业务代码残留的引用把整个视图实例吊住，导致框架内置的清理逻辑无法正常执行。

• 先做范围收敛：先在测试环境把所有非必要的第三方组件、自定义指令临时关掉，反复执行页面跳转、组件显隐的操作（比如连续进出某业务页面10次），再看detached元素的数量是否还持续线性上涨，先把第三方库引入泄漏的可能性排除。
• 逐类排查业务代码里的高频泄漏点，所有这类问题的核心原因都是组件销毁时没清掉外部引用：
  • 所有RxJS订阅：包括接口请求、路由事件、自定义Subject/BehaviorSubject的订阅，必须在ngOnDestroy生命周期里取消订阅，没取消的订阅会一直持有组件实例上下文，连带把组件关联的所有DOM都吊住无法回收。
  • 手动绑定的全局事件：如果在组件初始化阶段给window、document或者其他跨组件的DOM节点绑了scroll、resize、自定义事件，销毁时必须调用removeEventListener解绑。
  • 手动DOM操作：如果用ViewChild、ViewChildren获取了DOM节点，又把这些节点存到了全局变量、单例服务这类不会随着组件销毁的容器里，组件销毁时必须手动清空这些引用。
  • 定时器与动画：setTimeout、setInterval、手动触发的Web Animation，销毁时必须调用对应方法终止，不要等定时器自己跑完。
• 针对Angular v12版本的专项排查点：
  • 检查项目里的动态组件创建逻辑：如果是用ComponentFactoryResolver手动创建的动态组件，销毁时必须手动调用组件ref的destroy()方法，v12版本里漏调这个方法会直接导致整个关联的LView无法回收，是这个版本最高发的内存泄漏原因。
  • 安装Angular DevTools，打开Profiler功能，录制一段组件反复创建销毁的操作，看对应组件的实例计数，销毁后计数没降的那个组件就是问题点，直接去对应组件代码里查清理逻辑就行，比在内存快照里翻链路效率高很多。
• 定位具体代码行的小技巧：如果内存快照的引用链里全是Angular核心包的标记，找不到业务代码的位置，可以在每次操作完手动触发垃圾回收（Edge内存面板里有专门的垃圾桶按钮），拍两次堆快照做对比，看新增的detached元素上的自定义属性、class名，很容易匹配到对应的业务组件。

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