The memory leaks are very hard to find. And if you faced with that problem you can start with analyzing event listeners.
So that very easy you just need to store all HTML elements on the page and make a snapshot of events using a
After that, you can manipulate with DOM and make a snapshot again and compare with previous
// Store all elements on page allElements = [...document.querySelectorAll('*')] // Then make a snapshot of all listeners allElements.map(el => [el, ...Object.keys(getEventListeners(el))]).filter((e) => e); // After that, make some manipulations on page // Finally print a snapshot and analyze it allElements.map(el => [el, ...Object.keys(getEventListeners(el))]).filter((e) => e);
I the next example I will hide one cat picture and check that
wheel events will be removed:
if you have any question I am glad to discuss them in the comments!
Top comments (0)