Benchmark: jQuery.contains() vs. Node.contains()

HTML Preparation code:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<div id="outer">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div id="inner">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div id="outer2">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div id="inner2">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Script Preparation code:

var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
var inner2 = document.getElementById("inner2");
var outer2 = document.getElementById("outer2");

Tests:

jQuery.contains()
var x = jQuery.contains(outer, inner) var y = jQuery.contains(outer, inner2) var z = jQuery.contains(outer2, inner) var a = jQuery.contains(outer2, inner2)
Node.contains()
var x = outer.contains(inner) var y = outer.contains(inner2) var z = outer2.contains(inner) var a = outer2.contains(inner2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery.contains()
Node.contains()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
jQuery.contains()	1382597.5 Ops/sec
Node.contains()	1970337.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**What is being tested?**

The provided benchmark tests two different ways to check if an element contains another element: jQuery's `contains()` method and the built-in `Node.contains()` method.

In the first test case, `jQuery.contains()`, the script uses jQuery's `contains()` function to check if the `inner` element is contained within the `outer` element. The same test is repeated with the `inner2` element. In contrast, the second test case, `Node.contains()`, uses the built-in `Node.contains()` method to achieve the same result.

**Options being compared**

The benchmark compares two options:

1. **jQuery's contains() method**: This method is part of the jQuery library and is used to check if an element is contained within another element.
2. **Built-in Node.contains() method**: This method is a built-in function in JavaScript that checks if one element is contained within another.

**Pros and Cons**

Here are some pros and cons of each approach:

* **jQuery's contains() method**:
	+ Pros: Easy to use, widely supported, and often comes with other jQuery benefits (e.g., DOM manipulation).
	+ Cons: Adds an extra dependency on the jQuery library, which can be slow to load and may not be necessary for all projects.
* **Built-in Node.contains() method**:
	+ Pros: Fast, lightweight, and doesn't add any extra dependencies.
	+ Cons: May require more manual effort to implement and maintain.

**Library usage**

In this benchmark, jQuery is used as a library to provide the `contains()` function. This means that users who want to use this test case must include the jQuery library in their project.

**Special JS feature or syntax**

There are no special JavaScript features or syntax being tested here. The benchmark only involves using the built-in `Node.contains()` method and jQuery's `contains()` function.

**Other alternatives**

If you're interested in exploring alternative methods, here are a few options:

1. **Element.contains()**: This method is similar to `Node.contains()` but is specific to the DOM API.
2. **String.includes()**: If you're only checking if an element contains another element as strings (e.g., text content), this method might be faster and more efficient.

Keep in mind that these alternatives may not provide exactly the same results as the built-in `Node.contains()` or jQuery's `contains()` methods, so they should be used with caution.

Related benchmarks:

jQuery.contains() vs. Node.contains() (version: 0)

Comparing performance of: jQuery.contains() vs Node.contains()

Created: 5 years ago by: Guest

Jump to the latest result

jQuery.contains()

Node.contains()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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