Benchmark: While loop vs closest one of many on type/id/class

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Related benchmarks:

While loop vs closest one of many on type/id/class (version: 1)

Comparing performance of: While on class vs Closest on class vs Closest on id vs While on reference vs While on id vs Closest separate on id vs Closest separate on class vs While on type vs Closest separate on type vs Closest on type

Created: one year ago by: Registered User

Jump to the latest result

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):