MeasureThat.net

 DOM Size matters (version: 0)

Comparing performance of: find single element vs find multiple elements

Created: 4 years ago by: Guest
Jump to the latest result
HTML Preparation code:
​x
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
    <div class="product-box mhl mvl ptxs">
9
        <div class="image phl mtn"></div>
10
        <div class="name mtl"></div>
11
        <div class="subline mtl"></div>
12
        <div class="price tml text-danger"></div>
13
        <button class="btn-block btn-primary mtl"></button>
14
    </div>
15
​
16
    <div class="product-box mhl mvl ptxs">
17
        <div class="image phl mtn"></div>
18
        <div class="name mtl"></div>
19
        <div class="subline mtl"></div>
20
        <div class="price tml text-danger"></div>
21
        <button class="btn-block btn-primary mtl"></button>
22
    </div><div class="product-box mhl mvl ptxs">
23
        <div class="image phl mtn"></div>
24
        <div class="name mtl"></div>
25
        <div class="subline mtl"></div>
26
        <div class="price tml text-danger"></div>
27
        <button class="btn-block btn-primary mtl"></button>
28
    </div><div class="product-box mhl mvl ptxs">
29
        <div class="image phl mtn"></div>
30
        <div class="name mtl"></div>
31
        <div class="subline mtl"></div>
32
        <div class="price tml text-danger"></div>
33
        <button class="btn-block btn-primary mtl"></button>
34
    </div><div class="product-box mhl mvl ptxs">
35
        <div class="image phl mtn"></div>
36
        <div class="name mtl"></div>
37
        <div class="subline mtl"></div>
38
        <div class="price tml text-danger"></div>
39
        <button class="btn-block btn-primary mtl"></button>
40
    </div><div class="product-box mhl mvl ptxs">
41
        <div class="image phl mtn"></div>
42
        <div class="name mtl"></div>
43
        <div class="subline mtl"></div>
44
        <div class="price tml text-danger"></div>
45
        <button class="btn-block btn-primary mtl"></button>
46
    </div><div class="product-box mhl mvl ptxs">
47
        <div class="image phl mtn"></div>
48
        <div class="name mtl"></div>
49
        <div class="subline mtl"></div>
50
        <div class="price tml text-danger"></div>
51
        <button class="btn-block btn-primary mtl"></button>
52
    </div><div class="product-box mhl mvl ptxs">
53
        <div class="image phl mtn"></div>
54
        <div class="name mtl"></div>
55
        <div class="subline mtl"></div>
56
        <div class="price tml text-danger"></div>
57
        <button class="btn-block btn-primary mtl"></button>
58
    </div><div class="product-box mhl mvl ptxs">
59
        <div class="image phl mtn"></div>
60
        <div class="name mtl"></div>
61
        <div class="subline mtl"></div>
62
        <div class="price tml text-danger"></div>
63
        <button class="btn-block btn-primary mtl"></button>
64
    </div><div class="product-box mhl mvl ptxs">
65
        <div class="image phl mtn"></div>
66
        <div class="name mtl"></div>
67
        <div class="subline mtl"></div>
68
        <div class="price tml text-danger"></div>
69
        <button class="btn-block btn-primary mtl"></button>
70
    </div><div class="product-box mhl mvl ptxs">
71
        <div class="image phl mtn"></div>
72
        <div class="name mtl"></div>
73
        <div class="subline mtl"></div>
74
        <div class="price tml text-danger"></div>
75
        <button class="btn-block btn-primary mtl"></button>
76
    </div><div class="product-box mhl mvl ptxs">
77
        <div class="image phl mtn"></div>
78
        <div class="name mtl"></div>
79
        <div class="subline mtl"></div>
80
        <div class="price tml text-danger"></div>
81
        <button class="btn-block btn-primary mtl"></button>
82
    </div><div class="product-box mhl mvl ptxs">
83
        <div class="image phl mtn"></div>
84
        <div class="name mtl"></div>
85
        <div class="subline mtl"></div>
86
        <div class="price tml text-danger"></div>
87
        <button class="btn-block btn-primary mtl"></button>
88
    </div><div class="product-box mhl mvl ptxs">
89
        <div class="image phl mtn"></div>
90
        <div class="name mtl"></div>
91
        <div class="subline mtl"></div>
92
        <div class="price tml text-danger"></div>
93
        <button class="btn-block btn-primary mtl"></button>
94
    </div><div class="product-box mhl mvl ptxs">
95
        <div class="image phl mtn"></div>
96
        <div class="name mtl"></div>
97
        <div class="subline mtl"></div>
98
        <div class="price tml text-danger"></div>
99
        <button class="btn-block btn-primary mtl"></button>
100
    </div><div class="product-box mhl mvl ptxs">
101
        <div class="image phl mtn"></div>
102
        <div class="name mtl"></div>
103
        <div class="subline mtl"></div>
104
        <div class="price tml text-danger"></div>
105
        <button class="btn-block btn-primary mtl"></button>
106
    </div><div class="product-box mhl mvl ptxs">
107
        <div class="image phl mtn"></div>
108
        <div class="name mtl"></div>
109
        <div class="subline mtl"></div>
110
        <div class="price tml text-danger"></div>
111
        <button class="btn-block btn-primary mtl"></button>
112
    </div><div class="product-box mhl mvl ptxs">
113
        <div class="image phl mtn"></div>
114
        <div class="name mtl"></div>
115
        <div class="subline mtl"></div>
116
        <div class="price tml text-danger"></div>
117
        <button class="btn-block btn-primary mtl"></button>
118
    </div><div class="product-box mhl mvl ptxs">
119
        <div class="image phl mtn"></div>
120
        <div class="name mtl"></div>
121
        <div class="subline mtl"></div>
122
        <div class="price tml text-danger"></div>
123
        <button class="btn-block btn-primary mtl"></button>
124
    </div><div class="product-box mhl mvl ptxs">
125
        <div class="image phl mtn"></div>
126
        <div class="name mtl"></div>
127
        <div class="subline mtl"></div>
128
        <div class="price tml text-danger"></div>
129
        <button class="btn-block btn-primary mtl"></button>
130
    </div><div class="product-box mhl mvl ptxs">
131
        <div class="image phl mtn"></div>
132
        <div class="name mtl"></div>
133
        <div class="subline mtl"></div>
134
        <div class="price tml text-danger"></div>
135
        <button class="btn-block btn-primary mtl"></button>
136
    </div><div class="product-box mhl mvl ptxs">
137
        <div class="image phl mtn"></div>
138
        <div class="name mtl"></div>
139
        <div class="subline mtl"></div>
140
        <div class="price tml text-danger"></div>
141
        <button class="btn-block btn-primary mtl"></button>
142
    </div>
143
</body>
144
</html>
Tests:

  • find single element

     
    var lastProduct = document.querySelector('.last-product');

  • find multiple elements

     
    var lastProduct = document.querySelector('.product-box');
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    find single element
    find multiple elements

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 2 years ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Chrome 103 on Windows
View result in a separate tab
Test name Executions per second
find single element 257167.4 Ops/sec
find multiple elements 1078534.9 Ops/sec
LLMs can make mistakes. Check important info.
Related benchmarks: