Benchmark: Create text node v2

Script Preparation code:

var x=Date.now();
var y=''+Math.random();
var z=null

Tests:

new Text number
new Text(x)
createTextNode number
document.createTextNode(x)
new Text string
new Text(y)
createTextNode string
document.createTextNode(y)
new Text null
new Text(y)
createTextNode null
document.createTextNode(y)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Text number
createTextNode number
new Text string
createTextNode string
new Text null
createTextNode null

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 days ago)

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

Browser/OS: Chrome 135 on Linux

View result in a separate tab

Test name	Executions per second
new Text number	6657346.5 Ops/sec
createTextNode number	9134806.0 Ops/sec
new Text string	9347326.0 Ops/sec
createTextNode string	12851516.0 Ops/sec
new Text null	9677646.0 Ops/sec
createTextNode null	13262452.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 12 days ago):

LLMs can make mistakes. Check important info.

The benchmark presented assesses the performance of two methods for creating text nodes in the browser's Document Object Model (DOM): `new Text()` and `document.createTextNode()`. These approaches are compared across three different data types for the text content: a number, a string, and null.

### Options Compared

1. **`new Text(x)`** vs **`document.createTextNode(x)`**:
   - **new Text(x)**:
     - This method creates a `Text` node directly using the Text constructor. The main advantage is its modern syntax, which may lead to more readable code.
   - **document.createTextNode(x)**:
     - This is the traditional approach to creating a text node in the DOM. It has been in use for a long time and is widely supported across all browsers.
  
**Test Cases:**
- **`new Text(x)`** where `x` is a number
- **`document.createTextNode(x)`** where `x` is a number
- **`new Text(y)`** where `y` is a string
- **`document.createTextNode(y)`** where `y` is a string
- **`new Text(y)`** where `y` is null
- **`document.createTextNode(y)`** where `y` is null

### Performance Results Overview

The benchmark results show execution rates measured in "Executions Per Second" (EPS) for each test. Here are the results from the latest benchmark run:

1. **`createTextNode(null)`**: 13,262,452 EPS
2. **`createTextNode(string)`**: 12,851,516 EPS
3. **`new Text(null)`**: 9,677,646 EPS
4. **`new Text(string)`**: 9,347,326 EPS
5. **`createTextNode(number)`**: 9,134,806 EPS
6. **`new Text(number)`**: 6,657,346.5 EPS

### Analysis

1. **Performance Pros/Cons**:
   - **Performance**: `document.createTextNode()` generally outperforms `new Text()` in this benchmark. This might suggest that the traditional DOM method is more optimized in this scenario, possibly due to better integration with the existing DOM manipulations and browser implementations.
   - **Consistency**: `new Text()` is a newer and more modern JavaScript feature, but its performance in certain scenarios might lag behind the classic methods, as shown in the benchmark results.
   - **Readability and Modern Practices**: Using `new Text()` can result in more readable code, as it cleanly expresses the intention of creating a text node. In contrast, `document.createTextNode()` may feel outdated, though it maintains broad compatibility.

2. **Null Handling**:
   - Both approaches handle `null` gracefully, resulting in empty text nodes. However, their performance still differs; `createTextNode(null)` performed the best overall.
   
3. **String and Number Handling**:
   - The performance difference between handling strings and numbers in these APIs suggests that the JavaScript engine has optimizations that favor the older API when dealing with primitive types in certain contexts.

### Alternatives and Considerations

Alternative methods within JavaScript for managing text and DOM manipulation include:
- **InnerHTML**: One can directly set `innerHTML` to create text nodes, but this approach has performance drawbacks due to DOM reflows and parsing.
- **Template literals**: For creating HTML structures containing text, template literals can be employed, though this method still involves more overhead than direct text node creation.

### Summary

The benchmark reveals nuanced performance characteristics of two methods for creating text nodes in the DOM. While `document.createTextNode()` consistently shows superior performance across tests, modern practices encourage the use of `new Text()` for improved code readability. Developers should assess both performance implications and coding practices when deciding on which technique to utilize in production environments, especially considering potential browser-specific optimizations and support.

Related benchmarks:

Create text node v2 (version: 1)

Comparing performance of: new Text number vs createTextNode number vs new Text string vs createTextNode string vs new Text null vs createTextNode null

Created: 12 days ago by: Guest

Jump to the latest result

new Text number

createTextNode number

new Text string

createTextNode string

new Text null

createTextNode null

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 12 days ago):