MeasureThat.net

Run results for: Change text of list items: jQuery vs. vanilla JS

Get the items from a list and change the text of each of them.

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
Chrome 53
Windows
Other
8 years ago
Test name Executions per second
jQuery 5456.3 Ops/sec
Vanilla JS 73413.6 Ops/sec
HTML Preparation code:
​x
 
1
    <ul id="theList">
2
      <li>Item</li>
3
      <li>Item</li>
4
      <li>Item</li>
5
      <li>Item</li>
6
      <li>Item</li>
7
      <li>Item</li>
8
      <li>Item</li>
9
      <li>Item</li>
10
      <li>Item</li>
11
      <li>Item</li>
12
      <li>Item</li>
13
      <li>Item</li>
14
      <li>Item</li>
15
      <li>Item</li>
16
      <li>Item</li>
17
      <li>Item</li>
18
      <li>Item</li>
19
      <li>Item</li>
20
      <li>Item</li>
21
      <li>Item</li>
22
      <li>Item</li>
23
      <li>Item</li>
24
      <li>Item</li>
25
      <li>Item</li>
26
      <li>Item</li>
27
      <li>Item</li>
28
      <li>Item</li>
29
      <li>Item</li>
30
      <li>Item</li>
31
      <li>Item</li>
32
    </ul>
33
​
Tests:

  • jQuery

     
    var els = $('#theList li');
    els.each(function() {
      $(this).text('Changed');
    });
    ​

  • Vanilla JS

     
    var els = document.querySelectorAll('#theList li');
    Array.prototype.slice.call(els).forEach(function(el) {
      el.textContent = 'Changed';
    });
    ​