Run results for: While loop vs closest one of many on type/id/class

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser: Chrome 119

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
While on class	448505.5 Ops/sec
Closest on class	1710742.8 Ops/sec
Closest on id	1731029.5 Ops/sec
While on reference	4850302.5 Ops/sec
While on id	1344523.2 Ops/sec
Closest separate on id	1278869.5 Ops/sec
Closest separate on class	1267557.6 Ops/sec

HTML Preparation code:

<section id="target1" class="targetclass1">
    <div class="someclass">
        <div class="someclass">
            <div id="source1"></div>
        </div>
    </div>
</section>

<div class="someclass">
    <div class="someclass">
        <div class="someclass">
            <div class="someclass">
                <div class="someclass">
                    <div class="someclass">
                        <main id="target2" class="targetclass2">
                            <div class="someclass">
                                <div class="someclass">
                                    <div class="someclass">
                                        <div class="someclass">
                                            <div class="someclass">
                                                <div class="someclass">
                                                    <div class="someclass">
                                                        <div id="source2"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<article id="target3" class="targetclass3">
    <div class="someclass">
        <div class="someclass">
            <div class="someclass">
                <div class="someclass">
                    <div class="someclass">
                        <div class="someclass">
                            <div class="someclass">
                                <div class="someclass">
                                    <div class="someclass">
                                        <div class="someclass">
                                            <div class="someclass">
                                                <div class="someclass">
                                                    <div class="someclass">
                                                        <div id="source3"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>


<script>
    Benchmark.prototype.setup = function() {
        var source1 = document.getElementById('source1');
        var source2 = document.getElementById('source2');
        var source3 = document.getElementById('source3');

        var target1 = document.getElementById('target1');
        var target2 = document.getElementById('target2');
        var target3 = document.getElementById('target3');
    };
</script>

Tests:

While on class
call(source1); call(source2); call(source3); function call(source) { while(source) { if (source.classList.contains('targetclass1') || source.classList.contains('targetclass2') || source.classList.contains('targetclass3')) { return true; } source = source.parentElement; } return false; }
Closest on class
call(source1); call(source2); call(source3); function call(source) { return !!source.closest('.targetclass1,.targetclass2,.targetclass3'); }
Closest on id
call(source1); call(source2); call(source3); function call(source) { return !!source.closest('#target1,#target2,#target3'); }
While on reference
call(source1); call(source2); call(source3); function call(source) { while(source) { if (source === target1 || source === target2 || source === target3) { return true; } source = source.parentElement; } return false; }
While on id
call(source1); call(source2); call(source3); function call(source) { while(source) { if (source.id === 'target1' || source.id === 'target2' || source.id === 'target3') { return true; } source = source.parentElement; } return false; }
Closest separate on id
call(source1); call(source2); call(source3); function call(source) { let result = source.closest('#target1'); result = source.closest('#target2') || result; result = source.closest('#target3') || result; return result; }
Closest separate on class
call(source1); call(source2); call(source3); function call(source) { let result = source.closest('.targetclass1'); result = source.closest('.targetclass2') || result; result = source.closest('.targetclass3') || result; return result; }
While on type
call(source1); call(source2); call(source3); function call(source) { while(source) { if (source.nodeName === 'article' || source.nodeName === 'main' || source.nodeName === 'section') { return true; } source = source.parentElement; } return false; }
Closest separate on type
call(source1); call(source2); call(source3); function call(source) { let result = source.closest('article'); result = source.closest('main') || result; result = source.closest('section') || result; return result; }
Closest on type
call(source1); call(source2); call(source3); function call(source) { return source.closest('article,main,section'); }

Run results for: While loop vs closest one of many on type/id/class

While on class

Closest on class

Closest on id

While on reference

While on id

Closest separate on id

Closest separate on class

While on type

Closest separate on type

Closest on type