MeasureThat.net

Run results for: dom size matters single element

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
Chrome 80
Mac OS X 10.15.2
Desktop
4 years ago
Test name Executions per second
framework 527919.1 Ops/sec
no framework 291375.5 Ops/sec
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
​
9
<div class="bootstrap-wrapper">
10
​
11
    <div class="product-box mhl mvl pts">
12
        <div class="image phl mtn"></div>
13
        <div class="name mtl"></div>
14
        <div class="subline mtl"></div>
15
        <div class="price mtl text-danger"></div>
16
        <button class="btn-block btn-primary mtl"></button>
17
    </div>
18
    <div class="product-box mhl mvl pts">
19
        <div class="image phl mtn"></div>
20
        <div class="name mtl"></div>
21
        <div class="subline mtl"></div>
22
        <div class="price mtl text-danger"></div>
23
        <button class="btn-block btn-primary mtl"></button>
24
    </div>
25
    <div class="product-box mhl mvl pts">
26
        <div class="image phl mtn"></div>
27
        <div class="name mtl"></div>
28
        <div class="subline mtl"></div>
29
        <div class="price mtl text-danger"></div>
30
        <button class="btn-block btn-primary mtl"></button>
31
    </div>
32
    <div class="product-box mhl mvl pts">
33
        <div class="image phl mtn"></div>
34
        <div class="name mtl"></div>
35
        <div class="subline mtl"></div>
36
        <div class="price mtl text-danger"></div>
37
        <button class="btn-block btn-primary mtl"></button>
38
    </div>
39
    <div class="product-box mhl mvl pts">
40
        <div class="image phl mtn"></div>
41
        <div class="name mtl"></div>
42
        <div class="subline mtl"></div>
43
        <div class="price mtl text-danger"></div>
44
        <button class="btn-block btn-primary mtl"></button>
45
    </div>
46
    <div class="product-box mhl mvl pts">
47
        <div class="image phl mtn"></div>
48
        <div class="name mtl"></div>
49
        <div class="subline mtl"></div>
50
        <div class="price mtl text-danger"></div>
51
        <button class="btn-block btn-primary mtl"></button>
52
    </div>
53
    <div class="product-box mhl mvl pts">
54
        <div class="image phl mtn"></div>
55
        <div class="name mtl"></div>
56
        <div class="subline mtl"></div>
57
        <div class="price mtl text-danger"></div>
58
        <button class="btn-block btn-primary mtl"></button>
59
    </div>
60
    <div class="product-box mhl mvl pts">
61
        <div class="image phl mtn"></div>
62
        <div class="name mtl"></div>
63
        <div class="subline mtl"></div>
64
        <div class="price mtl text-danger"></div>
65
        <button class="btn-block btn-primary mtl"></button>
66
    </div>
67
    <div class="product-box mhl mvl pts">
68
        <div class="image phl mtn"></div>
69
        <div class="name mtl"></div>
70
        <div class="subline mtl"></div>
71
        <div class="price mtl text-danger"></div>
72
        <button class="btn-block btn-primary mtl"></button>
73
    </div>
74
    <div class="product-box mhl mvl pts">
75
        <div class="image phl mtn"></div>
76
        <div class="name mtl"></div>
77
        <div class="subline mtl"></div>
78
        <div class="price mtl text-danger"></div>
79
        <button class="btn-block btn-primary mtl"></button>
80
    </div>
81
    <div class="product-box mhl mvl pts">
82
        <div class="image phl mtn"></div>
83
        <div class="name mtl"></div>
84
        <div class="subline mtl"></div>
85
        <div class="price mtl text-danger"></div>
86
        <button class="btn-block btn-primary mtl"></button>
87
    </div>
88
    <div class="product-box mhl mvl pts">
89
        <div class="image phl mtn"></div>
90
        <div class="name mtl"></div>
91
        <div class="subline mtl"></div>
92
        <div class="price mtl text-danger"></div>
93
        <button class="btn-block btn-primary mtl"></button>
