Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
getElementByID vs querySelector vs firstChild walk
fastest way to select a dom node
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=610552" width="100%" height="500px"></iframe>
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
869.2M/s
getElementbyId
5.3M/s
querySelector attr
1.8M/s
View exact numbers
Test name
Executions per second
✓
firstChild attr
869,173,568 Ops/sec
getElementbyId
5,251,464 Ops/sec
querySelector attr
1,846,216 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')