Benchmark: DOM: Best practices for creating, then adding elements

DOM: Best practices for creating, then adding elements (version: 3) Benchmark.js

Comparing performance of: `With createElement() and append() vs With createElement() and appendChild() vs With innerHTML and getElementById() vs With innerHTML and getElementsByClassName() vs With innerHTML and getElementsByTagName() vs With innerHTML and querySelector() vs With innerHTML and querySelectorAll() vs With createElement() and outerHTML vs With innerHTML and children[children.length - 1] vs With innerHTML and lastChild vs With innerHTML and lastElementChild vs With createElement() and innerHTML`

Created: 3 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<body></body>

Tests:

With createElement() and append()
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.append(canvas);
With createElement() and appendChild()
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.appendChild(canvas);
With innerHTML and getElementById()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.getElementById("canvas");
With innerHTML and getElementsByClassName()
document.body.innerHTML = "<canvas class='canvas'></canvas>"; const canvas = document.getElementsByClassName("canvas")[0];
With innerHTML and getElementsByTagName()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.getElementsByTagName("canvas")[0];
With innerHTML and querySelector()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.querySelector("canvas");
With innerHTML and querySelectorAll()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.querySelectorAll("canvas")[0];
With createElement() and outerHTML
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.innerHTML = canvas.outerHTML;
With innerHTML and children[children.length - 1]
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.children[document.body.children.length - 1];
With innerHTML and lastChild
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.lastChild;
With innerHTML and lastElementChild
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.lastElementChild;
With createElement() and innerHTML
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.innerHTML = "<canvas id='canvas'></canvas>";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With createElement() and append()
With createElement() and appendChild()
With innerHTML and getElementById()
With innerHTML and getElementsByClassName()
With innerHTML and getElementsByTagName()
With innerHTML and querySelector()
With innerHTML and querySelectorAll()
With createElement() and outerHTML
With innerHTML and children[children.length - 1]
With innerHTML and lastChild
With innerHTML and lastElementChild
With createElement() and innerHTML

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:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Linux

View result in a separate tab

With innerHTML and getElementById()

81K/s

With innerHTML and lastChild

80K/s

With innerHTML and lastElementChild

78K/s

With innerHTML and getElementsByTagName()

77K/s

With innerHTML and querySelector()

77K/s

With innerHTML and getElementsByClassName()

74K/s

With innerHTML and children[children.length - 1]

70K/s

With innerHTML and querySelectorAll()

68K/s

With createElement() and innerHTML

68K/s

With createElement() and outerHTML

67K/s

With createElement() and append()

1K/s

With createElement() and appendChild()

559/s

View exact numbers

Test name	Executions per second
✓ With innerHTML and getElementById()	80,814 Ops/sec
With innerHTML and lastChild	80,355 Ops/sec
With innerHTML and lastElementChild	77,864 Ops/sec
With innerHTML and getElementsByTagName()	77,459 Ops/sec
With innerHTML and querySelector()	77,210 Ops/sec
With innerHTML and getElementsByClassName()	74,097 Ops/sec
With innerHTML and children[children.length - 1]	69,530 Ops/sec
With innerHTML and querySelectorAll()	68,396 Ops/sec
With createElement() and innerHTML	68,205 Ops/sec
With createElement() and outerHTML	66,977 Ops/sec
With createElement() and append()	1,275 Ops/sec
With createElement() and appendChild()	559 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition:**
The benchmark definition is a simple JavaScript code snippet that creates an HTML element (in this case, a `div` element) using different methods to access its child elements.

```javascript
const div = document.createElement('div');
div.innerHTML = '<p>Hello World!</p>';
console.log(div.querySelector('p'));
console.log(div.querySelector('*')); // global querySelector
console.log(div.querySelector('p')?.textContent); // null if no p tag is found
```

The benchmark measures the performance of different DOM query methods:

1. `querySelector`: selects a descendant element by its tag name.
2. `querySelectorAll`: selects all descendant elements that match the specified CSS selector.
3. `lastChild`: accesses the last child node of an element.
4. `lastElementChild`: accesses the last element child of an element (specific to HTML elements).
5. `children[children.length - 1]`: accesses the last child element of an element.

**Test Cases:**
The test cases are variations of the benchmark definition, each using a different method to access the child elements.

1. `querySelector`
2. `lastChild`
3. `lastElementChild`
4. `getElementsByClassName` (not used in this benchmark)
5. `querySelectorAll`
6. `querySelector`
7. `lastElementChild`
8. `children[children.length - 1]`
9. `innerHTML` and `outerHTML` (used for.createElement method)

The test cases are run multiple times to gather performance data, with different browsers (in this case, Firefox) and devices.

**Performance Data:**
The provided performance data shows the number of executions per second (ExecutionsPerSecond) for each test case. The highest execution rate indicates the fastest DOM query method.

Here's a brief summary of the top-performing methods:

* `querySelectorAll`
* `lastElementChild` (on average, 10-20% faster than other methods)
* `innerHTML` and `outerHTML` (used for createElement method)

Keep in mind that this benchmark is specific to the provided code snippet and may not be representative of all use cases. The performance differences between these methods can vary depending on the context and requirements of your application.

It's also worth noting that the use of `querySelectorAll` might lead to unnecessary DOM mutations if used excessively, as it returns a NodeList (a live HTMLCollection) which is a dynamic collection of nodes. In contrast, `querySelector` returns a single element or null if no match is found, making it more efficient in terms of memory usage.

In summary, this benchmark provides valuable insights into the performance characteristics of different DOM query methods and can help you choose the most suitable approach for your specific use case.