94
    </div>
95
    <div class="product-box mhl mvl pts">
96
        <div class="image phl mtn"></div>
97
        <div class="name mtl"></div>
98
        <div class="subline mtl"></div>
99
        <div class="price mtl text-danger"></div>
100
        <button class="btn-block btn-primary mtl"></button>
101
    </div>
102
    <div class="product-box mhl mvl pts">
103
        <div class="image phl mtn"></div>
104
        <div class="name mtl"></div>
105
        <div class="subline mtl"></div>
106
        <div class="price mtl text-danger"></div>
107
        <button class="btn-block btn-primary mtl"></button>
108
    </div>
109
    <div class="product-box mhl mvl pts">
110
        <div class="image phl mtn"></div>
111
        <div class="name mtl"></div>
112
        <div class="subline mtl"></div>
113
        <div class="price mtl text-danger"></div>
114
        <button class="btn-block btn-primary mtl"></button>
115
    </div>
116
    <div class="product-box mhl mvl pts">
117
        <div class="image phl mtn"></div>
118
        <div class="name mtl"></div>
119
        <div class="subline mtl"></div>
120
        <div class="price mtl text-danger"></div>
121
        <button class="btn-block btn-primary mtl"></button>
122
    </div>
123
    <div class="product-box mhl mvl pts">
124
        <div class="image phl mtn"></div>
125
        <div class="name mtl"></div>
126
        <div class="subline mtl"></div>
127
        <div class="price mtl text-danger"></div>
128
        <button class="btn-block btn-primary mtl"></button>
129
    </div>
130
    <div class="product-box mhl mvl pts">
131
        <div class="image phl mtn"></div>
132
        <div class="name mtl"></div>
133
        <div class="subline mtl"></div>
134
        <div class="price mtl text-danger"></div>
135
        <button class="btn-block btn-primary mtl"></button>
136
    </div>
137
    <div class="product-box mhl mvl pts">
138
        <div class="image phl mtn"></div>
139
        <div class="name mtl"></div>
140
        <div class="subline mtl"></div>
141
        <div class="price mtl text-danger"></div>
142
        <button class="btn-block btn-primary mtl"></button>
143
    </div>
144
    <div class="product-box mhl mvl pts">
145
        <div class="image phl mtn"></div>
146
        <div class="name mtl"></div>
147
        <div class="subline mtl"></div>
148
        <div class="price mtl text-danger"></div>
149
        <button class="btn-block btn-primary mtl"></button>
150
    </div>
151
    <div class="product-box mhl mvl pts">
152
        <div class="image phl mtn"></div>
153
        <div class="name mtl"></div>
154
        <div class="subline mtl"></div>
155
        <div class="price mtl text-danger"></div>
156
        <button class="btn-block btn-primary mtl"></button>
157
    </div>
158
    <div class="product-box mhl mvl pts">
159
        <div class="image phl mtn"></div>
160
        <div class="name mtl"></div>
161
        <div class="subline mtl"></div>
162
        <div class="price mtl text-danger"></div>
163
        <button class="btn-block btn-primary mtl"></button>
164
    </div>
165
    <div class="product-box mhl mvl pts">
166
        <div class="image phl mtn"></div>
167
        <div class="name mtl"></div>
168
        <div class="subline mtl"></div>
169
        <div class="price mtl text-danger"></div>
170
        <button class="btn-block btn-primary mtl"></button>
171
    </div>
172
    <div class="product-box mhl mvl pts">
173
        <div class="image phl mtn"></div>
174
        <div class="name mtl"></div>
175
        <div class="subline mtl"></div>
176
        <div class="price mtl text-danger"></div>
177
        <button class="btn-block btn-primary mtl"></button>
178
    </div>
179
    <div class="product-box mhl mvl pts">
180
        <div class="image phl mtn"></div>
181
        <div class="name mtl"></div>
182
        <div class="subline mtl"></div>
183
        <div class="price mtl text-danger"></div>
