For apps that run for a long time without being closed, small memory leaks of only a few kilobytes can add up to noticeably degrade performance over time according to a new blog post from Microsoft.
For this reason, the Microsoft Edge team worked together with Microsoft Teams to build the browser's new Detached Elements tool that allows users to investigate and resolve DOM memory leaks.
Although there are valid reasons for detaching elements, DOM memory leaks occur when an application keeps references to more and more detached elements without actually reusing them later. As the code used in applications grows in size and complexity, it becomes easier to make mistakes and forget to clean things up which could unknowingly lead to keeping DOM elements in memory.
This is particularly a problem for long running applications. For instance, if an email client detaches DOM elements every time an email is opened and closed and a user keeps the app running for a whole week, it could amount to really high memory usage and slow down a user's business laptop or workstation over time.
While Microsoft's new Detached Elements tool has been available in Edge Canary since version 93, it will roll out to the stable channel of Microsoft Edge when version 97 of the browser launches this month.
To access this new tool early though, you'll first need to open DevTools in Edge by pressing F12 and click on the gear icon to open the DevTools Settings. From here, navigate to Experiments on the left side of the Settings pane, type in Detached Elements and click on the tool to enable it.