如何修复OpenLayers应用中IntersectionObserver引发的内存泄漏问题

我开发的MSC AniMet是基于Vue2和Vuetify2构建的Web应用，核心是集成多功能的OpenLayers地图，支持WMS图层。近期为将应用用作仪表盘，新增了图层自动刷新功能，确保气象图层始终展示最新数据。应用初期运行正常，但持续运行3天后，Chrome浏览器因内存不足崩溃。

通过Chrome DevTools排查发现，IntersectionObserver的内存占用正以极快速度持续增长，以下是间隔15分钟的两张内存快照：

我的代码中并未直接使用IntersectionObserver，推测问题出自OpenLayers。当前依赖列表如下：

├── @mdi/font@7.3.67
├── @mdi/js@7.1.96
├── @vue/cli-plugin-babel@5.0.8
├── @vue/cli-service@5.0.8
├── axios@0.26.1
├── babel-eslint@10.1.0
├── canvas-txt@3.0.0
├── core-js@3.27.2
├── countries-and-timezones@3.5.1
├── debounce@1.2.1
├── eslint-plugin-vue@6.2.2
├── eslint@6.8.0
├── h264-mp4-encoder@1.0.12
├── luxon@2.5.2
├── node-polyfill-webpack-plugin@2.0.1
├── ol@6.15.1
├── proj4@2.10.0
├── sass-loader@8.0.2
├── sass@1.32.13
├── saxon-js@2.6.0
├── vue-cli-plugin-vuetify@2.5.8
├── vue-i18n@8.28.2
├── vue-router@3.6.5
├── vue-template-compiler@2.7.14
├── vue@2.7.14
├── vuetify-loader@1.9.2
├── vuetify@2.6.14
└── vuex@3.6.2

复现步骤 #

• 打开应用，在时间控制器播放按钮上方的齿轮图标中设置动画循环
• 点击播放按钮，观察Chrome内存占用，会发现IntersectionObserver的内存随时间不断上升

动画循环代码调用流程 #

1. 播放按钮触发动画启动逻辑，调用方法开启动画
2. 播放按钮递增DateIndex，触发监听器
3. 调用更新时间的方法，随后更新图层TIME参数
4. 方法等待地图rendercomplete事件并抛出事件，被步骤2的监听器捕获后再次递增DateIndex，形成循环

已尝试的解决方案 #

• 将OpenLayers升级至9.1版本：问题未解决，还出现了无关的破坏性变更，因此回退至6.15.1版本
• 注释h264-mp4-encoder等依赖的导入：内存泄漏问题无改善

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