Benchmark: tagName.toLowerCase() vs instanceof

Script Preparation code:

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

Tests:

instanceof
n += ((xs[(Math.random() * 1000)|0]) instanceof HTMLDivElement)|0;
tagName.toLowerCase()
n += (xs[(Math.random() * 1000)|0].tagName.toLowerCase() === `div`)|0;
nodeName.toLowerCase()
n += (xs[(Math.random() * 1000)|0].nodeName.toLowerCase() === `div`)|0;
localName
n += (xs[(Math.random() * 1000)|0].localName === `div`)|0;
__proto__
n += ((xs[(Math.random() * 1000)|0]).__proto__ === HTMLDivElement.prototype)|0;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
instanceof
tagName.toLowerCase()
nodeName.toLowerCase()
localName
__proto__

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
instanceof	12046872.0 Ops/sec
tagName.toLowerCase()	9732818.0 Ops/sec
nodeName.toLowerCase()	9937545.0 Ops/sec
localName	11190907.0 Ops/sec
__proto__	14373758.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches in JavaScript can be an interesting topic.

The benchmark provided tests the performance of four different methods for comparing the type or class of a DOM element: `instanceof`, `tagName.toLowerCase()`, `nodeName.toLowerCase()`, and `localName`. The test case also includes a comparison using the deprecated `__proto__` property, which is not recommended in modern JavaScript.

Let's break down each method:

1. **instanceof**: This operator checks if an object is an instance of a particular constructor function. In this case, it's used to check if the created DOM element is an instance of `HTMLDivElement`. While this approach provides precise information about the class of the element, it can be slower than other methods due to the overhead of dynamic typing and runtime checks.
2. **tagName.toLowerCase()**: This method returns the lowercase version of the tag name (e.g., "div" for `<div>`) of a DOM element. While it may seem like a simple way to compare, it's not exactly equivalent to using `instanceof`, as it can return false positives for elements with non-standard or custom tag names.
3. **nodeName.toLowerCase()**: Similar to the previous method, this approach returns the lowercase version of the node name (including namespace prefixes). This may provide more accurate results than using just the tag name, but still has limitations due to potential false positives.
4. **localName**: This method returns the local part of an element's prefix (e.g., "div" for `<div>`) and is specific to XML namespaces. In a DOM context, this can be useful for comparing the type of element without considering namespace prefixes.

Pros and Cons:

* `instanceof`:
	+ Pros: Precise information about class.
	+ Cons: Can be slower due to dynamic typing and runtime checks.
* `tagName.toLowerCase()` and `nodeName.toLowerCase()`:
	+ Pros: Simple, easy to implement, and can provide good results for common use cases.
	+ Cons: May return false positives or not match expected results for certain elements or namespace prefixes.
* `localName`:
	+ Pros: Useful for comparing element types without considering namespaces, but may be less familiar to developers without XML experience.

The test case using `__proto__` is deprecated and should be avoided in modern JavaScript. This property can lead to confusing behavior and potential security vulnerabilities due to its reliance on internal implementation details of the DOM object.

Other alternatives:

* **DOMTokenList**: This API provides a more precise way to check if an element matches a particular token or class, using methods like `matches` (now deprecated) or `classList.contains`.
* **Element.prototype.classList**: This property allows developers to inspect and manipulate the classes of an element's prototype chain, providing a more precise way to compare element types.

In summary, while each method has its pros and cons, using `instanceof` provides the most precise information about class, followed closely by `localName`. The other methods may be sufficient for simple use cases but should be used with caution due to potential false positives or limitations.

Related benchmarks:

tagName.toLowerCase() vs instanceof (version: 0)

Comparing performance of: instanceof vs tagName.toLowerCase() vs nodeName.toLowerCase() vs localName vs proto

Created: one year ago by: Guest

Jump to the latest result

instanceof

tagName.toLowerCase()

nodeName.toLowerCase()

localName

proto

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

tagName.toLowerCase() vs instanceof (version: 0)

Comparing performance of: instanceof vs tagName.toLowerCase() vs nodeName.toLowerCase() vs localName vs __proto__

Created: one year ago by: Guest

Jump to the latest result

instanceof

tagName.toLowerCase()

nodeName.toLowerCase()

localName

__proto__

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: instanceof vs tagName.toLowerCase() vs nodeName.toLowerCase() vs localName vs proto

proto