Run results for: GetElementById vs GetElementByTag

Run details:

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

Browser: Firefox 147

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 9 months ago

Benchmark engine: Benchmark.js

GetElementById

1021.9M/s

GetElementByClassname

12.1M/s

GetElementByTag

0/s

View exact numbers

Test name	Executions per second
✓ GetElementById	1,021,888,960 Ops/sec
GetElementByClassname	12,104,671 Ops/sec
GetElementByTag	0 Ops/sec

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;