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:91.0) Gecko/20100101 Firefox/91.0

Browser: Firefox 91

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
One large selector with match	48050.1 Ops/sec
Many Small selectors	69757.8 Ops/sec
One large selector without match	173921.5 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)

Run results for: multiple selectors vs multiple matches

One large selector with match

Many Small selectors

One large selector without match