querySelector vs getElementById (v2)

Revision 2 of this benchmark created on

Description

Performance benchmark

Preparation HTML

<div class="container">
   <div id="search"></div>
   <div id="toolbar"></div>
</div>

Setup

const TIMES = 1000;
const container = document.querySelector(".container");

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
for (let i = 0; i < TIMES; i++) {
	const element = document.getElementById("search");
}
ready
querySelector
for (let i = 0; i < TIMES; i++) {
	const element = container.querySelector("#search");
}
ready
firstElementChild
for (let i = 0; i < TIMES; i++) {
	const element = container.firstElementChild;
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.