Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

Memory leaks - nullifying DOM elements with event handlers attached is not sufficient #184

Open Jemt opened 1 year ago

Jemt commented 1 year ago

Fit.UI relies on the browser's Garbage Collector to reclaim memory - we do that by nullifying all variables within a control. But to my surprise this does not guarantee that the browser cleans up event handlers registered on DOM elements. Chrome reports these handlers as detached:

image

Clicking the highlighted link takes us to: https://github.com/Jemt/Fit.UI/blob/55e08fecf604853998b41261f0883d22f410e80f/Controls/Input/Input.js#L111

Other event handlers within Fit.Controls.Input has also been marked as the cause of retained references.

We need to find all event handlers and make sure they are removed when Dispose() is called. It works - it has been tested with the following event handlers in the Input control: input.onkeyup, input.onchange, and "paste" on me.GetDomElement().

Search for (regex): [a-zA-Z0-9].on.+ = Search for: Fit.Events.AddHandler( Search for: addEventListener( Search for: attachEvent(

Perform not only these searches in Fit.UI but also all projects built on Fit.UI. With every single match we must ensure registered event handlers are removed when a component is disposed.

Also see #155 and #172

FlowIT-JIT commented 11 months ago

These lines keep a reference to controls even when disposed, which should be avoided, even though they are internally destroyed. Consider using a string reference instead such as me.GetId().

https://github.com/Jemt/Fit.UI/blob/1fb468230e1313df1b33a57264c348bfd35682a3/Controls/ContextMenu/ContextMenu.js#L654

https://github.com/Jemt/Fit.UI/blob/1fb468230e1313df1b33a57264c348bfd35682a3/Controls/Input/Input.js#L2770

https://github.com/Jemt/Fit.UI/blob/1fb468230e1313df1b33a57264c348bfd35682a3/Controls/Input/Input.js#L3162