MeasureThat.net

Run results for: Convert Nodelist to Array: Array.slice vs. Spread vs. Array.from

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Firefox 115
Windows 8.1
Desktop
2 months ago
Test name Executions per second
Spread Operator [...] 82743.3 Ops/sec
[].slice.call() 220703.5 Ops/sec
Array.from() 83739.4 Ops/sec
Array.prototype.slice.call() 218947.8 Ops/sec
HTML Preparation code:
AخA
 
1
<div id='parent'>
2
  <div class="child"></div>
3
  <div class="child"></div>
4
  <div class="child"></div>
5
  <div class="child"></div>
6
  <div class="child"></div>
7
  <div class="child"></div>
8
  <div class="child"></div>
9
  <div class="child"></div>
10
  <div class="child"></div>
11
  <div class="child"></div>
12
  <div class="child"></div>
13
  <div class="child"></div>
14
  <div class="child"></div>
15
  <div class="child"></div>
16
  <div class="child"></div>
17
  <div class="child"></div>
18
  <div class="child"></div>
19
  <div class="child"></div>
20
  <div class="child"></div>
21
  <div class="child"></div>
22
  <div class="child"></div>
23
  <div class="child"></div>
24
  <div class="child"></div>
25
  <div class="child"></div>
26
  <div class="child"></div>
27
  <div class="child"></div>
28
  <div class="child"></div>
29
  <div class="child"></div>
30
  <div class="child"></div>
31
  <div class="child"></div>
32
  <div class="child"></div>
33
  <div class="child"></div>
34
  <div class="child"></div>
35
  <div class="child"></div>
36
  <div class="child"></div>
37
  <div class="child"></div>
38
  <div class="child"></div>
39
  <div class="child"></div>
40
  <div class="child"></div>
41
  <div class="child"></div>
42
  <div class="child"></div>
43
  <div class="child"></div>
44
  <div class="child"></div>
45
  <div class="child"></div>
46
  <div class="child"></div>
47
  <div class="child"></div>
48
  <div class="child"></div>
49
  <div class="child"></div>
50
  <div class="child"></div>
51
  <div class="child"></div>
52
  <div class="child"></div>
53
  <div class="child"></div>
54
  <div class="child"></div>
55
  <div class="child"></div>
56
  <div class="child"></div>
57
  <div class="child"></div>
58
  <div class="child"></div>
59
  <div class="child"></div>
60
  <div class="child"></div>
61
  <div class="child"></div>
62
  <div class="child"></div>
63
  <div class="child"></div>
64
  <div class="child"></div>
65
  <div class="child"></div>
66
  <div class="child"></div>
67
  <div class="child"></div>
68
  <div class="child"></div>
69
  <div class="child"></div>
70
  <div class="child"></div>
71
  <div class="child"></div>
72
  <div class="child"></div>
73
  <div class="child"></div>
74
  <div class="child"></div>
75
  <div class="child"></div>
76
  <div class="child"></div>
77
  <div class="child"></div>
78
  <div class="child"></div>
79
  <div class="child"></div>
80
  <div class="child"></div>
81
  <div class="child"></div>
82
  <div class="child"></div>
83
  <div class="child"></div>
84
  <div class="child"></div>
85
  <div class="child"></div>
86
  <div class="child"></div>
87
  <div class="child"></div>
88
  <div class="child"></div>
89
  <div class="child"></div>
90
  <div class="child"></div>
91
  <div class="child"></div>
92
  <div class="child"></div>
93
  <div class="child"></div>
94
  <div class="child"></div>
95
  <div class="child"></div>
96
  <div class="child"></div>
97
  <div class="child"></div>
98
  <div class="child"></div>
99
  <div class="child"></div>
100
  <div class="child"></div>
101
  <div class="child"></div>
102
</div>
Tests:

  • Spread Operator [...]

     
    let arr = [...document.querySelectorAll('.child')];

  • [].slice.call()

     
    let arr = [].slice.call(document.querySelectorAll('.child'));

  • Array.from()

     
    let arr = Array.from(document.querySelectorAll('.child'));

  • Array.prototype.slice.call()

     
    let arr = Array.prototype.slice.call(document.querySelectorAll('.child'));