Benchmark: nodeType vs instanceof

Script Preparation code:

var xs = [];
var n = 0;

for (let i = 0; i < 1000; ++i) {
  xs[i] = (Math.random() > .5) ? document.createElement(`a`) : document.createTextNode(``);
};

Tests:

nodeType
n += (xs[(Math.random() * 1000)|0].nodeType === Node.ELEMENT_NODE)|0;
instanceof
n += ((xs[(Math.random() * 1000)|0]) instanceof HTMLElement)|0;
nodeType literal
n += (xs[(Math.random() * 1000)|0].nodeType === 1)|0;

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 22 runs

nodeType literal

5.6M/s

nodeType

4.6M/s

instanceof

4.0M/s

Fastest: nodeType literal (1.4x faster)

View exact numbers

✓ nodeType literal: 5,614,644 ops/sec
• nodeType: 4,561,516 ops/sec
• instanceof: 3,965,375 ops/sec

Firefox 12 runs

nodeType

38.5M/s

nodeType literal

37.9M/s

instanceof

26.8M/s

Fastest: nodeType (1.4x faster)

View exact numbers

✓ nodeType: 38,493,148 ops/sec
• nodeType literal: 37,933,132 ops/sec
• instanceof: 26,783,040 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
nodeType
instanceof
nodeType literal

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Ubuntu

View result in a separate tab

nodeType literal

53.2M/s

nodeType

52.6M/s

instanceof

33.3M/s

View exact numbers

Test name	Executions per second
✓ nodeType literal	53,234,760 Ops/sec
nodeType	52,586,720 Ops/sec
instanceof	33,341,248 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that tests three different approaches to check if an object is of type `Element` in a browser environment:

1. **`nodeType === Node.ELEMENT_NODE`**: This approach checks if the `nodeType` property of an element node is equal to `Node.ELEMENT_NODE`, which is a constant defined in the ECMAScript standard.
2. **`instanceof HTMLElement`**: This approach uses the `instanceof` operator to check if an object is an instance of the `HTMLElement` class.
3. **`nodeType === 1`**: This approach checks if the `nodeType` property is equal to a literal value of 1, which is also a constant defined in the ECMAScript standard.

**Options comparison**

The three approaches have different pros and cons:

* **`nodeType === Node.ELEMENT_NODE`**: Pros:
	+ Fast, as it directly checks a constant value.
	+ Can be optimized by the browser's interpreter.
Cons:
	+ May not work correctly for other types of nodes (e.g., text nodes).
* **`instanceof HTMLElement`**: Pros:
	+ More accurate and inclusive, as it checks if an object is an instance of any class that inherits from `HTMLElement`.
Cons:
	+ Generally slower than the first approach.
* **`nodeType === 1`**: Pros:
	+ Similar to the first approach, but with a different constant value.
Cons:
	+ May not work correctly for other types of nodes (e.g., text nodes).

**Library and special JS features**

The benchmark uses no external libraries or special JavaScript features.

**Other alternatives**

To achieve similar results, you could also use:

* `Element.prototype.contains.call(obj)`: This approach checks if an object is contained within an element. While it may not be the most accurate way to check for element nodes, it can be faster than using `instanceof`.
* `obj.constructor === HTMLElement`: This approach uses the constructor property of an object to check if it's an instance of a class. However, this method has its own set of limitations and potential issues.

Keep in mind that the choice of approach ultimately depends on your specific use case and performance requirements.

**Benchmark preparation code explanation**

The script preparation code creates an array `xs` containing 1000 elements: either DOM text nodes or document-created anchor elements (`<a>`) with a random type. The purpose is to create a diverse set of objects that will be used in the benchmarking process.

The individual test cases are defined as separate benchmarks, each testing one specific approach:

* `nodeType`
* `instanceof`
* `nodeType literal`

Each benchmark defines a simple script that runs a loop 1000 times, pushing the result of each operation onto a counter variable (`n`). The resulting values from these operations are then compared to determine which approach is faster.

nodeType vs instanceof (version: 0)

Comparing performance of: `nodeType vs instanceof vs nodeType literal`

Created: 6 years ago by: Registered User

Go to the latest result

nodeType

instanceof

nodeType literal

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 22 runs

Firefox 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

nodeType vs instanceof (version: 0)

Comparing performance of: nodeType vs instanceof vs nodeType literal

Created: 6 years ago by: Registered User

Go to the latest result

nodeType

instanceof

nodeType literal

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 22 runs

Firefox 12 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: `nodeType vs instanceof vs nodeType literal`