Run results for: One Function Selector

Run details:

User agent: Mozilla/5.0 (Linux; Android 11; SM-A035F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 104

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
Vanilla	16957.4 Ops/sec
JQuery	6286.7 Ops/sec
Function 1	15621.8 Ops/sec
Function 2	15266.3 Ops/sec
Function 3	11689.9 Ops/sec
Function 4	11381.9 Ops/sec

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";

Run results for: One Function Selector

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

Vanilla

JQuery

Function 1

Function 2

Function 3

Function 4