Skip to content

Instantly share code, notes, and snippets.

@afcapel

afcapel/slow.html

Last active February 9, 2023 13:26
Show Gist options
  • Save afcapel/4561e44ba2a9d16da00bc9b45598e97d to your computer and use it in GitHub Desktop.
Save afcapel/4561e44ba2a9d16da00bc9b45598e97d to your computer and use it in GitHub Desktop.
Download ZIP
Slow document body clone in Chrome
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment