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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

It looks like you have a JSON response from a benchmarking test, comparing the performance of different JavaScript functions for selecting elements on a web page.

To answer your question, I'll analyze the latest benchmark result:

**Function 1**: Vanilla (no custom function)
**ExecutionsPerSecond**: 14462.5

This suggests that using vanilla JavaScript methods for element selection is still the most efficient approach.

**Function 2**: Custom function with a simple switch statement
**ExecutionsPerSecond**: 14225.7919921875

The custom function performs slightly worse than vanilla, but not by much. This might be due to the overhead of the additional logic in the switch statement.

**Function 3**: Custom function with a more complex switch statement
**ExecutionsPerSecond**: 13683.7919921875

This function still outperforms the vanilla method, although its execution rate is lower than Function 2's.

**Function 4**: Custom function with a default case in the switch statement
**ExecutionsPerSecond**: 13612.689453125

The addition of a default case in the switch statement has a minor negative impact on performance.

**JQuery**: Using jQuery for element selection
**ExecutionsPerSecond**: 7146.04443359375

This suggests that relying on a library like jQuery can significantly increase execution time, even if it provides some convenience features.

Keep in mind that these results are specific to the test environment and may not be representative of other scenarios. However, they do provide insight into the relative performance characteristics of different JavaScript functions for element selection.

Latest run results:

Run details: (Test run date: 2 years 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

Related benchmarks:

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: 2 years 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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):