Benchmark: instanceof vs .prototype.isPrototypeOf vs .nodeName vs Object.prototype.toString.call vs objType vs objTypeS

instanceof vs .prototype.isPrototypeOf vs .nodeName vs Object.prototype.toString.call vs objType vs objTypeS (version: 0)

Ways of detecting if a variable contains an iframe

Comparing performance of: IFrame - instanceof vs IFrame - .prototype.isPrototypeOf vs IFrame - .nodeName vs IFrame - Object.prototype.toString.call vs IFrame - objType vs IFrame - objTypeS

Created: 3 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<a id='' href='#' />
<div id=''></div>
<a id='' href='#' />
<div id=''></div>
<iframe></iframe>

Script Preparation code:

{
  const objTMap={Array:"A",Boolean:"B",Date:"D",Function:"F",HTMLCollection:"HC",HTMLDocument:"HTDoc",HTMLIFrameElement:"HTIfr",NodeList:"NL",Null:"NU",Number:"N",Promise:"P",RegExp:"R",String:"S",Undefined:"UD"},jQ=typeof jQuery==="function";
  objType=o=>Object.prototype.toString.call(o).slice(8,-1),
  objTypeS=o=>{
    let t=objType(o);
    return Object.hasOwn(objTMap,t)                       ?(t=objTMap[t],t==="N"&&Number.isNaN(o)?"NaN":t)
           :t.slice(0,4)==="HTML"&&t.slice(-7)==="Element"?"HT"+t.slice(4,-7)
           :jQ&&jQuery.prototype.isPrototypeOf(o)         ?"JQ"
                                                          :t
  },
  objTypeL=o=>{
    let t=objType(o);
    return t==="Number"                                   ?(Number.isNaN(o)?"NaN":t)
           :jQ&&jQuery.prototype.isPrototypeOf(o)         ?"JQ"
                                                          :t
  }
}
var typInStr = "HTMLIFrameElement";
var types = {
  array: [1,2,3],
  number: 123,
  string: '123',
  map: new Map([[1,1],[2,2],[3,3]]),
  set: new Set([1,2,3]),
  buffer: new ArrayBuffer([1,2,3]),
  boolean: true,
  arrow: () => {},
  function: function () {},
  object: {},
  u8: new Uint8Array(),
  u16: new Uint16Array(),
  u32: new Uint32Array(),
  i8: new Int8Array(),
  i16: new Int16Array(),
  i32: new Int32Array(),
  regex: /\d/,
  nodelist: document.querySelectorAll("a"),
  jquery: jQuery("a"),
  iframe: document.querySelector("iframe")
}

var keys = Object.keys(types)

Tests:

IFrame - instanceof
keys.map(key => (types[key] instanceof HTMLIFrameElement))
IFrame - .prototype.isPrototypeOf
keys.map(key => HTMLIFrameElement.prototype.isPrototypeOf(types[key]))
IFrame - .nodeName
keys.map(key => (types[key]?.nodeName === "IFRAME"))
IFrame - Object.prototype.toString.call
keys.map(key => Object.prototype.toString.call(types[key]) === "[object HTMLIFrameElement]")
IFrame - objType
keys.map(key => objType(types[key]) === "HTMLIFrameElement")
IFrame - objTypeS
keys.map(key => objTypeS(types[key]) === "HTIfr")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
IFrame - instanceof
IFrame - .prototype.isPrototypeOf
IFrame - .nodeName
IFrame - Object.prototype.toString.call
IFrame - objType
IFrame - objTypeS

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:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
IFrame - instanceof	1837829.0 Ops/sec
IFrame - .prototype.isPrototypeOf	1363616.9 Ops/sec
IFrame - .nodeName	905005.6 Ops/sec
IFrame - Object.prototype.toString.call	391527.5 Ops/sec
IFrame - objType	356447.5 Ops/sec
IFrame - objTypeS	168462.3 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 their pros and cons.

**Benchmark Definition**

The benchmark is designed to compare six different ways of detecting if an object contains an `iframe` element:

1. `instanceof HTMLIFrameElement`
2. `Object.prototype.isPrototypeOf(types[key])`
3. `types[key].nodeName === "IFRAME"`
4. `Object.prototype.toString.call(types[key]) === "[object HTMLIFrameElement]"`
5. `objType(types[key]) === "HTMLIFrameElement"`
6. `objTypeS(types[key]) === "HTIfr"`

**What's being tested?**

Each test case is designed to measure the performance of a specific method for detecting if an object contains an `iframe` element.

**Options compared**

Here's a brief overview of each option:

1. **`instanceof HTMLIFrameElement`**: This checks if the object is an instance of `HTMLIFrameElement`, which means it inherits from that constructor.
2. **`.prototype.isPrototypeOf(types[key])`**: This method checks if the prototype of the object (`types[key]`) contains a reference to `HTMLIFrameElement`.
3. **`types[key].nodeName === "IFRAME"`**: This simple string comparison checks if the `nodeName` property of the object is set to `"IFRAME"`, which is a common attribute for `iframe` elements.
4. **`.toString.call(types[key]) === "[object HTMLIFrameElement]"`**: This method calls `Object.prototype.toString()` on the object (`types[key]`) and checks if its string representation contains the substring `[object HTMLIFrameElement]`.
5. **`objType(types[key]) === "HTMLIFrameElement"`**: This custom function returns a standardized string representation of the object's type, which is set to `"HTMLIFrameElement"`.
6. **`objTypeS(types[key]) === "HTIfr"`**: Another custom function that returns a standardized string representation of the object's type, but this time it's specifically designed for `iframe` elements and returns `"HTIfr"`.

**Pros and Cons**

Here's a brief analysis of each option:

1. **`instanceof HTMLIFrameElement`**: Pros: Fast, accurate, and reliable. Cons: May not work for objects that inherit from `HTMLIFrameElement`.
2. **`.prototype.isPrototypeOf(types[key])`**: Pros: Fast, but may be affected by prototype chaining. Cons: Can be slower than `instanceof` due to the additional overhead.
3. **`types[key].nodeName === "IFRAME"`**: Pros: Simple and fast, but can be vulnerable to name changes or typos. Cons: May not work if the object doesn't have a consistent `nodeName`.
4. **`.toString.call(types[key]) === "[object HTMLIFrameElement]"`**: Pros: Fast and reliable, but relies on `Object.prototype.toString()` which may not always produce the expected result.
5. **`objType(types[key]) === "HTMLIFrameElement"`**: Pros: Customizable and standardized string representation. Cons: May be slower due to custom implementation.
6. **`objTypeS(types[key]) === "HTIfr"`**: Pros: Fast, accurate, and specifically designed for `iframe` elements. Cons: Limited to the specific use case.

The benchmark results show that `objTypeS(types[key]) === "HTIfr"` is generally the fastest option, followed closely by `.prototype.isPrototypeOf(types[key])`. However, it's essential to note that this analysis only considers the performance aspect and doesn't take into account other factors like accuracy or maintainability.

Related benchmarks: