afcapel · December 16, 2022 16:55
diff --git a/index.html b/index.html
 <!doctype html>
 <html>

 <head>
  <meta charset="utf-8">
  <title>Slow document.body.cloneNode(true) in Chrome</title>
 <body>
  <div id="container"></div>

  <script type="text/javascript">
    let container = document.getElementById("container")
    const cloneBody = () => {
      const start = new Date().getTime()
      console.log("Cloning...")
      document.body.cloneNode(true)

      const elapsed = new Date().getTime() - start
      console.log(`Cloned in ${elapsed}ms`)
    }

    for (let i =0; i < 10000; i++) {
      container.insertAdjacentHTML("beforeend", `
        <div>
          <form method="post" class="test"></form>
          <button onclick="cloneBody()">Clone body</button>
        </div>`)
    }
  </script>
 </body>
 </html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Slow document.body.cloneNode(true) in Chrome</title>
	<body>
	<div id="container"></div>

	<script type="text/javascript">
	let container = document.getElementById("container")
	const cloneBody = () => {
	const start = new Date().getTime()
	console.log("Cloning...")
	document.body.cloneNode(true)

	const elapsed = new Date().getTime() - start
	console.log(`Cloned in ${elapsed}ms`)
	}

	for (let i =0; i < 10000; i++) {
	container.insertAdjacentHTML("beforeend", `
	<div>
	<form method="post" class="test"></form>
	<button onclick="cloneBody()">Clone body</button>
	</div>`)
	}
	</script>
	</body>
	</html>