Run results for: getElementByID vs querySelector vs firstChild walk

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser: Firefox 139

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

firstChild attr

855.2M/s

getElementbyId

5.2M/s

querySelector attr

1.8M/s

View exact numbers

Test name	Executions per second
✓ firstChild attr	855,234,368 Ops/sec
getElementbyId	5,234,814 Ops/sec
querySelector attr	1,848,630 Ops/sec

HTML Preparation code:

<div id="app" pico-id="app">Runtime Runtime is the best ever. 4<p class="square" pico-id="$P0">bencmarking: Runtime Total time: 5.00ms<br>Mouse: x = 0, y = 0</p>
    <p>you have <strong class="blue" pico-id="S0">4</strong> likes!! and <b pico-id="B0">3</b> items.</p><button style="background-color: #f31261; cursor: pointer; display: block; color:white;" pico-id="$B0"><span pico-id="SN1">0-1--1</span></button>
    <div class="form-group"><label class="form-label">Name</label><input class="form-input " type="text" placeholder="Press enter key to submit a todo" pico-id="I0">
        <p><strong pico-id="S1"> : 0</strong></p>
    </div><strong pico-id="$S2">Currently selected: </strong>
    <p>Your character is <em pico-id="E0">Your Pokemon Level has found a trainer</em></p>
    <div class="btn-group btn-group-block"><button class="btn btn-primary" pico-id="B1">+Likes</button><button class="btn btn-primary" pico-id="B2">-Dislikes</button></div>
    <div class="btn-group btn-group-block iter-tools"><button class="btn" pico-id="B3">Prepend Todos <span pico-id="S2">4</span></button></div>
</div>

Script Preparation code:

var app = document.getElementById('app')

Tests:

firstChild attr
var spanTxt = app.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.firstChild
querySelector attr
var spanTxt = document.querySelector('[pico-id="S2"]')
getElementbyId
var spanTxt = document.getElementById('S2')

Run results for: getElementByID vs querySelector vs firstChild walk

fastest way to select a dom node

firstChild attr

querySelector attr

getElementbyId