Benchmark: [compareDocumentPosition vs contains] performance

HTML Preparation code:

<html>
  <head>
  </head>
  <body>
    <div id="div">
    	<div id="a">
   		</div>
    </div>
    <div id="b">
    </div>
  </body>
</html>

Tests:

compareDocumentPosition
const { div, a, b } = window for (let i = 0; i < 100; i++) { let compare = div.compareDocumentPosition(a) compare & 8 compare & 16 compare = div.compareDocumentPosition(b) compare & 8 compare & 16 }
contains
const { div, a, b } = window for (let i = 0; i < 100; i++) { div.contains(a) a.contains(div) div.contains(b) b.contains(div) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
compareDocumentPosition
contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
compareDocumentPosition	42850.8 Ops/sec
contains	43213.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 what is being tested in this benchmark.

**Benchmark Definition**

The benchmark compares the performance of two methods: `compareDocumentPosition` and `contains`, both used to determine if an element (in this case, `div`) contains another element (`a` or `b`). These methods are part of the Document Object Model (DOM) and are used extensively in web development.

**Options Compared**

The benchmark compares two approaches:

1. **compareDocumentPosition**: This method returns a 16-bit integer that represents the relationship between the element's root node and the nodes referenced by the `contains` method. The values can be:
	* 0: Neither node is contained
	* 1: The first node is contained in the second
	* 2: The second node is contained in the first
	* 4: The first node is an ancestor of the second
	* 8: The second node is an ancestor of the first
	* 16: Both nodes are ancestors of each other
2. **contains**: This method returns a boolean indicating whether one element contains another.

**Pros and Cons**

**compareDocumentPosition**:

Pros:

* More efficient, as it only requires a single operation to determine the relationship between elements.
* Can be used in more complex scenarios where multiple containment relationships need to be checked.

Cons:

* Returns an integer value that may require additional processing to understand its meaning.
* May not be as intuitive for developers who are not familiar with this method.

**contains**:

Pros:

* More straightforward and easy to understand, especially for developers without prior experience with `compareDocumentPosition`.
* Returns a simple boolean value indicating containment.

Cons:

* Requires two operations (one for each element) to determine containment.
* May be less efficient than `compareDocumentPosition` in some cases.

**Other Considerations**

When using these methods, it's essential to consider the following:

* The method used can affect the performance of your code, especially if you need to perform frequent checks for containment relationships.
* Make sure to handle edge cases, such as when an element contains no other elements or when two elements are siblings.

**Library and Purpose**

In this benchmark, `window.div` is assumed to be a reference to a DOM element. The `div` object has a `compareDocumentPosition` method that takes another element as an argument. This method returns the result of the comparison. Additionally, `div.contains()` is used as a convenience method to check containment.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. Both methods (`compareDocumentPosition` and `contains`) are standard DOM methods that have been part of JavaScript for a long time.

**Alternatives**

Other alternatives to these methods include:

* Using CSS to determine containment relationships, such as using the `:contains` pseudo-class.
* Implementing custom logic to check containment relationships.
* Using other libraries or frameworks that provide similar functionality.

Related benchmarks:

[compareDocumentPosition vs contains] performance (version: 0)

Comparing performance of: compareDocumentPosition vs contains

Created: 2 years ago by: Guest

Jump to the latest result

compareDocumentPosition

contains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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