Chrome Memory footprint creeps to 3.554 GB though JS heap memory is at 20 MB

My application consists of a table that receives and displays live data for long periods of time and hence continuously creates and destroys table rows in the DOM.

What I have noticed is that there is a creep in memory consumed by the application. Though the heap memory rose from 8.6 MB to 20 MB, the browser's memory footprint on Chrome Task manager (or Committed bytes on Windows Performance Monitor) increased to 3.55 GB and keeps moving up gradually. This is ultimately leading to a browser crash.

From the heap I see that the % of Strings kept rising and went up to 49%. Beyond that, I wasn't able to create a heap dump, possibly due to the large memory footprint.

Question: Should I try still try to optimize the Heap? I could not understand why the browser would need to commit 3 GB+ when the Heap is only 20 MB in size and ultimately crash.

I had cleared some previous leaks by setting references to null and optimizing closures from arrow functions. But the browser footprint seems huge in comparison with the heap size. That makes me wonder if I am going in the right direction.

Seeing this in both Edge and Chrome browsers.

When I see "continuously creates and destroys table rows in the DOM", I thought of detached DOM tree memory leaks.

A DOM node can only be garbage collected when there are no references to it from either the page's DOM tree or JavaScript code. A node is said to be "detached" when it's removed from the DOM tree but some JavaScript still references it. Detached DOM nodes are a common cause of memory leaks.

I suggest you can follow the steps in Discover detached DOM tree memory leaks with Heap Snapshots of this doc to debug the issue.