<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<div id="testElement"></div>
function getElement(a,b,c){var d;return void 0==b&&(d=document.getElementById(a)||document.querySelector(a)),null==d&&(0==b?(d=document.getElementsByClassName(a),0==d.length&&(d=document.getElementsByTagName(a)),0==d.length&&(d=document.querySelectorAll(a)),0==d.length&&(d=getElementsByClassName(a))):(c=null==c?0:c,d=document.getElementsByClassName(a)[c]||document.getElementsByTagName(a)[c]||document.querySelectorAll(a)[c]||getElementsByClassName(a)[c])),d}
var el = getElementByID("testElement");
var className = el.className;
var el = $("#testElement")[0];
var className = el.className;
var el = getElement("testElement");
var className = el.className;
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
vanilla | |
jquery | |
custom function |
Test name | Executions per second |
---|---|
vanilla | 0.0 Ops/sec |
jquery | 510573.6 Ops/sec |
custom function | 1524631.5 Ops/sec |
What is being tested?
The provided benchmark measures the performance of different approaches to retrieve an element's class name in JavaScript. Specifically, it compares three methods:
getElementById
, getElementsByClassName
) without any libraries.getElement
function.Options compared:
Pros and cons of each approach:
Library usage:
The benchmark uses the jQuery library to provide the $
alias for accessing elements and their properties. The custom function also leverages jQuery under the hood.
Special JavaScript features/syntax:
None mentioned in the provided benchmark definition. However, it's worth noting that modern JavaScript engines have implemented various features like WebAssembly, async/await, and arrow functions, which might not be directly relevant to this specific benchmark.
Other alternatives:
Keep in mind that the choice of approach depends on the specific use case, project requirements, and personal preference.