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

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

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

Jump 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

Test name	Executions per second
With createElement() and append()	1275.3 Ops/sec
With createElement() and appendChild()	558.7 Ops/sec
With innerHTML and getElementById()	80813.7 Ops/sec
With innerHTML and getElementsByClassName()	74097.3 Ops/sec
With innerHTML and getElementsByTagName()	77459.3 Ops/sec
With innerHTML and querySelector()	77210.5 Ops/sec
With innerHTML and querySelectorAll()	68396.0 Ops/sec
With createElement() and outerHTML	66976.9 Ops/sec
With innerHTML and children[children.length - 1]	69529.8 Ops/sec
With innerHTML and lastChild	80354.9 Ops/sec
With innerHTML and lastElementChild	77864.2 Ops/sec
With createElement() and innerHTML	68205.0 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.

Related benchmarks: