<div id="test1">1</div>
<div id="test2">2</div>
<div id="test3">3</div>
<div id="test4">4</div>
<div id="test5">5</div>
<div id="test6">6</div>
<div id="test7">7</div>
<div id="test8">8</div>
<div id="test9">9</div>
<div id="test10">10</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
$("#test5");
$("div#test5");
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
find by id | |
find by id and tag |
Test name | Executions per second |
---|---|
find by id | 2213615.5 Ops/sec |
find by id and tag | 136610.2 Ops/sec |
Let's break down the provided JSON benchmark definition.
Benchmark Definition
The benchmark is comparing two different ways to use jQuery to select elements in HTML. Specifically, it's testing:
$("#test5");
- finding an element by its ID using the #
symbol (also known as " IDs" or "class selectors").$("div#test5");
- finding an element by its ID and tag name (div
) using both the #
symbol and a space.Options Compared
The two options being compared are:
.find()
method to find elements by ID, followed by another selector (in this case, no additional selector)..find()
method twice: once with an ID selector (div#test5
) and again with a tag name selector (div
).Pros and Cons
$("#test5");
:$("div#test5");
:Library
The benchmark uses jQuery (a popular JavaScript library for DOM manipulation) to perform the selects. jQuery's .find()
method is used to search for elements within a set of matched elements.
Special JS Feature/Syntax
This benchmark doesn't use any special JavaScript features or syntax, such as async/await, ES6 classes, or destructuring.
Other Alternatives
If you wanted to run this benchmark on other browsers or environments, you could modify the Html Preparation Code
and Script Preparation Code
fields in the Benchmark Definition JSON. For example:
Browser
and DevicePlatform
fields.Keep in mind that running benchmarks requires careful consideration of how your code will behave across different environments and browsers.