Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

445
Vistas
How to interpret Chrome memory profiling result, memory allocation timeline - GSAP Tween memory leak

I'm maintaining a Vue.js SPA application which uses GSAP for making animations in the webapp. It seemed that memory leaks happened while using animations, so I did memory profiling and I got the result as below:

Please understand that I cannot upload whole specific codes, and instead I would like to ask a question about the way how to interpret the Chrome memory allocation timeline.

memory_profile

  1. What does bound_this in native_bind() mean in that retainer stack?
  2. I understood as that the Retainers means the objects that could not been deallocated by GC because of the references left somewhere, is this correct?
  3. If the statement in question 2 is correct, then is it available to identify the cause of memory leak in the retainer stack above? Or, if that is impossible or hard, then at least can we speculate? If we can speculate it, then what is rationale or reason for that?
  4. (Optional) In the code, window.toast Vue component is animated by GSAP Tween, and after the animation terminates GSAP will wrap up the animation(kill()) and the toast will remain in the DOM. GSAP Tween object is stored in Vue component's data, it is handled for controlling animation purpose, and after the animation terminates that animation object will be assigned null so that it can be garbage-collected. But, it seems that even after sufficient amount of time that animation object is not removed according to the result above. It seems this also causes many Detached HTMLDivElements, which leads to memory leaks. I think I thoroughly prevented the memory leak by removing references(assigning null), does this mean I'm missing something? Or, is there a performance issue with GSAP and is there a bug that animation objects in global timeline do not get cleaned?

Please give me any guess or advice even if it's not accurate answer. I'm so frustrated with this issue lately.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

  1. native_bind is actual implementation of Function.prototype.bind (in v8 engine) and bound_this is context object that you pass to bind
  2. Retainers are objects that holds reference to selected object and prevent it from GC. Tree represents path to GC root for selected object.
  3. If you looking for memory leak you probably should compare 2 snapshots (Summary drop down at the top bar) and look for positive Delta to see which object are leaked.

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

  1. Probably you have a lot of free heap space and it doesn't GC yet (for performance reasons). You can force GC with recycle bin icon in top left corner.

You can read some basics from official documentation (it's very easy to read) https://developer.chrome.com/docs/devtools/memory-problems/memory-101/

There a lot of tutorials about this topic in the internet i.e. 1 or 2.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda