Benchmark: createElement vs createElementNS

HTML Preparation code:

<div></div>

Tests:

createElement
const div = document.createElement('div') div.innerHTML = Math.random().toString(); return div.outerHTML;
createElementNS
const div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div') div.innerHTML = Math.random().toString(); return div.outerHTML;

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

createElement

440K/s

createElementNS

436K/s

View exact numbers

✓ createElement: 440,349 ops/sec
• createElementNS: 435,890 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
createElementNS

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser/OS: Chrome 147 on Linux

View result in a separate tab

createElementNS

511K/s

createElement

485K/s

View exact numbers

Test name	Executions per second
✓ createElementNS	510,565 Ops/sec
createElement	484,954 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 and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is designed to compare two approaches for creating HTML elements in JavaScript: `document.createElement` and `document.createElementNS`. The test case uses a simple HTML div element with random inner text.

**What's Being Tested?**

Two test cases are run:

1. `createElement`: This test creates an HTML element using the standard `createElement` method, which returns an element that can be appended to a document without specifying its namespace.
2. `createElementNS`: This test creates an HTML element using the `createElementNS` method, which returns an element with a specific namespace (in this case, `http://www.w3.org/1999/xhtml`). The purpose of creating elements with namespaces is to enable features like XML serialization and schema validation.

**Options Compared**

The two approaches are compared in terms of performance, specifically the number of executions per second.

**Pros and Cons**

Here's a brief overview of each approach:

1. `document.createElement`:
	* Pros: Wide browser support, simple implementation.
	* Cons: May not be suitable for creating elements with specific namespaces, which can lead to compatibility issues.
2. `document.createElementNS`:
	* Pros: Enables creation of elements with specific namespaces, which can improve compatibility and schema validation.
	* Cons: Requires specifying the namespace, which may add complexity and overhead.

**Library Used**

There is no library explicitly mentioned in the benchmark. However, it's worth noting that `createElementNS` requires a specific namespace to be specified, which might involve using a namespace resolution mechanism or registry.

**Special JS Feature/ Syntax**

The benchmark uses JavaScript's `Math.random().toString()` function to generate random inner text for the div element. This is not a special feature per se, but rather a simple way to introduce variation in the test results.

**Other Alternatives**

In theory, other approaches could be used to create HTML elements, such as:

1. Using a templating engine or library like Handlebars, Mustache, or Underscore.js.
2. Creating elements using a DOM manipulation library like jQuery or React.
3. Using a micro-templating approach with functions like `template` from the `micro-template` library.

However, these alternatives are not explicitly tested in this benchmark.

**Benchmark Preparation Code**

The provided `Html Preparation Code` is simple and focuses on creating an empty div element (`<div></div>`). The `Script Preparation Code` is empty, which means no additional setup or initialization code is required before running the test cases.

createElement vs createElementNS (version: 0)

Comparing performance of: `createElement vs createElementNS`

Created: 3 years ago by: Guest

Go to the latest result

createElement

createElementNS

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

createElement vs createElementNS (version: 0)

Comparing performance of: createElement vs createElementNS

Created: 3 years ago by: Guest

Go to the latest result

createElement

createElementNS

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `createElement vs createElementNS`