afcapel/slow.html

## slow.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Slow clone body Test</title>
</head>
<body>
  <div id="container">
    <button id="cloneBodyBtn">Clone body</button>
  </div>

  <script type="module">
    const forms = {}
    const container = document.getElementById("container")

    for (let i = 0; i < 10000; i++) {
      container.insertAdjacentHTML("beforeend", `
        <form id="form-${i}">
          <p>Form ${i}</p>
        </form>`)

      const form = document.getElementById(`form-${i}`)

      // This assignment is triggering the slow behaviour
      forms[form.id] = form
    }

    container.insertAdjacentHTML("afterbegin", `<h1>Page with ${Object.keys(forms).length} forms</h1`)

    document.getElementById("cloneBodyBtn").addEventListener("click", () => {
      console.profile("Cloning body...")
      document.body.cloneNode(true)
      console.profileEnd("Cloning body...")
    })

    console.log("READY")
    console.log(forms)
  </script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Slow clone body Test</title>
	</head>
	<body>
	<div id="container">
	<button id="cloneBodyBtn">Clone body</button>
	</div>

	<script type="module">
	const forms = {}
	const container = document.getElementById("container")

	for (let i = 0; i < 10000; i++) {
	container.insertAdjacentHTML("beforeend", `
	<form id="form-${i}">
	<p>Form ${i}</p>
	</form>`)

	const form = document.getElementById(`form-${i}`)

	// This assignment is triggering the slow behaviour
	forms[form.id] = form
	}

	container.insertAdjacentHTML("afterbegin", `<h1>Page with ${Object.keys(forms).length} forms</h1`)

	document.getElementById("cloneBodyBtn").addEventListener("click", () => {
	console.profile("Cloning body...")
	document.body.cloneNode(true)
	console.profileEnd("Cloning body...")
	})

	console.log("READY")
	console.log(forms)
	</script>
	</body>
	</html>