Source code

Revision control

Other Tools

<!doctype html>
<script src="util.js"></script>
<body>
<script>
const styles = `:host { background: red; width: 100px; height: 100px; display: block; }`.repeat(3000);
const blob = URL.createObjectURL(new Blob([styles], { type: 'text/css' }));
customElements.define("custom-element", class CustomElement extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" });
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = blob;
this.shadowRoot.appendChild(link);
}
});
perf_start();
for (let i = 0; i < 1000; ++i)
document.body.appendChild(document.createElement("custom-element"));
onload = function() {
flush_layout(document.body);
perf_finish();
};
</script>