Mantengo una aplicación Vue.js SPA que usa GSAP para hacer animaciones en la aplicación web. Parecía que ocurrían pérdidas de memoria al usar animaciones, así que hice un perfil de memoria y obtuve el siguiente resultado:

Comprenda que no puedo cargar códigos específicos completos y, en cambio, me gustaría hacer una pregunta sobre la forma en que se interpreta la línea de tiempo de asignación de memoria de Chrome.

1. ¿Qué significabound_this bound_this in native_bind() en esa pila de retención?
2. Entendí que los retenedores significan los objetos que GC no pudo desasignar debido a las referencias dejadas en algún lugar, ¿es correcto?
3. Si la declaración en la pregunta 2 es correcta, ¿está disponible para identificar la causa de la pérdida de memoria en la pila de retención anterior? O, si eso es imposible o difícil, ¿al menos podemos especular? Si podemos especularlo, entonces, ¿cuál es la razón o la razón para eso?
4. (Opcional) En el código, el componente window.toast Vue está animado por GSAP Tween, y después de que termine la animación, GSAP terminará la animación ( kill() ) y el toast permanecerá en el DOM. El objeto GSAP Tween se almacena en los data del componente Vue, se maneja para controlar el propósito de la animación, y después de que la animación finaliza, ese objeto de animación se asignará como null para que pueda ser recolectado como basura. Pero, parece que incluso después de una cantidad de tiempo suficiente, ese objeto de animación no se elimina de acuerdo con el resultado anterior. Parece que esto también causa muchos HTMLDivElement separados , lo que conduce a pérdidas de memoria. Creo que evité por completo la pérdida de memoria al eliminar referencias (asignar null ), ¿significa esto que me estoy perdiendo algo? O, ¿hay un problema de rendimiento con GSAP y hay un error de que los objetos de animación en la línea de global timeline no se limpian?

Por favor, dame cualquier conjetura o consejo, incluso si no es una respuesta precisa. Estoy tan frustrado con este problema últimamente.