Benchmark: Fragment js createElement 56454

Script Preparation code:

function createFragment(strHTML) {
    return document.createRange().createContextualFragment(strHTML);
}

function createElement(tagName, props) {
    const element = document.createElement(tagName);

    if (props) {
        if (typeof props === 'string') {
            element.className = props;
        }
        else {
            for (const key in props) {
                element[key] = props[key];
            }
        }

    }

    return element;
}

Tests:

createFragment
createFragment(` <div class="eventList"> <h3 class="Titleevent"> <span class="TitleeventLabel">Evento: </span> <span class="TitleeventId">${'id'} - </span> <span class="TitleeventName">${'name'}</span> </h3> <div class="mensagemlist"> <div class="mensagemlistBox"> <label class="mensagemlistBoxLabel">Deje un mensaje:</label> <textarea class="mensagemlistBoxInput" id="mensajeLimit"></textarea> <small id="sprestante"></small> </div> <div class="mensagemlistButtons"> <input type="submit" value="Guardar" class="btn-guardar"> <button class="btn-excluir">Esta compra no es un regalo</button> </div> </div> </div> `)
createElement
const title = createElement('h3', { className: 'Titleevent' }); title.appendChild(createElement('span', { className: 'TitleeventLabel', textContent: 'Evento: ' })); title.appendChild(createElement('span', { className: 'TitleeventId', textContent: `${'id'} - ` })); title.appendChild(createElement('span', { className: 'TitleeventName', textContent: 'name' })); const messageList = createElement('div', { className: 'mensagemlist' }); const listBox = createElement('div', { className: 'mensagemlistBox' }); listBox.appendChild(createElement('label', { className: 'mensagemlistBoxLabel', textContent: 'Deje un mensaje:' })); listBox.appendChild(createElement('textarea', { className: 'mensagemlistBoxInput', id: 'mensajeLimit' })); listBox.appendChild(createElement('small', { id: 'sprestante' })); const buttons = createElement('div', { className: 'mensagemlistButtons' }); buttons.appendChild(createElement('input', { type: 'submit', value: 'Guardar', className: 'btn-guardar' })); buttons.appendChild(createElement('button', { className: 'btn-excluir', textContent: 'Esta compra no es un regalo' })); messageList.appendChild(listBox); messageList.appendChild(buttons); const container = createElement('div', 'eventList') container.appendChild(title); container.appendChild(messageList);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createFragment
createElement

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/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
createFragment	57316.6 Ops/sec
createElement	103060.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, pros and cons, library usage, special JS features, and other considerations.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark that measures the performance of two functions: `createFragment` and `createElement`. The benchmarks are designed to test the creation of HTML elements and fragments in different scenarios.

**Options Compared**

Two options are compared:

1. **`createFragment`**: This function creates an HTML fragment using `document.createRange().createContextualFragment(strHTML)`.
2. **`createElement`**: This function creates a single HTML element using `document.createElement(tagName)` and then appends child elements to it.

**Pros and Cons**

* **`createFragment`**:
	+ Pros:
		- Creates an HTML fragment, which can improve performance by reducing the number of DOM mutations.
		- Uses `contextualFragment`, which is a more efficient way to create fragments compared to using `insertBefore` or `appendChild`.
	+ Cons:
		- May be slower for small fragments due to the overhead of creating a range and fragment.
* **`createElement`**:
	+ Pros:
		- Faster for small elements, as it avoids the overhead of creating a range and fragment.
	+ Cons:
		- Slower for larger elements or fragments due to the need to append child elements multiple times.

**Library Usage**

The `document` object is used extensively in both benchmarks. This is not surprising, as it's the global object that provides access to the Document Object Model (DOM).

**Special JS Features**

No special JavaScript features are mentioned in this benchmark. However, it's worth noting that modern browsers like Chrome 104 support various advanced features, such as Web Workers, WebAssembly, and async/await, which can affect benchmark performance.

**Other Considerations**

* **HTML Preparation Code**: The `Html Preparation Code` field is empty for both benchmarks, suggesting that the HTML structure is not being manipulated or modified during the benchmark.
* **DevicePlatform**, **OperatingSystem**, and **ExecutionsPerSecond**: These fields provide information about the testing environment. In this case, both tests were run on a Windows Desktop with Chrome 104.

**Alternatives**

If you're interested in exploring alternative approaches to benchmarking JavaScript performance, consider the following options:

1. **V8 Profiler**: The V8 Profiler is a tool that provides detailed information about JavaScript execution time and memory allocation.
2. **Benchmarking libraries**: Libraries like `benchmark` or `micro-benchmark` provide a framework for creating and running benchmarks in JavaScript.
3. **WebAssembly-based benchmarks**: WebAssembly (WASM) can be used to create benchmarks that run on the web, providing a more consistent testing environment.

I hope this explanation helps!

Related benchmarks:

Fragment js createElement 56454 (version: 0)

Comparing performance of: createFragment vs createElement

Created: 3 years ago by: Guest

Jump to the latest result

createFragment

createElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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