MeasureThat.net

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

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0
Firefox 135
Mac OS X 10.15
Desktop
one month ago
Test name Executions per second
Single .closest() with multiple classes, no match 843764.2 Ops/sec
Loop through classes, no match 342196.2 Ops/sec
Single .closest() with multiple classes, no match (plus 3 classes) 657774.8 Ops/sec
Loop through classes, no match (plus 3 classes) 238290.2 Ops/sec
HTML Preparation code:
AخA
 
1
<div>
2
    <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>
3
                <h2 id="one">One (has no ancestor class)</h2>
4
    </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>
5
</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));