Benchmark: One Function Selector

HTML Preparation code:

<div id="main">
    <div class="content">
        <form id="searchForm" name="searchForm" onSubmit="dosearch();return false">

            <section id="searchMenu">
                <input type="text" name="searchTerms" id="searchInput" />
                <div id="searchButton"><input type="submit" value="Search" id="submitInput" /></div>
            </section>

            <section id="search-global-engine">
                <div class="search-checkbox">
                    <label class="search-label" for="duckduckgo">
                        <input name="searchEngine" id="duckduckgo" type="checkbox" value="https://duckduckgo.com/?q=" checked />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Duckduckgo</h3>
                        <span class="alt">D</span>
                        <span class="alt">G</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="qwant">
                        <input name="searchEngine" id="qwant" type="checkbox" value="https://www.qwant.com/?l=fr&q=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Qwant</h3>
                        <span class="alt">Q</span>
                        <span class="alt">W</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="startpage">
                        <input name="searchEngine" id="startpage" type="checkbox" value="https://www.startpage.com/do/dsearch?query=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>StartPage</h3>
                        <span class="alt">S</span>
                        <span class="alt">P</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="wikipedia">
                        <input name="searchEngine" id="wikipedia" type="checkbox" value="https://secure.wikimedia.org/wikipedia/fr/wiki/Special:Search?search=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Wikipedia</h3>
                        <span class="alt">W</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="piped">
                        <input name="searchEngine" id="piped" type="checkbox" value="https://piped.kavin.rocks/results?search_query=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Piped</h3>
                        <span class="alt">Y</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="osmaps">
                        <input name="searchEngine" id="osmaps" type="checkbox" value="https://www.openstreetmap.org/search?query=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Openstreetmap</h3>
                        <span class="alt">O</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="qwantmaps">
                        <input name="searchEngine" id="qwantmaps" type="checkbox" value="https://www.qwant.com/maps/?q=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>QwantMaps</h3>
                        <span class="alt">F</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="duckduckgo Images">
                        <input name="searchEngine" id="duckduckgo Images" type="checkbox" value="https://duckduckgo.com/?iax=images&ia=images&q=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>DuckduckgoImages</h3>
                        <span class="alt">D</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="reddit">
                        <input name="searchEngine" id="reddit" type="checkbox" value="http://www.reddit.com/search?q=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Reddit</h3>
                        <span class="alt">R</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="imdb">
                        <input name="searchEngine" id="imdb" type="checkbox" value="http://www.imdb.com/find?q=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>IMDB</h3>
                        <span class="alt">T</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="hackernews">
                        <input name="searchEngine" id="hackernews" type="checkbox" value="https://hn.algolia.com/?sort=byPopularity&prefix=false&page=0&dateRange=all&type=all&query=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>HackerNews</h3>
                        <span class="alt">S</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="whois">
                        <input name="searchEngine" id="whois" type="checkbox" value="http://whois.domaintools.com/" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Whois</h3>
                        <span class="alt">E</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="opensubs">
                        <input name="searchEngine" id="opensubs" type="checkbox" value="http://www.opensubtitles.org/fr/search2/sublanguageid-fre/moviename-" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Opensubtitles</h3>
                        <span class="alt">X</span>
                    </label>
                </div>

                <div class="search-checkbox">
                    <label class="search-label" for="rapidlibrary">
                        <input name="searchEngine" id="rapidlibrary" type="checkbox" value="http://www.podnapisi.net/subtitles/search/?keywords=" />
                        <span class="checkbox-button"><span></span></span>
                        <h3>Podnapisi</h3>
                        <span class="alt">L</span>
                    </label>
                </div>

            </section>
        </form>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Vanilla
document.getElementById("main").style.backgroundColor = "pink"; Array.from(document.getElementsByClassName("search-label")).forEach((e) => { e.style.backgroundColor = "yellow"; }); document.getElementsByClassName("search-label")[5].style.backgroundColor = "black";
JQuery
$("#main").css("background-color", "pink"); $(".search-label").css("background-color", "yellow"); $(".search-label:eq(5)").css("background-color", "black");
Function 1
function getEle(ele, n) { if (ele.split(" ").length === 1) { if (/#/.test(ele)) { return document.getElementById(ele.slice(1)); } else if (typeof n === "undefined") { return Array.from(document.getElementsByClassName(ele.slice(1))); } else { return document.getElementsByClassName(ele.slice(1))[n]; } } else if (typeof n === "undefined") { return document.querySelectorAll(ele); } else { return document.querySelectorAll(ele)[n]; } } getEle("#main").style.backgroundColor = "pink"; getEle(".search-label").forEach((e) => { e.style.backgroundColor = "yellow"; }); getEle(".search-label", 5).style.backgroundColor = "black";
Function 2
function getEle(ele, n) { switch (true) { case ele.split(" ").length === 1 && /#/.test(ele): return document.getElementById(ele.slice(1)); case ele.split(" ").length === 1 && typeof n === "undefined": return Array.from(document.getElementsByClassName(ele.slice(1))); case ele.split(" ").length === 1: return document.getElementsByClassName(ele.slice(1))[n]; case typeof n === "undefined": return document.querySelectorAll(ele); default: return document.querySelectorAll(ele)[n]; } } getEle("#main").style.backgroundColor = "pink"; getEle(".search-label").forEach((e) => { e.style.backgroundColor = "yellow"; }); getEle(".search-label", 5).style.backgroundColor = "black";
Function 3
function getEle(ele) { if (ele.split(" ").length === 1) { if (/#/.test(ele)) { return document.getElementById(ele.slice(1)); } else { return Array.from(document.getElementsByClassName(ele.slice(1))); } } else { return document.querySelectorAll(ele); } } getEle("#main").style.backgroundColor = "pink"; getEle(".search-label").forEach((e) => { e.style.backgroundColor = "yellow"; }); getEle(".search-label")[5].style.backgroundColor = "black";
Function 4
function getEle(ele) { switch (true) { case ele.split(" ").length === 1 && /#/.test(ele): return document.getElementById(ele.slice(1)); case ele.split(" ").length === 1: return Array.from(document.getElementsByClassName(ele.slice(1))); default: return document.querySelectorAll(ele); } } getEle("#main").style.backgroundColor = "pink"; getEle(".search-label").forEach((e) => { e.style.backgroundColor = "yellow"; }); getEle(".search-label")[5].style.backgroundColor = "black";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla
JQuery
Function 1
Function 2
Function 3
Function 4

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: one year ago)

User agent: Mozilla/5.0 (Android 11; Mobile; rv:103.0) Gecko/103.0 Firefox/103.0

Browser/OS: Firefox Mobile 103 on Android

View result in a separate tab

Test name	Executions per second
Vanilla	14715.6 Ops/sec
JQuery	7146.0 Ops/sec
Function 1	14462.5 Ops/sec
Function 2	14225.8 Ops/sec
Function 3	13683.8 Ops/sec
Function 4	13612.7 Ops/sec

One Function Selector (version: 0)

A function to simplify selection of html elements without impacting to much performances .

Comparing performance of: Vanilla vs JQuery vs Function 1 vs Function 2 vs Function 3 vs Function 4

Created: one year ago by: Registered User

Jump to the latest result

Vanilla

JQuery

Function 1

Function 2

Function 3

Function 4

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A