Skip to content

Instantly share code, notes, and snippets.

@julik

julik/replicate.html

Created February 22, 2025 19:50
Show Gist options
  • Save julik/90217b32f5e6eb8c95cdf314631a898e to your computer and use it in GitHub Desktop.
Save julik/90217b32f5e6eb8c95cdf314631a898e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
replicate.html
<!DOCTYPE html>
<html>
<head>
<style>
.outlinerounded {
width: 1px; height: 1px; overflow: hidden; border: 1px solid gray;
}
</style>
</head>
<body>
<template id="ist">
<div style="width: 1px; height: 1px; overflow: hidden; border: 1px solid gray;">inline</div>
</template>
<template id="cst">
<div class="outlinerounded">classy</div>
</template>
<div id="cnt1"></div>
<div id="cnt2"></div>
<script>
function replicate(template, intoContainer, n) {
const ts = performance.now();
[...Array(n)].forEach(() => {
const node = template.content.cloneNode(true);
container1.appendChild(node);
});
console.debug(performance.now() - ts);
}
const templateWithInline = document.querySelector("#ist");
const templateWithClass = document.querySelector("#cst");
const container1 = document.querySelector("#cnt1");
const container2 = document.querySelector("#cnt2");
const nNodes = 32000;
setTimeout(() => {
replicate(templateWithInline, container1, nNodes);
setTimeout(() => {
replicate(templateWithClass, container2, nNodes);
}, 150);
}, 150);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment