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: 2 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:

Run details: (Test run date: 2 years ago)

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/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
Create new element from scratch	697686.6 Ops/sec
Clone element and change	648275.9 Ops/sec
Clone template content and change	687582.2 Ops/sec
Clone template and use its content	538037.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition measures the performance of creating multiple elements with different contents, specifically comparing cloning base elements versus not cloning them.

**Benchmark Definition JSON Explanation**

The benchmark definition JSON provides information about the test:

* `Name` and `Description`: These fields provide context for the test, which is to compare the performance of creating new elements versus cloning existing ones.
* `Script Preparation Code`: This section defines two variables: `BaseLinkElement`, a base anchor element created with `document.createElement('a')`, and `LinkTemplate`, another anchor element created as a template with `document.createElement('template')`. The script sets up these variables to be used in the test.
* `Html Preparation Code`: This field is empty, indicating that no HTML preparation code is needed for this benchmark.

**Individual Test Cases**

The individual test cases measure the performance of creating elements using different approaches:

1. **Create new element from scratch**: This test creates a new anchor element (`let a = document.createElement('a');`) and sets its `href` and `textContent` attributes.
2. **Clone element and change**: This test clones the base link element (`window.BaseLinkElement.cloneNode(true)`) and modifies its `href` and `textContent` attributes.
3. **Clone template content and change**: This test clones the template's content (`window.LinkTemplate.content.cloneNode(true)`) and sets its `href` and `textContent` attributes.
4. **Clone template and use its content**: This test clones the template itself (`window.LinkTemplate.cloneNode(true).content`) and uses it to create a new element with modified `href` and `textContent` attributes.

**Options Compared**

The benchmark compares four options:

1. Creating a new element from scratch (Test Case 1).
2. Cloning an existing element and modifying its attributes (Test Case 2).
3. Cloning the template's content and setting its attributes (Test Case 3).
4. Cloning the template itself and using it to create a new element with modified attributes (Test Case 4).

**Pros and Cons of Each Approach**

Here are some pros and cons for each approach:

1. **Create new element from scratch**:
	* Pros: Fast, simple, no dependencies on existing elements.
	* Cons: May incur additional overhead due to parsing HTML templates.
2. **Clone element and change**: This method is generally faster than creating a new element, but may involve slower attribute updates due to cloning.
3. **Clone template content and change**:
	* Pros: Faster than cloning an individual element, with less overhead for updating attributes.
	* Cons: May require additional processing time to parse the cloned content.
4. **Clone template and use its content**: This method can be faster than creating a new element or cloning an existing one, as it leverages the existing template's parsing and compilation.

**Library Usage**

The benchmark uses two libraries:

1. `Template` (`.LinkTemplate.content.cloneNode(true)`): Provides a way to create lightweight HTML templates.
2. No explicit library usage is mentioned in the provided code snippets.

**Special JS Features or Syntax**

This benchmark does not use any special JavaScript features or syntax, apart from using a template element (`<template>`), which is supported by most modern browsers.

**Other Alternatives**

If you're looking for alternative approaches to this benchmark, consider:

1. Creating elements with a library like `jsdom` or `puppeteer`, which provide more control over HTML parsing and creation.
2. Using a custom element factory function to create new elements with reduced overhead.
3. Employing a rendering engine or a web framework that optimizes element creation and manipulation, such as React or Angular.

Keep in mind that each alternative approach may have trade-offs in terms of performance, complexity, or ease of use.

Related benchmarks:

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: 2 years ago by: Registered User

Jump to the latest result

Create new element from scratch

Clone element and change

Clone template content and change

Clone template and use its content

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):