Benchmark: Test333333 - MeasureThat.net

Tests:

Test1
for (let i = 0; i <= 10000; i++) { const tagName = 'Test'; const el = document.createElement('div'); el.classList.add('tag', 'js__tag'); el.className = 'tag js__tag'; el.title = tagName; el.innerHTML = `<span class="tag__name js__tag-name">${tagName}</span>`; }
Test2
for (let i = 0; i <= 10000; i++) { const tagName = 'Test'; const el = document.createElement('div'); const spanName = document.createElement('span'); spanName.className = 'tag__name js__tag-name'; spanName.textContent = tagName; el.appendChild(spanName); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Test1
Test2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Test1	7.2 Ops/sec
Test2	14.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net tests the performance of creating and manipulating HTML elements in JavaScript. Specifically, it measures the time taken to create and append elements to the DOM (Document Object Model).

The benchmark definition json provides two test cases:

1. `Test1`: Creates a `div` element and appends a `span` element with a class and text content.
2. `Test2`: Creates a `div` element, creates a separate `span` element, and appends it to the `div`.

**Options being compared**

The two test cases use different approaches to achieve the same goal:

1. **Create a single `div` element with both class and text content**: This is the approach used in `Test1`. The code creates a single `div` element and adds a `span` element to it, setting both the class and text content directly on the `span` element.
2. **Create separate elements for class and text content**: This is the approach used in `Test2`. The code creates two separate elements: a `div` element and a `span` element. It sets the class on the `span` element separately, and then appends it to the `div`.

**Pros and Cons of each approach**

1. **Single-element approach (Test1)**:
	* Pros:
		+ Less overhead for creating elements.
		+ Fewer DOM mutations.
	* Cons:
		+ More complex code due to setting multiple properties on a single element.
2. **Separate-element approach (Test2)**:
	* Pros:
		+ Easier to understand and maintain, as the concerns are separate.
		+ Can be more flexible if additional elements need to be added or modified.
	* Cons:
		+ More overhead for creating two elements.
		+ More DOM mutations.

**Library usage**

Neither of the benchmark definitions uses a library. The tests rely solely on native JavaScript functionality.

**Special JS features or syntax**

There are no special JS features or syntax used in these test cases. They are straightforward, vanilla JavaScript code.

**Other alternatives**

If you wanted to write alternative test cases, you could consider:

1. Using `innerHTML` instead of `textContent` for the `span` element.
2. Creating a separate function for creating and setting class names, rather than hardcoding them directly into the code.
3. Adding more elements to each test case, such as multiple `div` or `span` elements, to increase complexity.

However, MeasureThat.net's approach is already quite comprehensive, covering the basic performance of element creation and manipulation.

Related benchmarks:

Test333333 (version: 0)

Comparing performance of: Test1 vs Test2

Created: one year ago by: Guest

Jump to the latest result

Test1

Test2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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