Benchmark: querySelectorAll vs closest vs closest polyfill

HTML Preparation code:

<div class="mz-collapse--one-active demo--card mz-border--outline">
                    <div class="demo--card-header mz-border--bottom mz-typography--font-bold mz-clickable" data-trigger="collapse" data-target="#demoAccordion1b" aria-expanded="true"><div id="test">Test</div></div>
                    <div class="mz-collapse is-visible" id="demoAccordion1b">
                        <div class="demo--card-content mz-border--bottom">
                            Some quick example text to build on the collapsible title and make up the bulk of the collapsible's content.
                        </div>
                    </div>
                    <div class="demo--card-header mz-border--bottom mz-typography--font-bold mz-clickable" data-trigger="collapse" data-target="#demoAccordion2b" aria-expanded="false">Collapsible group item #2</div>
                    <div class="mz-collapse" id="demoAccordion2b">
                        <div class="demo--card-content mz-border--bottom">
                            Some quick example text to build on the collapsible title and make up the bulk of the collapsible's content.
                        </div>
                    </div>
                    <div class="demo--card-header mz-typography--font-bold mz-clickable" data-trigger="collapse" data-target="#demoAccordion3b" aria-expanded="false">Collapsible group item #3</div>
                    <div class="mz-collapse" id="demoAccordion3b">
                        <div class="demo--card-content mz-border--top">
                            Some quick example text to build on the collapsible title and make up the bulk of the collapsible's content.
                        </div>
                    </div>
                </div>

Tests:

querySelectorAll
let test = document.getElementById("test"); let vtrigger; let triggers = test.querySelectorAll('[data-trigger="collapse"]'); for (let i = 0; i < triggers.length; i++) { let trigger = triggers[i]; if (trigger === evt.target || trigger.contains(evt.target)) { vtrigger = trigger; } }
closest
let test = document.getElementById("test"); let vtrigger = test.closest('[data-trigger="collapse"]');
closest polyfill
let test = document.getElementById("test"); var closest = function(el, attr, c) { // Traverse the DOM up with a while loop while (el.dataset[attr] !== c) { // Increment the loop to the parent node el = el.parentNode; if (!el) { return null; } } // At this point, the while loop has stopped and `el` represents the element that has // the class you specified in the second parameter of the function `clazz` // Then return the matched element return el; } let vtrigger = closest(test, 'trigger', 'collapse');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
closest
closest polyfill

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

Browser/OS: Chrome 81 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	1000120.0 Ops/sec
closest	1526860.0 Ops/sec
closest polyfill	1096926.0 Ops/sec

querySelectorAll vs closest vs closest polyfill (version: 0)

Comparing performance of: querySelectorAll vs closest vs closest polyfill

Created: 3 years ago by: Guest

Jump to the latest result

querySelectorAll

closest

closest polyfill

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A