Run results for: Creating multiple elements with differences in content

For similar but not identical elements, is there any significant gain from cloning a base element or not? Micro benchmarking, for when many thousands are created at once.

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35

Browser: Chrome 107

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Create new element from scratch	765049.7 Ops/sec
Clone element and change	658572.5 Ops/sec
Clone template content and change	637201.1 Ops/sec
Clone template and use its content	526825.2 Ops/sec

Script Preparation code:

window.BaseLinkElement = document.createElement('a');
BaseLinkElement.target = "_blank";

window.LinkTemplate = document.createElement('template');
LinkTemplate.innerHTML = "<a target='_blank'></a>";

Tests:

Create new element from scratch
let a = document.createElement('a'); a.href = "my_custom_link"; a.textContent = "my_custom_text";
Clone element and change
let a = window.BaseLinkElement.cloneNode(true); a.href = "my_custom_link"; a.textContent = "my_custom_text";
Clone template content and change
let a = window.LinkTemplate.content.cloneNode(true); a.href = "my_custom_link"; a.textContent = "my_custom_text";
Clone template and use its content
let a = window.LinkTemplate.cloneNode(true).content; a.href = "my_custom_link"; a.textContent = "my_custom_text";

Run results for: Creating multiple elements with differences in content

For similar but not identical elements, is there any significant gain from cloning a base element or not? Micro benchmarking, for when many thousands are created at once.

Create new element from scratch

Clone element and change

Clone template content and change

Clone template and use its content