Benchmark: create DOM Element Test

HTML Preparation code:

 <ul class="list">

</ul>

Script Preparation code:

  var list = document.querySelector('.list'),
      num = 10,
      t;
function cloneMultiple (elem, times, deep) {
   let fragment = document.createDocumentFragment();
   fragment.appendChild(elem.cloneNode(deep));
   if (times <= 1) {
       return fragment;
   }

   let i = 1,
       rest = [];

   while((times % 2 === 0 || !!(rest[i] = 1 && --times)) && (times /= 2) && times >3 ) {
        i += 1;  
   }

   while ( times > 1 ) {
      fragment.appendChild(elem.cloneNode(deep));
      --times;
   }

    for ( ; i; --i ) {
      fragment.appendChild(fragment.cloneNode(true));   
      rest[i] && fragment.appendChild(elem.cloneNode(deep));
    }
   
   return fragment;
 }

Tests:

cloneMultiple
var li = document.createElement('li'); list.appendChild(cloneMultiple(li, num, true));
innerHTML
var str = ''; for (t = 0; t < num; t++) { str += `<li><li>`; } list.innerHTML = str;
cloneNode
var li = document.createElement('li'); for (t = 0; t < num; t++) { var cloneLi = li.cloneNode(); list.appendChild(cloneLi); }
createElement
for (t = 0; t < num; t++) { var li = document.createElement('li'); list.appendChild(li); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneMultiple
innerHTML
cloneNode
createElement

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
cloneMultiple	82880.5 Ops/sec
innerHTML	31380.1 Ops/sec
cloneNode	56967.8 Ops/sec
createElement	45771.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested.

**Benchmark Overview**

The benchmark measures the performance of creating DOM elements using different methods: `createElement`, `innerHTML`, `cloneNode`, and a custom implementation called `cloneMultiple`.

**Options Compared**

1. **`createElement`**: Creates a new element using the `document.createElement()` method.
2. **`innerHTML`**: Sets the inner HTML of an element to create multiple child elements.
3. **`cloneNode`**: Clones a node (in this case, an element) using the `cloneNode()` method.
4. **`cloneMultiple`**: A custom implementation that uses a loop to clone nodes and appends them to the parent element.

**Pros and Cons of Each Approach**

1. **`createElement`**:
	* Pros: Fast and efficient, as it creates a new element from scratch.
	* Cons: Requires multiple calls to create child elements.
2. **`innerHTML`**:
	* Pros: Convenient, as it sets the inner HTML, but may be slower due to DOM parsing and manipulation.
	* Cons: May cause performance issues if the string is large or complex.
3. **`cloneNode`**:
	* Pros: Fast and efficient, as it clones an existing node without creating a new one.
	* Cons: Requires the original node to exist and be accessible.
4. **`cloneMultiple`**:
	* Pros: Customizable, as it allows for fine-grained control over cloning and appending nodes.
	* Cons: May be slower due to the complexity of the loop.

**Library Usage**

In this benchmark, `document.querySelector()` is used to select an element with class `.list`. No other libraries are mentioned in the provided JSON.

**Special JS Feature/Syntax**

None are explicitly mentioned. However, it's worth noting that the use of `fragment` and `cloneNode(true)` might be specific to Firefox or modern browsers, but their usage is not unique to these platforms.

**Other Alternatives**

For creating DOM elements, alternative approaches include:

1. Using a library like React or Angular, which provide optimized rendering mechanisms.
2. Utilizing Web Components (e.g., HTML Templates) for efficient element creation and management.
3. Leveraging modern JavaScript features like `Array.prototype.map()` or `Array.prototype.reduce()` to create arrays of elements.

Keep in mind that these alternatives may have different performance characteristics and might not be suitable for all use cases.

I hope this explanation helps you understand the benchmark's purpose and the options being compared!

Related benchmarks:

create DOM Element Test (version: 11)

createElement, innerHTML, cloneNode方法创建DOM元素时间测试

Comparing performance of: cloneMultiple vs innerHTML vs cloneNode vs createElement

Created: 6 years ago by: Registered User

Jump to the latest result

cloneMultiple

innerHTML

cloneNode

createElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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