Benchmark: Multiple .closest() or complex CSS selector

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));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Single .closest() with multiple classes, no match
Loop through classes, no match
Single .closest() with multiple classes, no match (plus 3 classes)
Loop through classes, no match (plus 3 classes)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Single .closest() with multiple classes, no match

844K/s

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

658K/s

Loop through classes, no match

342K/s

Loop through classes, no match (plus 3 classes)

238K/s

View exact numbers

Test name	Executions per second
✓ Single .closest() with multiple classes, no match	843,764 Ops/sec
Single .closest() with multiple classes, no match (plus 3 classes)	657,775 Ops/sec
Loop through classes, no match	342,196 Ops/sec
Loop through classes, no match (plus 3 classes)	238,290 Ops/sec

Multiple .closest() or complex CSS selector (version: 3)

Comparing performance of: `Single .closest() with multiple classes, no match vs Loop through classes, no match vs Single .closest() with multiple classes, no match (plus 3 classes) vs Loop through classes, no match (plus 3 classes)`

Created: one year ago by: Registered User

Go to the latest result

Single .closest() with multiple classes, no match

Loop through classes, no match

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

Loop through classes, no match (plus 3 classes)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Multiple .closest() or complex CSS selector (version: 3)

Comparing performance of: Single .closest() with multiple classes, no match vs Loop through classes, no match vs Single .closest() with multiple classes, no match (plus 3 classes) vs Loop through classes, no match (plus 3 classes)

Created: one year ago by: Registered User

Go to the latest result

Single .closest() with multiple classes, no match

Loop through classes, no match

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

Loop through classes, no match (plus 3 classes)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `Single .closest() with multiple classes, no match vs Loop through classes, no match vs Single .closest() with multiple classes, no match (plus 3 classes) vs Loop through classes, no match (plus 3 classes)`