<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="theList">
<li class="odd">Item 1</li>
<li class="even">Item 2</li>
<li class="odd">Item 3</li>
<li class="even">Item 4</li>
<li class="odd">Item 5</li>
<li class="even">Item 6</li>
<li class="odd">Item 7</li>
<li class="even">Item 8</li>
<li class="odd">Item 9</li>
<li class="even">Item 10</li>
<li class="odd">Item 11</li>
<li class="even">Item 12</li>
<li class="odd">Item 13</li>
<li class="even">Item 14</li>
<li class="odd">Item 15</li>
<li class="even">Item 16</li>
<li class="odd">Item 17</li>
<li class="even">Item 18</li>
<li class="odd">Item 19</li>
<li class="even">Item 20</li>
<li class="odd">Item 21</li>
<li class="even">Item 22</li>
<li class="odd">Item 23</li>
<li class="even">Item 24</li>
<li class="odd">Item 25</li>
<li class="even">Item 26</li>
<li class="odd">Item 27</li>
<li class="even">Item 28</li>
<li class="odd">Item 29</li>
<li class="even">Item 30</li>
</ul>
var els = $('.even');
var els = document.querySelectorAll('.even');
var els = document.getElementsByClassName('even');
var els = $('li.even');
var els = document.querySelectorAll('li.even');
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
jQuery | |
querySelectorAll | |
getElementsByClassName | |
jQuery: mixed selector | |
querySelectorAll: mixed selector |
Test name | Executions per second |
---|---|
jQuery | 32441.8 Ops/sec |
querySelectorAll | 101026.6 Ops/sec |
getElementsByClassName | 441462.1 Ops/sec |
jQuery: mixed selector | 24694.3 Ops/sec |
querySelectorAll: mixed selector | 76593.2 Ops/sec |
Let's dive into the provided benchmark definitions and analyze what is being tested, the options compared, their pros and cons, and other considerations.
Benchmark Definition
The first benchmark definition json represents the overall benchmark that compares various methods of obtaining a group of elements identified by class name. This includes:
Get elements by class: jQuery vs querySelectorAll vs getElementsByClassName (Jquery 3.3.1)
<ul>
) with elements having classes like even
, odd
, etc.Individual Test Cases
The individual test cases represent four separate benchmarks that compare different methods of obtaining elements by class name:
jQuery
var els = $('.even');
(uses jQuery's $.()
method)$()
method to select elements by class name.querySelectorAll
var els = document.querySelectorAll('.even');
(uses the document.querySelectorAll()
method)document.querySelectorAll()
method to select elements by class name.getElementsByClassName
var els = document.getElementsByClassName('even');
(uses the document.getElementsByClassName()
method)document.getElementsByClassName()
method to select elements by class name.jQuery: mixed selector
var els = $('li.even');
(uses jQuery's $()
method with a mixed selector)$()
method with a mixed selector to select elements by class name.Options Compared
The four benchmark cases compare the following options:
$()
methoddocument.querySelectorAll()
methoddocument.getElementsByClassName()
methodPros and Cons
Here are some pros and cons of each option:
$()
methoddocument.querySelectorAll()
methoddocument.getElementsByClassName()
methodOther Considerations
When choosing a method for selecting elements by class name, consider the following factors:
document.querySelectorAll()
and document.getElementsByClassName()
are generally faster than jQuery's $()
method.$()
method.$()
method may be sufficient. However, for more complex selections, document.querySelectorAll()
is a better choice.In conclusion, this benchmark comparison helps us understand the performance characteristics of different methods for selecting elements by class name. By considering factors like performance, browser support, and complexity of selections, you can choose the best approach for your specific use case.