query performance

Benchmark created on

Description

compare quering by some kinds of selector performance

Preparation HTML

<div id="app"></div>

Setup

const appEl = document.querySelector('#app');
for(let i = 0; i < 1000; i++) {
	const element = document.createElement('div');
	element.innerHTML = `<div id="123">
	<div uuid="123" data-uuid="123" v-uuid="123"></div>
	<div uuid="234" data-uuid="234" v-uuid="234"></div>
</div>`;
	appEl.appendChild(element);
}

Test runner

Ready to run.

Testing in
TestOps/sec
test '[uuid="123"]'
const appEl = document.querySelector('#app');
const list = appEl.querySelectorAll('[uuid="123"]');
ready
test '[data-uuid="123"]'
const appEl = document.querySelector('#app');
const list = appEl.querySelectorAll('[data-uuid="123"]');
ready
test '[v-uuid="123"]'
const appEl = document.querySelector('#app');
const list = appEl.querySelectorAll('[v-uuid="123"]');
ready

Revisions

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