Benchmark: Check if in DOM X

HTML Preparation code:

<div id="a">
<div id="b">
  <div id="c">
Test
    </div>
</div>
</div>

Script Preparation code:

var c = document.getElementById('c');
document.getElementById('b').innerHTML = '';

Tests:

parentNode
c.parentNode;
nextSibling
c.nextSibling;
parentElement
c.parentElement;
previousSibling
c.previousSibling;
getElementById
document.getElementById('c');
freeze
const obj = { a: 1, b: 'string'}; Object.freeze(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
parentNode
nextSibling
parentElement
previousSibling
getElementById
freeze

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 YaBrowser/23.3.3.704 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 23 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
parentNode	13497115.0 Ops/sec
nextSibling	13583668.0 Ops/sec
parentElement	13459077.0 Ops/sec
previousSibling	13537247.0 Ops/sec
getElementById	3968518.2 Ops/sec
freeze	5643988.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents two benchmark definitions: one for creating a DOM element and another set of individual test cases.

**Benchmark Definition (Create DOM Element)**

The first benchmark definition tests the creation of an element in the Document Object Model (DOM). It consists of three steps:

1. Create an element (`c`) with `document.getElementById('c')`.
2. Set its innerHTML to an empty string using `innerHTML = ''`.
3. Remove the element from the DOM by setting its parent node's child nodes to null or undefined.

**Options Compared**

The benchmark compares four different approaches to create and remove elements:

1. **`document.getElementById('c');`**: Uses the `getElementById()` method to retrieve an existing element with the id 'c'.
2. **`c.parentNode();`**: Uses the `parentNode` property of the element (`c`) to access its parent node.
3. **`c.nextSibling();`**: Uses the `nextSibling` property of the element (`c`) to access its next sibling node.
4. **`c.parentElement();`**: Uses the `parentElement` property of the element (`c`) to access its parent element.

**Pros and Cons**

*   **`document.getElementById('c');`**:
    *   Pros: Fastest approach, as it retrieves an existing element without creating a new one.
    *   Cons: May fail if the element does not exist.
*   **`c.parentNode();`**, **`c.previousSibling();`**, and **`c.parentElement();`**:
    *   Pros: Can be faster than `getElementById()` if the element already exists in the DOM.
    *   Cons: May require more complex logic to create a new element, as it involves manipulating the parent node.

**Alternative Approaches**

Other ways to create elements could include:

*   Using a library like jQuery or React
*   Creating a new HTML string and appending it to the DOM using `innerHTML`
*   Using a templating engine like Handlebars or Mustache

However, these approaches may be slower than the ones compared in the benchmark.

**Individual Test Cases**

The individual test cases are designed to measure the performance of each approach. Each test case consists of two steps:

1.  Create an element (`c`) with `document.getElementById('c')`.
2.  Measure the execution time using a timer or benchmarking library like Benchmark.js.

**Library: `Object.freeze()`**

The second benchmark definition tests the use of the `Object.freeze()` method to freeze an object. This approach is used in the test case **`const obj = { a: 1, b: 'string'}; Object.freeze(obj);`**.

**Purpose of `Object.freeze()`**

The `Object.freeze()` method creates a new object that cannot be modified through any of its properties. It's used to:

*   Prevent accidental property modifications
*   Ensure data integrity in immutable objects

By freezing an object, you can ensure that its properties remain unchanged and prevent unexpected behavior.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax mentioned in the provided JSON. However, it's worth noting that MeasureThat.net supports testing various JavaScript versions and browsers to provide a more comprehensive view of performance optimizations across different environments.

Related benchmarks:

Check if in DOM X (version: 0)

Comparing performance of: parentNode vs nextSibling vs parentElement vs previousSibling vs getElementById vs freeze

Created: 2 years ago by: Guest

Jump to the latest result

parentNode

nextSibling

parentElement

previousSibling

getElementById

freeze

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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