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

Question

我正在维护一个 Vue.js SPA 应用程序，它使用 GSAP 在 Web 应用程序中制作动画。看来是在使用动画时发生了内存泄漏，所以我做了内存分析，得到的结果如下:

请理解，我无法上传完整的具体代码，而是想询问如何解释 Chrome 内存分配时间线的问题。

1. native_bind() 中的 bound_this 在该保留器堆栈中意味着什么？
2. 我的理解是，Retainers 是指由于引用留在某处而无法被 GC 释放的对象，这是正确的吗？
3. 如果问题2的说法正确，那么是否可以确定上述retainer栈内存泄漏的原因？或者，如果这是不可能或困难的，那么至少我们可以推测？如果我们可以推测的话，那么其理由是什么？
4. (可选)代码中，window.toast Vue组件通过GSAP Tween进行动画处理，动画结束后GSAP将结束动画(kill() ) 并且 toast 将保留在 DOM 中。 GSAP Tween 对象存储在 Vue 组件的 data 中，用于控制动画目的，动画终止后该动画对象将被赋值为 null，使其成为垃圾-集。但是，根据上面的结果，即使经过足够的时间，动画对象也没有被删除。看来这也会导致许多分离的 HTMLDivElement，从而导致内存泄漏。我认为我通过删除引用(分配null)彻底防止了内存泄漏，这是否意味着我错过了一些东西？或者，GSAP 是否存在性能问题，以及全局时间线 中的动画对象是否存在未清理的错误？

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

Answer 1

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

even after sufficient amount of time that animation object is not removed

可能您有大量可用堆空间，但尚未进行 GC(出于性能原因)。您可以使用左上角的回收站图标强制GC。

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

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