184
        <button class="btn-block btn-primary mtl"></button>
185
    </div>
186
    <div class="product-box mhl mvl pts">
187
        <div class="image phl mtn"></div>
188
        <div class="name mtl"></div>
189
        <div class="subline mtl"></div>
190
        <div class="price mtl text-danger"></div>
191
        <button class="btn-block btn-primary mtl"></button>
192
    </div>
193
    <div class="product-box mhl mvl pts">
194
        <div class="image phl mtn"></div>
195
        <div class="name mtl"></div>
196
        <div class="subline mtl"></div>
197
        <div class="price mtl text-danger"></div>
198
        <button class="btn-block btn-primary mtl"></button>
199
    </div>
200
    <div class="product-box mhl mvl pts">
201
        <div class="image phl mtn"></div>
202
        <div class="name mtl"></div>
203
        <div class="subline mtl"></div>
204
        <div class="price mtl text-danger"></div>
205
        <button class="btn-block btn-primary mtl"></button>
206
    </div>
207
    <div class="product-box mhl mvl pts">
208
        <div class="image phl mtn"></div>
209
        <div class="name mtl"></div>
210
        <div class="subline mtl"></div>
211
        <div class="price mtl text-danger"></div>
212
        <button class="btn-block btn-primary mtl"></button>
213
    </div>
214
    <div class="product-box mhl mvl pts last-product">
215
        <div class="image phl mtn"></div>
216
        <div class="name mtl"></div>
217
        <div class="subline mtl"></div>
218
        <div class="price mtl text-danger"></div>
219
        <button class="btn-block btn-primary mtl"></button>
220
    </div>
221
​
222
</div>
223
​
224
<div class="no-framework-wrapper">
225
​
226
    <div class="product-box">
227
        <div class="image"></div>
228
        <div class="name"></div>
229
        <div class="subline"></div>
230
        <div class="price"></div>
231
        <button></button>
232
    </div>
233
    <div class="product-box">
234
        <div class="image"></div>
235
        <div class="name"></div>
236
        <div class="subline"></div>
237
        <div class="price"></div>
238
        <button></button>
239
    </div>
240
    <div class="product-box">
241
        <div class="image"></div>
242
        <div class="name"></div>
243
        <div class="subline"></div>
244
        <div class="price"></div>
245
        <button></button>
246
    </div>
247
    <div class="product-box">
248
        <div class="image"></div>
249
        <div class="name"></div>
250
        <div class="subline"></div>
251
        <div class="price"></div>
252
        <button></button>
253
    </div>
254
    <div class="product-box">
255
        <div class="image"></div>
256
        <div class="name"></div>
257
        <div class="subline"></div>
258
        <div class="price"></div>
259
        <button></button>
260
    </div>
261
    <div class="product-box">
262
        <div class="image"></div>
263
        <div class="name"></div>
264
        <div class="subline"></div>
265
        <div class="price"></div>
266
        <button></button>
267
    </div>
268
    <div class="product-box">
269
        <div class="image"></div>
270
        <div class="name"></div>
271
        <div class="subline"></div>
272
        <div class="price"></div>
273
        <button></button>
274
    </div>
275
    <div class="product-box">
276
        <div class="image"></div>
277
        <div class="name"></div>
278
        <div class="subline"></div>
279
        <div class="price"></div>
280
        <button></button>
281
    </div>
282
    <div class="product-box">
283
        <div class="image"></div>
284
        <div class="name"></div>
285
        <div class="subline"></div>
286
        <div class="price"></div>
287
        <button></button>
288
    </div>
289
    <div class="product-box">
290
        <div class="image"></div>
291
        <div class="name"></div>
292
        <div class="subline"></div>
293
        <div class="price"></div>
294
        <button></button>
295
    </div>
296
    <div class="product-box">
297
        <div class="image"></div>
298
        <div class="name"></div>
299
        <div class="subline"></div>
300
        <div class="price"></div>
301
        <button></button>
302
    </div>
303
    <div class="product-box">
