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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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: 2 years 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>

Fastest: N/A

Slowest: N/A

No previous run results

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