Turbo router & performance | Memory Heap Snapshots

Questions
#1

Hi,

I have a question regarding the memory usage in frontend. I’m yet not very advanced in this topic but here what we’ve noticed.

While doing the Memory Heap snapshots of the website with Turbo router, we’ve noticed the gradual increase of the memory. +5 MB on each page load.

This might be due to our code as well and we will perform more tests double checking all resets and disconnects. GPT says it is common increase and we should try to browse 50+ pages. We did that with 50+ page openings, and the momory became ~125MB, GPT said Garbage Collector should generaly start to collect it, but it seems doesn’t. We never seen decrease.

image
image826×1250 101 KB

Should we worry about it or not ?
Thanks in advance for your advices and thoughts.

#2

Hi @mrmax

Yes, this is caused by JavaScript leaving references to DOM elements with event handlers.

Why it’s important to release the memory, DOM references and event handlers

A typical JavaScript control class instance consists of the following parts:

  1. JavaScript object representing the control.
  2. A reference to the corresponding DOM element. Usually it’s the control’s root element containing a tree with the control HTML markup.
  3. A number of event handlers to handle user’s interaction with the control.

If any of that components are not released we have these problems:

  1. Non-released JavaScript objects increase the memory footprint. The more memory the application uses, the slower it works. Eventually it could result in a crashed tab or entire browser.
  2. Non-released references to DOM elements could result in detached DOM trees. That, in turn, could result in thousands of invisible DOM elements living in a page, increasing the memory footprint and making the application less responsive.
  3. Unbound event handlers usually result in non-released DOM elements, which is bad by itself, and also in the code which executes when the user interacts with the application and which should not be executed. That affects the performance.

Hot controls solve this by allowing us to unregister events and delete variables stored in memory, when they detach using disconnect().

oc.registerControl('hello', class extends oc.ControlBase {
    connect() {
        // Element has appeared in DOM
    }

    disconnect() {
        // Element was removed from DOM
    }
});

Most libraries are aware of this and will have a destroy() function you can call to clean up the memory footprint. You can also inspect the dev tools to see which DOM nodes are detached.

I hope this helps.

1 Like
#3

@daft thanks for the quick responce, appreciate it!

Yes, we are very much aware of removing event listeners and firing the destroy’s() on disconnect, however I just commented all custom code I have on one of the projects, leaving only the @framework.bundle and the memory keeps increasing the same way, gradually increases by 2 mb on every turbo page visit. Again, not sure what GC does / how and then releases memory.

One’s again, the websites are working flawlessly, performance is at top, I just woried about absolute perfections :100:

#4

This might suggest memory leaks in the AJAX framework itself. We are working on v2 of this, so we will make a note to do a GC audit on it.

2 Likes