`cleanUpElement()` slow on large pages (Chrome)

[jonnyarnold]

Hi!

We've just recenlty started using HTMX on some large HTML pages (20 MB+) and started running into some performance issues when swapping large DOM trees out.

When swapping out a large DOM tree, the browser hangs for several seconds after receiving the request. Debugging with Chrome DevTools, the culprit appears to be cleanUpElement(): when we remove it, the hang disappears.

Looking at the code, it seems that iterating through all the element's children is slow. This loop has an // IE comment attached to it, suggesting that it may not be needed for Chrome?

I don't know enough about the internals of HTMX to understand whether simply removing cleanUpElement() is possible, but it worked for us so I thought I'd share!

[1cg]

We need to recursively clean up event listeners that have been wired in by htmx when we remove content.

Perf could be improved here by a recursive "requiresCleanup" boolean being added to elements and their parents when a cleanup-requiring DOM mutation is required, but that would be a fair bit of complexity. I'll have to think about it more.

Another option would be to overload the hx-disable attribute:

https://htmx.org/attributes/hx-disable/

We could use that to cut off the recursion, as long as there are large chunks of that content that are actually not using htmx.

[lpil]

Hello!

My understanding is that modern browsers will garbage collect the event listeners after nodes are detached from the DOM, so unless you need to support older versions of IE you do not need to remove the event listeners manually. I don't have a good technical source for this but here's the React team saying they do not remove event listeners: https://github.com/facebook/react/issues/12947#issuecomment-393727796

With this would it be possible to alter this code to leave it up to the browser? Or is there some other limitation?

Thank you

[fonol]

Hi, just wanted to ask what the status on this is? I also noticed a performance issue in the cleanUpElement function. Sometimes we need swap out a pretty large chunk of HTML, and the browser spends up to ~500ms in this function, causing a noticeable lag.

[alexbezhan]

I second this. Swap takes 800ms on the page. Commented out recursive cleanup