Benchmark: Creating multiple elements with differences in content

Creating multiple elements with differences in content (version: 0)

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.

Comparing performance of: Create new element from scratch vs Clone element and change vs Clone template content and change vs Clone template and use its content

Created: 3 years ago by: Registered User

Jump to the latest result

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";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create new element from scratch
Clone element and change
Clone template content and change
Clone template and use its content

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks: