Run results for: multiple selectors vs multiple matches

Is it faster to check if a full selector matches an element or if individual selectors match? One matching selector is FASTER than many by a factor of x3 (which only gets worse as more selectors are searched, > 1000 is like x7) HOWEVER, if you need to determine WHICH selectors match, that requires you to do the individual search, at which point your search is actually a quarter worse than just doing the individual search at the start. nullifying much of the savings. If a match will be RARE, it could make sense to do the full string. however, if a match is common, I'd just stick with the individual matching from the start.

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser: Firefox 137

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

One large selector without match

255K/s

Many Small selectors

142K/s

One large selector with match

91K/s

View exact numbers

Test name	Executions per second
✓ One large selector without match	255,118 Ops/sec
Many Small selectors	142,199 Ops/sec
One large selector with match	90,893 Ops/sec

HTML Preparation code:

<div id='el' example="99"></div>

Script Preparation code:

var selectorList = [...Array(100).keys()].map(n => `[example="${n}"]`);

var selectorString = selectorList.join(", ");

function matcher(elem) {
    const shrt = (s) => elem.matches(s);
    return shrt
}

Tests:

One large selector with match
matcher(el)(selectorString) && selectorList.map(matcher(el))
Many Small selectors
selectorList.map(matcher(el))
One large selector without match
matcher(el)(selectorString)