Run results for: Closest API

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Browser: Chrome 89

Operating system: Mac OS X 11.2.1

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
deepest.closest	918591.9 Ops/sec
highest.closest	5262456.0 Ops/sec
average.closest	1471343.0 Ops/sec

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]')

Run results for: Closest API

Tests the performance of 'closest' API

deepest.closest

highest.closest

average.closest