Scoped queryselector (v3)

Revision 3 of this benchmark created on

Description

Checks whether scoped queryselectors are faster than document queryselectors

Setup

function button(text) {
	const d = document.createElement("button");
	d.textContent = text;
	return d;
}
function span(children) {
	const d = document.createElement("span");
	d.append(...children);
	return d;
}
const span1 = span([]);
const span2 = span([]);
document.body.append(span1, span2);
for (let i = 0; i < 1000; i++) {
	const sp = span([span([]), span([])]);
	span1.appendChild(sp);
}
for (let i = 0; i < 1000; i++) {
	const btn = button('1');
	btn.setAttribute('inert', '');
	span2.appendChild(span([btn, button('2')]));
}

Teardown

document.querySelectorAll('body > *').forEach(e => e.remove());

Test runner

Ready to run.

Testing in
TestOps/sec
Document querySelector
document.querySelectorAll('[inert]');
ready
Queryselector inside first span
document.body.lastChild.querySelectorAll('[inert]');
ready
Queryselector with scope
document.body.lastChild.querySelectorAll(':scope [inert]');
ready

Revisions

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