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	364967.0 Ops/sec
Closest on class	1388838.2 Ops/sec
Closest on id	1334266.0 Ops/sec
While on reference	4121205.5 Ops/sec
While on id	1099143.4 Ops/sec
Closest separate on id	762035.6 Ops/sec
Closest separate on class	759673.8 Ops/sec
While on type	308824.6 Ops/sec
Closest separate on type	743528.0 Ops/sec
Closest on type	1411130.4 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