304
        <div class="image"></div>
305
        <div class="name"></div>
306
        <div class="subline"></div>
307
        <div class="price"></div>
308
        <button></button>
309
    </div>
310
    <div class="product-box">
311
        <div class="image"></div>
312
        <div class="name"></div>
313
        <div class="subline"></div>
314
        <div class="price"></div>
315
        <button></button>
316
    </div>
317
    <div class="product-box">
318
        <div class="image"></div>
319
        <div class="name"></div>
320
        <div class="subline"></div>
321
        <div class="price"></div>
322
        <button></button>
323
    </div>
324
    <div class="product-box">
325
        <div class="image"></div>
326
        <div class="name"></div>
327
        <div class="subline"></div>
328
        <div class="price"></div>
329
        <button></button>
330
    </div>
331
    <div class="product-box">
332
        <div class="image"></div>
333
        <div class="name"></div>
334
        <div class="subline"></div>
335
        <div class="price"></div>
336
        <button></button>
337
    </div>
338
    <div class="product-box">
339
        <div class="image"></div>
340
        <div class="name"></div>
341
        <div class="subline"></div>
342
        <div class="price"></div>
343
        <button></button>
344
    </div>
345
    <div class="product-box">
346
        <div class="image"></div>
347
        <div class="name"></div>
348
        <div class="subline"></div>
349
        <div class="price"></div>
350
        <button></button>
351
    </div>
352
    <div class="product-box">
353
        <div class="image"></div>
354
        <div class="name"></div>
355
        <div class="subline"></div>
356
        <div class="price"></div>
357
        <button></button>
358
    </div>
359
    <div class="product-box">
360
        <div class="image"></div>
361
        <div class="name"></div>
362
        <div class="subline"></div>
363
        <div class="price"></div>
364
        <button></button>
365
    </div>
366
    <div class="product-box">
367
        <div class="image"></div>
368
        <div class="name"></div>
369
        <div class="subline"></div>
370
        <div class="price"></div>
371
        <button></button>
372
    </div>
373
    <div class="product-box">
374
        <div class="image"></div>
375
        <div class="name"></div>
376
        <div class="subline"></div>
377
        <div class="price"></div>
378
        <button></button>
379
    </div>
380
    <div class="product-box">
381
        <div class="image"></div>
382
        <div class="name"></div>
383
        <div class="subline"></div>
384
        <div class="price"></div>
385
        <button></button>
386
    </div>
387
    <div class="product-box">
388
        <div class="image"></div>
389
        <div class="name"></div>
390
        <div class="subline"></div>
391
        <div class="price"></div>
392
        <button></button>
393
    </div>
394
    <div class="product-box">
395
        <div class="image"></div>
396
        <div class="name"></div>
397
        <div class="subline"></div>
398
        <div class="price"></div>
399
        <button></button>
400
    </div>
401
    <div class="product-box">
402
        <div class="image"></div>
403
        <div class="name"></div>
404
        <div class="subline"></div>
405
        <div class="price"></div>
406
        <button></button>
407
    </div>
408
    <div class="product-box">
409
        <div class="image"></div>
410
        <div class="name"></div>
411
        <div class="subline"></div>
412
        <div class="price"></div>
413
        <button></button>
414
    </div>
415
    <div class="product-box">
416
        <div class="image"></div>
417
        <div class="name"></div>
418
        <div class="subline"></div>
419
        <div class="price"></div>
420
        <button></button>
421
    </div>
422
    <div class="product-box">
423
        <div class="image"></div>
424
        <div class="name"></div>
425
        <div class="subline"></div>
426
        <div class="price"></div>
427
        <button></button>
428
    </div>
429
    <div class="product-box last-product">
430
        <div class="image"></div>
431
        <div class="name"></div>
432
        <div class="subline"></div>
433
        <div class="price"></div>
434
        <button></button>
435
    </div>
436
437
</div>
438
​
439
</body>
440
</html>
Tests:

  • framework

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

  • no framework

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