Benchmark: Is in DOM - MeasureThat.net

HTML Preparation code:

<div id="test-div"></div>

Script Preparation code:

function isInDOM1(oHTMLElement) {                                   
  if (oHTMLElement === document.body || oHTMLElement === document ) {
    return true;
  } else {
    try {
      return document.body.contains(oHTMLElement);
    } catch(ex) {
      // Sometimes in Firefox element is anonymous div around input.
      // Throws error "TypeError: Argument 1 of Node.contains does not implement interface Node"
      // See https://bugzilla.mozilla.org/show_bug.cgi?id=208427
      return false;
    }
  }
}

function isInDOM2(oHTMLElement) {                                   
  var root = oHTMLElement.ownerDocument; 
  if (!root) { return false; }
  
  if ( oHTMLElement.ownerDocument.documentElement === document.documentElement ){ return true; }

  return false;
}

var div = document.getElementById('test-div');

Tests:

isInDOM1
isInDOM1(div);
isInDOM2
isInDOM2(div);

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

isInDOM2

4.6M/s

isInDOM1

2.5M/s

Fastest: isInDOM2 (1.9x faster)

View exact numbers

✓ isInDOM2: 4,570,700 ops/sec
• isInDOM1: 2,454,924 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
isInDOM1
isInDOM2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Windows

View result in a separate tab

isInDOM2

5.2M/s

isInDOM1

2.0M/s

View exact numbers

Test name	Executions per second
✓ isInDOM2	5,153,594 Ops/sec
isInDOM1	2,036,755 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 other considerations.

**Benchmark Overview**

The benchmark measures the performance of two different functions, `isInDOM1` and `isInDOM2`, which check if an element is in the Document Object Model (DOM). The benchmark uses a simple HTML page with a single `<div>` element, `test-div`, that can be accessed by the JavaScript code.

**Script Preparation Code**

The script preparation code defines two functions:

* `isInDOM1(oHTMLElement)`: This function checks if the provided `oHTMLElement` is the body or document element. If not, it tries to use the `contains()` method of the `document.body` object to check if the element is contained within the DOM. If that fails (which happens in some Firefox versions), it returns false.
* `isInDOM2(oHTMLElement)`: This function checks if the provided `oHTMLElement` has a non-null ownerDocument property. If so, it checks if the element's ownerDocument's.documentElement matches the current document's.documentElement. If both conditions are true, it returns true; otherwise, it returns false.

**Library and Purpose**

There is no explicit library used in this benchmark. However, the `contains()` method of the `document.body` object relies on a proprietary implementation provided by Mozilla.

**Special JS Feature or Syntax**

None mentioned.

**Comparison of Options**

The two functions are compared in terms of their performance:

* `isInDOM1`: This function is generally faster than `isInDOM2`, especially in cases where the element's ownerDocument is not null. However, it has a higher chance of throwing errors due to the `contains()` method implementation issues mentioned earlier.
* `isInDOM2`: This function is more reliable and stable but slower compared to `isInDOM1`. It provides a more robust way to check if an element is in the DOM.

**Pros and Cons**

**`isInDOM1`:**

Pros:

* Faster execution
* Lower chance of errors

Cons:

* May throw errors due to proprietary implementation issues
* Less reliable in some cases

**`isInDOM2`:**

Pros:

* More reliable and stable
* Provides a more robust way to check if an element is in the DOM

Cons:

* Slower execution compared to `isInDOM1`
* Higher chance of errors (although rare)

**Other Considerations**

* The benchmark assumes that the `test-div` element will always be present in the HTML page.
* The performance results may vary depending on the specific use case, browser version, and device configuration.

**Alternatives**

Some alternative approaches to checking if an element is in the DOM include:

* Using a library like jQuery or a similar framework that provides a more robust way to interact with the DOM.
* Implementing a custom check using `Element.prototype.contains()` (although this may not be compatible with older browsers).
* Using a different approach, such as checking if the element's outerHTML matches the current document's HTML.

Is in DOM (version: 0) Benchmark.js

Check if given element is in dom

Comparing performance of: `isInDOM1 vs isInDOM2`

Created: 7 years ago by: Guest

Go to the latest result

isInDOM1

isInDOM2

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Is in DOM (version: 0) Benchmark.js

Check if given element is in dom

Comparing performance of: isInDOM1 vs isInDOM2

Created: 7 years ago by: Guest

Go to the latest result

isInDOM1

isInDOM2

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `isInDOM1 vs isInDOM2`