Run results for: Multiple .closest() or complex CSS selector

Run details:

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

Browser: Firefox 135

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Single .closest() with multiple classes, no match

866K/s

Single .closest() with multiple classes, no match (+3 classes)

663K/s

Loop through classes, no match

344K/s

Loop through classes, no match (+3 classes)

240K/s

View exact numbers

Test name	Executions per second
✓ Single .closest() with multiple classes, no match	865,703 Ops/sec
Single .closest() with multiple classes, no match (+3 classes)	662,872 Ops/sec
Loop through classes, no match	343,893 Ops/sec
Loop through classes, no match (+3 classes)	239,829 Ops/sec

HTML Preparation code:

<div>
	<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
				<h2 id="one">One (has no ancestor class)</h2>
	</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>

Script Preparation code:

/*your preparation JavaScript code goes here
one = document.getElementById('one');
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

Single .closest() with multiple classes, no match
one.closest('.apple, .banana, .coconut, .dragonfruit, .eggplant, .fig, .grape');
Loop through classes, no match
['.apple', '.banana', '.coconut', '.dragonfruit', '.eggplant', '.fig', '.grape'].some((className) => one.closest(className));
Single .closest() with multiple classes, no match (plus 3 classes)
one.closest('.apple, .banana, .coconut, .dragonfruit, .eggplant, .fig, .grape, .extra1, .extra2, .extra3');
Loop through classes, no match (plus 3 classes)
['.apple', '.banana', '.coconut', '.dragonfruit', '.eggplant', '.fig', '.grape', '.extra1', '.extra2', '.extra3'].some((className) => one.closest(className));