如何解释 Chrome 内存分析结果、内存分配时间线 - GSAP Tween 内存泄漏

Question

我正在维护一个 Vue.js SPA 应用程序，它使用 GSAP 在 web 应用程序中制作动画。似乎在使用动画时发生了内存泄漏，所以我做了内存分析，结果如下：

请理解我无法上传完整的特定代码，而是想问一个关于如何解释 Chrome 内存分配时间线的问题。

1. bound_this in native_bind() 在该保持器堆栈中是什么意思？
2. 我理解为Retainers是指由于引用留在某处而无法被GC释放的对象，这是正确的吗？
3. 如果问题2中的陈述是正确的，那么是否可以确定上面的保持器堆栈中内存泄漏的原因？或者，如果这不可能或很难，那么至少我们可以推测吗？如果我们可以推测，那么它的基本原理或理由是什么？
4. （可选）在代码中，window.toast Vue 组件由 GSAP Tween 进行动画处理，在动画终止后，GSAP 将结束动画（kill()），toast 将保留在 DOM 中。 GSAP Tween 对象存储在 Vue 组件的data 中，用于控制动画目的，在动画结束后，动画对象将被分配null 以便进行垃圾回收。但是，根据上面的结果，即使经过足够的时间，动画对象似乎也没有被删除。似乎这也会导致许多 Detached HTMLDivElement，从而导致内存泄漏。我想我通过删除引用（分配null）彻底防止了内存泄漏，这是否意味着我错过了一些东西？或者，GSAP 是否存在性能问题，是否存在 global timeline 中的动画对象未清理的错误？

即使答案不准确，也请给我任何猜测或建议。我最近对这个问题感到非常沮丧。

Answer 1

1. native_bind 是 Function.prototype.bind（在 v8 引擎中）的实际实现，bound_this 是您传递给 bind 的上下文对象
2. 保持器是持有对选定对象的引用并防止其被 GC 的对象。树表示所选对象的 GC 根路径。
3. 如果您正在寻找内存泄漏，您可能应该比较 2 个快照（Summary 在顶部栏下拉）并寻找正 Delta 以查看哪个对象被泄漏。

即使经过足够长的时间，动画对象也不会被移除

4. 可能您有很多可用的堆空间，但它还没有进行 GC（出于性能原因）。您可以使用左上角的回收站图标强制 GC。

您可以从官方文档中阅读一些基础知识（非常容易阅读） https://developer.chrome.com/docs/devtools/memory-problems/memory-101/

互联网上有很多关于这个主题的教程，即1或2。