Benchmark: createElement + append vs html code

HTML Preparation code:

<div id="fakeInput" contenteditable> </div>

Tests:

html code
//document.getElementById('fakeInput').innerHTML = '<img class="emoji" src="/sy2/images/message/emoji/22.svg">'; document.getElementById('fakeInput').innerHTML = '123456';
createElement
//var child = document.createElement('img'); //child.setAttribute('class', 'emoji'); //child.setAttribute('src', '/sy2/images/message/emoji/20.svg'); //document.getElementById('fakeInput').appendChild(child); var child = document.createTextNode('123456'); document.getElementById('fakeInput').appendChild(child);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
html code
createElement

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Linux

View result in a separate tab

Test name	Executions per second
html code	6408.4 Ops/sec
createElement	10750.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases to explain what's being tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark is defined by two test cases:

1. "createElement"
2. "html code"

The script preparation code is empty, indicating that it's not used in this benchmark.
The HTML preparation code sets up a `<div>` element with an ID of "fakeInput" and makes its content editable.

**Test Cases**

#### 1. "createElement"

```javascript
//var child = document.createElement('img'); // Create an img tag
//child.setAttribute('class', 'emoji'); // Set the class attribute of the img tag
//child.setAttribute('src', '/sy2/images/message/emoji/20.svg'); // Set the src attribute of the img tag
//document.getElementById('fakeInput').appendChild(child); // Append the img tag to the fakeInput div

var child = document.createTextNode('123456'); // Create a text node with the string "123456"
document.getElementById('fakeInput').appendChild(child); // Append the text node to the fakeInput div
```

**Comparison**

In this test case, two approaches are compared:

a. Creating an `img` element and appending it to the DOM.

b. Creating a `textNode` with a string value and appending it to the DOM.

**Pros/Cons:**

Creating an `img` element is more verbose than creating a `textNode`, but it can be useful if you need to add additional attributes or styles to the image element.

On the other hand, creating a `textNode` is faster because it doesn't involve parsing HTML and setting up a new element.

#### 2. "html code"

The benchmark definition uses the following script preparation code:

```javascript
//document.getElementById('fakeInput').innerHTML = '<img class=\"emoji\" src=\"/sy2/images/message/emoji/22.svg\">'; // Set the innerHTML of the fakeInput div to an img tag

document.getElementById('fakeInput').innerHTML = '123456'; // Set the innerHTML of the fakeInput div to a string
```

**Comparison**

In this test case, two approaches are compared:

a. Setting the `innerHTML` property of the `div` element directly.

b. Creating an `img` element and then appending it to the DOM.

However, in modern browsers, using `innerHTML` can be slower than other methods because it involves parsing HTML and creating a new document fragment.

**Pros/Cons:**

Using `innerHTML` is simpler and more concise but may be slower due to parsing overhead.

Creating an `img` element and appending it to the DOM is more verbose but might be faster for some use cases.

**Libraries Used**

None.

**Special JS Features/Syntax**

This benchmark doesn't use any special JavaScript features or syntax. It only uses standard DOM methods and properties.

**Alternatives**

Other alternatives for creating elements in JavaScript include:

* Using a library like React, Angular, or Vue.js to manage the DOM.
* Using a virtual DOM like Preact or SolidJS.
* Using a templating engine like Handlebars or Mustache.
* Using a library like jQuery to simplify DOM manipulation.

Keep in mind that each alternative has its own trade-offs and use cases. The benchmark is designed to compare simple DOM operations, so the alternatives might not be as relevant for this specific scenario.

Related benchmarks:

createElement + append vs html code (version: 1)

Comparing performance of: html code vs createElement

Created: 6 years ago by: Registered User

Jump to the latest result

html code

createElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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