image' domNode creates memory leak in FF

Question

I am having a memory leak in a web application in Firefox.

After analyzing the memory with the FF built-in features it turns out that it's the 'image' inside of the domNode that produces orphan-nodes. It keeps growing together with the orphan nodes.

What is this 'image'? Are they real images displayed in the web page?

My application contains several <img/> tags that are updated periodically from a GIS server. Do you think they are related?

Is there a way to inspect the content of this 'image'?

Answer 1

You have a really good reference to work with. You can see how it works by inspecting the code.

The reference has a ul inside a ul which is set to display:none and changes it to block on hover.

Here's a simple demo where the list expands on click.

const expand = () => {
    const list = document.querySelector('.innerList');
  list.classList.toggle('show');
}

li {
  list-style: none;
}

.innerList {
  padding: 0;
  display: none;
}

.show {
  display: block
}

<ul>
  <li>one</li>
  <li>one</li>
  <li>
    one
    <button class='btn' onclick="expand()">+</button>
    <ul class='innerList'>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
  </li>
  <li>one</li>
  <li>one</li>
</ul>