Benchmark: test lorem - MeasureThat.net

HTML Preparation code:

<table>
  <tr>
    <td id="title">Title</td>
    <td id="url">URL</td>
  </tr>
</table>

Script Preparation code:

const title = document.getElementById('title');
const url = document.getElementById('url');

Tests:

1
title.innerHTML = "Edited Title"; url.innerHTML = "Edited URL";
2
title.replaceChildren("Edited Title"); url.replaceChildren("Edited URL");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2

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; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Windows

View result in a separate tab

Test name	Executions per second
1	106655.9 Ops/sec
2	120181.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand what's being tested in the provided benchmark.

**Overview**

The benchmark measures the performance of two approaches for updating text in HTML elements: `innerHTML` and `replaceChildren`. The test is designed to compare the execution speed of these two methods on Firefox 125 browser, running on Windows desktop.

**Benchmark Definition JSON**

The JSON represents a benchmark with three main components:

1. **Script Preparation Code**: This code is executed before running each test case. In this case, it retrieves the HTML elements `title` and `url` from the DOM.
2. **Html Preparation Code**: This code generates the HTML structure for the benchmark, which includes two table rows with `title` and `url` elements.
3. **Benchmark Definition**: This defines the operation to be performed on the retrieved elements. There are two test cases:
	* Test case 1: `title.innerHTML = "Edited Title"; url.innerHTML = "Edited URL";`
	* Test case 2: `title.replaceChildren("Edited Title"); url.replaceChildren("Edited URL");`

**Approaches Compared**

Two approaches are being compared:

1. **innerHTML**: This method updates the text content of an element by setting its `innerHTML` property to a new string.
2. **replaceChildren**: This method replaces all child nodes of an element with new ones.

**Pros and Cons of Each Approach**

**innerHTML**

Pros:

* Simple and easy to implement
* Works well for small strings

Cons:

* Can be slow when dealing with large strings or many elements
* Can cause memory issues if not properly cleared

**replaceChildren**

Pros:

* More efficient than `innerHTML` when dealing with large amounts of data
* Less likely to cause memory issues

Cons:

* More complex and less intuitive than `innerHTML`
* May require more resources (e.g., DOM manipulators) for browser engines to optimize

**Library Used: None**

There is no external library being used in this benchmark.

**Special JS Feature/Syntax: None**

No special JavaScript features or syntax are being used in this benchmark.

**Other Alternatives**

If you wanted to compare these approaches, you could consider adding additional test cases using other methods, such as:

* `appendChild` and `removeChild`
* CSS animations or transitions
* Other DOM manipulation methods (e.g., `setStyle`, `insertBefore`)

However, the benchmark is specifically designed to focus on the performance of `innerHTML` and `replaceChildren`.

Keep in mind that the actual implementation details may vary depending on the specific browser engine and version being tested.

Related benchmarks:

test lorem (version: 0)

lorem ipsum

Comparing performance of: 1 vs 2

Created: 2 years ago by: Guest

Jump to the latest result

1

2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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