JSFiddle - React, Tailwind, and code Playground

by Vladimir Agafonov

JavaScript

var html,
	t0,
	t1,
	a,
	sum,
	result = [],
	numberOfElements = 10000,
	numberOfIterations = 100;

function test(selectors){
	for(var s = 0, length = selectors.length; s < length; s++){
		a = t0 = t1 = null;
		sum = 0;
		html = ''
		
		for(var n = numberOfElements; --n !== 0;){
			html += '<div class="test" id="test' + n + '" data-test=""></div>';
		}
		
		document.body.innerHTML = html;
		
		for(var i = numberOfIterations; --i !== 0;){
			t0 = performance.now();
			a = document.querySelectorAll(selectors[s]);
			t1 = performance.now();
			sum += (t1 - t0);
		}
		
		result.push({
			time: sum / numberOfIterations,
			selector: selectors[s]
		});
	}
	
	result.sort(function(a, b){
		return a.time - b.time;
	});
	
	console.table(result, ['time', 'selector']);
}

test([
	'body *',
	'body [data-test = "test"]',
	'body > [data-test = "test"]',
	'[data-test = "test"]',
	'body [data-test]',
	'body > [data-test]',
	'[data-test]',
	'body .test',
	'body > .test',
	'.test',
	'body div',
	'body > div',
	'div',
	'body #test99',
	'body > #test99',
	'#test99'
]);