Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
3 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (6)
Previous results
Fork
Test case name
Result
Vanilla
JQuery
Function 1
Function 2
Function 3
Function 4
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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.
Related benchmarks:
document.querySelectorAll (from document) vs parent.querySelectorAll (from an element)
JQuery: find vs children
compare selector for find checkbox v3
find("input") vs find("[type='checkbox']")
Comments
Confirm delete:
Do you really want to delete benchmark?