Benchmark: Closest API - MeasureThat.net

HTML Preparation code:

<div data-cosmos-mode="dark">
    <cosmos-button id="highest"></cosmos-button>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div>
                                                        <div>
                                                            <div>
                                                                <cosmos-button id="average"></cosmos-button>
                                                                <div>
                                                                    <div>
                                                                        <div>
                                                                            <div>
                                                                                <div>
                                                                                    <div>
                                                                                        <div>
                                                                                            <div>
                                                                                                <div>
                                                                                                    <div>
                                                                                                        <div>
                                                                                                            <div>
                                                                                                                <div>
                                                                                                                    <cosmos-button id="deepest"></cosmos-button>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

Script Preparation code:

var deepest = document.querySelector('#deepest');
var average = document.querySelector('#average');
var highest = document.querySelector('#highest');

Tests:

deepest.closest
deepest.closest('[data-cosmos-mode]')
highest.closest
highest.closest('[data-cosmos-mode]')
average.closest
average.closest('[data-cosmos-mode]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
deepest.closest
highest.closest
average.closest

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/89.0.4389.90 Safari/537.36

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
deepest.closest	695830.7 Ops/sec
highest.closest	3242400.0 Ops/sec
average.closest	1083151.0 Ops/sec

Closest API (version: 0)

Tests the performance of 'closest' API

Comparing performance of: deepest.closest vs highest.closest vs average.closest

Created: 3 years ago by: Guest

Jump to the latest result

deepest.closest

highest.closest

average.closest

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A