Benchmark: GetElementById vs GetElementByTag

HTML Preparation code:

<div id="unique" class="unique" name="unique" data-unique="1">test</div>
<custom-tag id="unique-custom" class="unique-custm" name="unique-custom" data-unique-custom="1">unique custom</custom-tag>

Script Preparation code:

var i, imax;
var doc = document;
var customElementRegistry = window.customElements;
customElementRegistry.define("unique-custom", class MyCustomElement extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
  }});

Tests:

GetElementById
var test = doc.getElementById('unique').innerHTML;
GetElementByTag
var formelem = doc.getElementsByTagName('unique-custom')[0].innerHTML;
GetElementByClassname
var test = doc.getElementsByClassName('unique')[0].innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
GetElementById
GetElementByTag
GetElementByClassname

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
GetElementById	886535104.0 Ops/sec
GetElementByTag	0.0 Ops/sec
GetElementByClassname	11920231.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 the provided JSON and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is comparing three JavaScript methods to retrieve an element from an HTML document:

1. `GetElementById`
2. `GetElementByTag` (also known as `getElementsByTagName`)
3. `GetElementByClassname` (using the `getElementsByClassName` method)

**Options Compared**

* **GetElementById**: uses the `getElementById` method, which returns a single element by its ID.
	+ Pros: generally faster and more efficient than other methods when retrieving a single element by ID.
	+ Cons: may fail if multiple elements have the same ID (although this is rare in modern web development).
* **GetElementByTag**: uses the `getElementsByTagName` method, which returns a NodeList of all elements with the specified tag name.
	+ Pros: can be useful for retrieving multiple elements at once.
	+ Cons: slower than `getElementById` since it needs to iterate through all matching elements.
* **GetElementByClassname**: uses the `getElementsByClassName` method, which returns a NodeList of all elements with the specified class name(s).
	+ Pros: can be useful for retrieving multiple elements at once and handling cases where there are multiple classes on an element.
	+ Cons: slower than `getElementById` since it needs to iterate through all matching elements.

**Library Used**

In this benchmark, the custom element library `window.customElements` is used to define a custom HTML element called "unique-custom". This allows us to test the JavaScript methods in isolation from standard HTML elements.

**Special JS Feature or Syntax**

The benchmark uses the `Custom Elements API`, which is a feature introduced in ECMAScript 2015 (ES6) that allows developers to create custom HTML elements. The `customElements.define` method is used to register this custom element, and it's only supported in modern browsers.

**Other Considerations**

* **Browser Support**: This benchmark only runs on desktop browsers with Chrome 117 or later.
* **Execution Count**: The benchmark executes the JavaScript code 100,587,065 times per second, which provides a high level of accuracy for measuring performance differences between the three methods.

**Alternative Approaches**

Other approaches to retrieve elements from an HTML document include:

* Using `querySelector` and `querySelectorAll`, which are part of the DOM API (introduced in ECMAScript 2015)
* Using CSS selectors, such as `#id` or `.class`
* Using other libraries or frameworks that provide element retrieval mechanisms

Related benchmarks:

GetElementById vs GetElementByTag (version: 0)

Comparing performance of: GetElementById vs GetElementByTag vs GetElementByClassname

Created: 2 years ago by: Guest

Jump to the latest result

GetElementById

GetElementByTag

GetElementByClassname

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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