Lit-html: Garbage Collection and DOM Referencing

[pmkroeker]

First off, really enjoying this library!
I've been using this for templating within js modules for a SPA, and have noticed that going between modules, which causes re-rendering of certain nodes, the Chrome DevTools show my DOM nodes slowly increasing.

Pseudo-code for hopefully more insight:

import {html, render} from 'lit-html';
//file 1
const template = html`<div id='div1'>/*more divs here*/<div>`;
render(template, document.body);
//file 2
const template = html`<div id='div2>/*more divs here*/<div>`;
render(template, document.body);

Is there a possibility that upon removing DOM nodes that there is a reference that still exists causing nodes to not be garbage collected?

[pmkroeker]

Closed as I figured out what the underlying issue was.

[justinfagnani]

Interesting. I don't think we hold cycles between the DOM and lit internal data structures, but it's something to be careful of. What was your issue, if you can share?

[pmkroeker]

I'm actually going to reopen this, I was doing more testing late Friday and I don't think I actually fixed it. I'll give as detailed a summary as I can, and I'll try and get a demo up for testing as well.

Basically we are creating a SPA data visualization dashboard, and we moved to using lit-html to do our templating for us as we didn't feel the need for a heavier framework. So each 'screen' is broken up into modules for maintainability. DOM wise, the modules are housed in a wrapper div called #body-outer.

Now during each modules init, they create their respective DOM structure and render it to #body-outer
render(html'<div structure>', document.getElementById('body-outer')). It seems as though if each just does this on init, chrome DevTools shows DOM nodes increasing as you flip between the modules.

What I thought had fixed the problem was making sure that I had removed all event listeners between modules but that didn't seem to be enough with more testing. My current fix is to remove all the nodes inside #body-outer before the next module renders into it

If I can be more specific in any way please let me know! I'll continue to look at things on my end to make sure I haven't introduced some leaks on my end.

[pmkroeker]

Here is a testing environment that I set up that I believe shows the issue. If you open up the DevTools and use the performance monitor, you can see the nodes rise and you press the buttons.

[justinfagnani]

@pmkroeker I'm not seeing a memory leak here.

In your test you're calling render with a different template for each button. If you alternate clicks on the buttons then you will tear down and recreate the DOM for each template each time - render() does not cache previously rendered DOM. This will create new nodes, so the node count does increase, but I see it drop after a GC, so the nodes aren't being retained.

I'm going to close this for now, but please reopen if you think you're seeing a memory leak somewhere else.