如何修复 IntersectObserver 导致我的 OpenLayers Web 应用程序内存泄漏？

Question

所以我正在开发一个名为 MSC AniMet 的 Web 应用程序。该应用程序使用 Vue2 和 Vuetify2 进行编码，它本质上是一个大型 OpenLayers 地图，添加了一堆内容和功能，并可与 WMS 图层一起使用。

我最近进行了更新，因此只要有新信息可用，添加的图层就会刷新，以便您始终拥有包含最新信息的天气图层，因此您可以将该应用程序用作仪表板。它似乎工作正常，直到运行 3 天后，仪表板 chrome 崩溃并显示内存不足。

经过一番调查，我发现使用 chrome devtools 的罪魁祸首似乎是 IntersectObserver，它以惊人的速度占用越来越多的内存。这是间隔 15 分钟拍摄的 2 张快照：

问题是我没有在代码中使用 IntersectObserver，所以我不知道是什么原因造成的。我有一种感觉它来自 OpenLayers，但这只是我的猜测，因为我正在使用哪些库：

├── @mdi/[email protected]
├── @mdi/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

这是该网站的永久链接，用于重现示例： https://eccc-msc.github.io/msc-animet/?layers=RADAR_1KM_RRAI%3B0.75%3B0%3B1%3B0%3B1,RADAR_1KM_RSNO%3B0.75%3B0%3B1%3B0%3B0,RADAR_COVERAGE_RRAI% 3B0.75%3B0%3B1%3B0%3B0&范围=-19416707,2902733,-620801,11820999

在时间控制器中，播放按钮上方有一个小齿轮图标，您可以在其中将动画设置为循环，然后只需按播放按钮即可。如果您检查内存使用情况，您会发现 IntersectObserver 随着时间的推移而逐渐增加。

我将放 github 链接来展示循环在代码中的作用以及调用的内容：

1. “播放”按钮触发 https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/AnimationControls/PlayPauseControls.vue#L84，然后调用 https://github .com/ECCC-MSC/msc-animet/blob/main/src/components/Time/AnimationControls/PlayPauseControls.vue#L131 启动动画
2. “播放”按钮会增加 DateIndex，从而触发此观察程序：https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L388
3. 这会调用此方法：https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L183，然后在此处更新层的 TIME 参数 https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L378
4. 最后，该方法等待地图的 rendercomplete 事件并抛出事件 https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L248，其中再次被步骤 2 捕获，该步骤再次增加 DateIndex，这就是整个循环。

我尝试将 openlayers 升级到最新版本（9.1），但它没有改变任何内容（除了另一个不相关的重大更改，这就是我目前坚持使用 6.15.1 的原因）。我还尝试注释掉许多导入，例如 h264-mp4-encoder，但它并没有影响 Intersect 问题。

Answer 1

在查看了我正在使用的库并查看了哪些库包含 IntersectionObserver 后，我发现 vuetify 的 v-progress-linear 正在使用它。当加载图层时，我的代码中使用了此组件：当加载图层时，我增加了一个名为

loading

的标志，当加载图层时，我减少了它。当标志高于 0 时，就会出现 v-progress-linear，并且由于某种原因，它使用了 IntersectionObserver，最终占用了越来越多的内存。由于我处于一个总是加载新时间步的循环中，因此该加载栏将始终处于活动状态。我已经在我的分支中删除了这个组件，问题确实消失了。