Morphing page with a lot (1000 or so) FORM tags is slow

[hubertlepicki]

I have originally thought the issue is related to Phoenix LiveView, but I was able to reproduce the issue with morphdom (2.6.1)

The issue on LiveView:
phoenixframework/phoenix_live_view#2137

Context:

I have a LiveView app that renders hundreds of rows of data, and each row has a "checkbox" to select given row. Each checkbox is wrapped in a <form> tag, and when checked updates some counter in LiveView and the page is being rendered. LiveView uses then morphdom to reconstitute the page.

This works great but I have hundreds, if not thousands of rows displayed at the same time. When done so, client reported the checkboxes / page updates become slow.

I spent some time debugging it and after first suspecting LiveView (as above), I managed to reproduce the issue with pure morphdom.

In the video below you can see that I render a template with 2000 <form> tags, they have no inputs, nothing, just display counter value, and I have a link to update the counter. If <form> tags are used, clicking quickly at the "Increment" counter link, very quickly makes the page rerender slow.

This is not happening if I replace <form> tag with <div> tag.

morphdom.mp4

The code I use is fairly simple, I have a <div id="main"></div> on the HTML and the following JavaScript (please add bunch of form tags at the end):

window.addEventListener('load', (event) => {
  const el = document.getElementById("main")

  window.counter = 0;

  if (el) {
    window.inc = (e) => {
      event.preventDefault()
      window.counter += 1;
      morphdom(el, template());
    }

    morphdom(el, template());

  }
});


template = () => {
 return `<div id="el">${window.counter}<a href="#" onClick="inc()">Increment</a><form>${window.counter}</form><form>${window.counter}</form><form>${window.counter}</form>..... add bunch of forms here...`;
}

The issue is most severe in Chrome and Chromium-based browsers. In Firefox, I cannot see a difference between morphing 2000 <form> or 2000 <div> tags.

Another hint is that, it seems that with each click "Parse HTML" thing is slowing down.
phoenixframework/phoenix_live_view#2137 (comment)