MeasureThat.net

 Test jQuery vs Javascript (version: 0)

Comparing performance of: jQuery vs Javascript

Created: 3 years ago by: Guest
Jump to the latest result
HTML Preparation code:
​x
 
1
    <body class="site-container bg-standard-black">
2
        <section id="section-navbar">
3
            <div class="blur-box"></div>
4
            <nav class="ignore-resize">
5
                <div class="content">
6
                    <div></div>
7
                    <p class="bold logo">Gx</p>
8
                    <input type="checkbox" id="menu_checkbox">
9
                    <label for="menu_checkbox" class="menu-label">
10
                        <div></div>
11
                        <div></div>
12
                        <div></div>
13
                    </label>
14
                </div>
15
            </nav>
16
            <div class="nav-hr ignore-resize"></div>
17
            <div class="menu">
18
            </div>
19
        </section>
20
        <section id="section-glapix-slab" class="level-2 ignore-resize position-fixed bg-light-black">
21
            <canvas class="position-absolute center level-5 wh-100" id="sht-020"></canvas>
22
            <div class="text position-absolute level-5 center-horizontal">
23
            </div>
24
        </section>
25
        <section id="section-periodic-table" class="level-1">
26
            <div class="container">
27
                <section class="element arsenic">
28
                    <canvas class="position-absolute level-1 opacity-0"></canvas>
29
                    <canvas class="position-absolute level-2"></canvas>
30
                </section>
31
                <section class="element silver">
32
                    <canvas class="position-absolute level-3"></canvas>
33
                </section>
34
                <section class="element iridium">
35
                    <canvas class="position-absolute level-1 opacity-0"></canvas>
36
                    <canvas class="position-absolute level-2"></canvas>
37
                </section>
38
                <section class="element potassium">
39
                    <canvas class="position-absolute level-2"></canvas>
40
                </section>
41
                <section class="element radium">
42
                    <canvas class="position-absolute level-2"></canvas>
43
                    <canvas class="position-absolute level-2 hide-mobile"></canvas>
44
                </section>
45
                <section class="element sodium">
46
                    <canvas class="position-absolute level-1 hide-mobile opacity-0"></canvas>
47
                    <canvas class="position-absolute level-1"></canvas>
48
                    <canvas class="position-absolute level-1 hide-desktop opacity-0"></canvas>
49
                </section>
50
                <section class="element selenium">
51
                    <canvas class="position-absolute level-2 hide-mobile"></canvas>
52
                    <canvas class="position-absolute level-3 hide-desktop"></canvas>
53
                </section>
54
                <section class="element hafnium">
55
                    <canvas class="position-absolute level-1 opacity-0"></canvas>
56
                    <canvas class="position-absolute level-2 hide-mobile"></canvas>
57
                </section>
58
                <section class="element calcium">
59
                    <canvas class="position-absolute level-2 opacity-0"></canvas>
60
                </section>
61
                <section class="element francium">
62
                    <canvas class="position-absolute level-1"></canvas>
63
                </section>
64
                <section class="element scandium">
65
                    <canvas class="position-absolute level-3"></canvas>
66
                </section>
67
                <section class="element glapix">
68
                    <canvas class="position-absolute level-4"></canvas>
69
                </section>
70
                <section class="element static">
71
                    <canvas class="position-absolute level-2"></canvas>
72
                    <canvas class="position-absolute level-2"></canvas>
73
                    <canvas class="position-absolute level-2"></canvas>
74
                    <canvas class="position-absolute level-1"></canvas>
75
                </section>
76
                <div class="text level-5">
77
                    <p class="bold opacity-0 title-size"> A new element </p>
78
                    <p class="opacity-0 caption-size"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur </p>
79
                    <p class="opacity-0 caption-size bold"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <span class="special">ut labore et dolore magna aliqua.</span> </p>
80
                </div>
81
            </div>
82
        </section>
83
        <section id="section-render-periodic-table" class="d-none level-0">
84
            <img class="img-cover d-none layer" src="assets/images/galaxy/layer4.png">
85
            <img class="img-cover d-none layer mousemove" src="assets/images/galaxy/layer3.png">
86
            <div id="limitless-1" class="text title-size opacity-0 bold"> Limitless </div>
87
            <img class="img-cover d-none layer mousemove" src="assets/images/galaxy/layer2.png">
88
            <img class="img-cover d-none layer mousemove" src="assets/images/galaxy/layer1.png">
89
            <div id="limitless-2" class="text title-size visibility-hidden bold"> Limitless </div>
90
            <canvas class="position-fixed wh-100" id="sht-040"></canvas>
91
            <canvas class="position-fixed d-none wh-100" id="sht-045"></canvas>
92
        </section>
93
        <section id="section-bubbles" class="d-none level-1">
94
            <canvas class="position-fixed center" id="sht-050"></canvas>
95
            <div class="container d-flex align-items-center">
96
                <div class="text d-none ml-auto opacity-0">
97
                    <p class="bold title-size">
98
                        Tattoo colorato<br>
99
                    </p>
100
                    <p class="bold subtitle-size">
101
                        Lorem ipsum
102
                    </p>
103
                    <p class="caption-size">
104
                        Lorem ipsum dolor sit amet, consectetur<br>
105
                        adipiscing elit, sed do eiusmod tempor<br>
106
                        incididunt ut labore et dolore magna aliqua.
107
                    </p>
108
                    <div class="text-container">
109
                        <p class="bold heading-size"> Lorem ipsum </p>
110
                        <p class="caption-size">
111
                            Lorem ipsum dolor sit amet, consectetur<br>
112
                            adipiscing elit, sed do eiusmod tempor<br>
113
                            incididunt ut labore et dolore magna aliqua.
114
                        </p>
115
                        <p class="caption-size">
116
                            Lorem ipsum dolor sit amet, consectetur<br>
117
                            adipiscing elit, sed do eiusmod tempor<br>
118
                            incididunt ut labore et dolore magna aliqua.
119
                        </p>
120
                    </div>
121
                </div>
122
            </div>
123
        </section>
124
        <section id="section-application" class="d-none">
125
            <canvas class="position-fixed center d-none level-1 wh-100" id="sht-060"></canvas>
126
            <canvas class="position-fixed center d-none wh-100" id="sht-061"></canvas>
127
            <p class="position-fixed bold text title-size center d-none">Application</p>
128
        </section>
129
        <section id="section-locations" class="d-none">
130
            <div class="bath-room location position-fixed">
131
                <div class="half text bold title-size bg-black">
132
                    <p>
133
                        <span class="special heading-size">Nature</span><br>
134
                        bath<br>room
135
                    </p>
136
                </div>
137
                <div class="half image">
138
​
139
                </div>
140
            </div>
141
            <div class="hotellerie location opacity-0 position-fixed visibility-hidden">
142
                <div class="half image">
143
​
144
                </div>
145
                <div class="half text bold title-size bg-black">
146
                    <p>
147
                        <span class="special heading-size">Furniture</span><br>
148
                        hotel<br>lerie
149
                    </p>
150
                </div>
151
            </div>
152
            <div class="outdoor location opacity-0 position-fixed visibility-hidden">
153
                <div class="half text bold title-size bg-black">
154
                    <p>
155
                        <span class="special heading-size">Immersive</span><br>
156
                        out<br>door
157
                    </p>
158
                </div>
159
                <div class="half image">
160
​
161
                </div>
162
            </div>
163
            <div class="living-room location opacity-0 position-fixed visibility-hidden">
164
                <div class="half image">
165
​
166
                </div>
167
                <div class="half text bold title-size bg-black">
168
                    <p>
169
                        <span class="special heading-size">Abstract</span><br>
170
                        living<br>room
171
                    </p>
172
                </div>
173
            </div>
174
            <div class="lounge-room location opacity-0 position-fixed visibility-hidden desktop">
175
                <div class="half text bold title-size bg-black">
176
                    <p>
177
                        <span class="special heading-size">Immersive</span><br>
178
                        lounge<br>room
179
                    </p>
180
                </div>
181
                <div class="half image">
182
​
183
                </div>
184
            </div>
185
        </section>
186
        <section id="section-specifics" class="position-fixed d-none wh-100">
187
            <script type="module" src="./js/plate-manager/pool-manager.js"></script>
188
            <div class="specifics desktop bg-standard-black subtitle-size">
189
                <div class="grid-composition box bold">
190
                    <canvas class="position-absolute top-0 left-0" id="sht-082"></canvas>
191
                    <span class="level-1 position-relative">Grid Composition</span>
192
                </div>
193
                <div class="backlight box bold">
194
                    <canvas class="position-absolute top-0 left-0" id="sht-083"></canvas>
195
                    <span class="level-1 position-relative">Backlight</span>
196
                </div>
197
                <div class="d-flex justify-content-center">
198
                    <div class="column">
199
                        <div class="custom-depth box bold">
200
                            <canvas class="position-absolute top-0" id="sht-080"></canvas>
201
                            <span class="level-1 position-relative">Custom<br>depth</span>
202
                        </div>
203
                        <div class="water-resistant box bold">
204
                        </div>
205
                    </div>
206
                    <div class="column">
207
                        <div class="flexy-technology box bold">
208
                            <canvas class="position-absolute bottom-0 left-0" id="sht-081"></canvas>
209
                            <span class="level-1 position-relative">Flexy<br>technology</span>
210
                        </div>
211
                    </div>
212
                </div>
213
            </div>
214
            <div class="water-resistant-outside-container box d-none">
215
                <p class="text subtitle-size bold"><span class="special">Water</span>&nbsp;resistant</p>
216
            </div>
217
            <div class="text position-absolute center center-text opacity-0">
218
                <p class="title-size bold mh-auto">
219
                    <span class="special">Water</span> resistant
220
                </p>
221
                <p class="caption-size w-100">
222
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>
223
                    tempor incididunt ut labore et dolore magna aliqua
224
                </p>
225
            </div>
226
        </section>
227
        <section id="section-plate" class="wh-100" data-reached="false">
228
            <div class="button-palettes content ignore-resize">
229
                <button class="title-palette palette-button" onclick="titlePaletteClick()"></button>
230
                <button class="fire palette-button" onclick="firePaletteClick()"></button>
231
                <button class="galaxy palette-button" onclick="galaxyPaletteClick()"></button>
232
                <button class="plant palette-button" onclick="plantPaletteClick()"></button>
233
            </div>
234
            <div class="contents-container">
235
                <div class="mask-box"></div>
236
                <div class="drag-mouse-icon content ignore-resize">
237
                    <img src="./assets/images/drag-icon.gif"/>
238
                </div>
239
                <div class="text text-1 content ignore-resize">
240
                    <p class="subtext subtext-1 bold subtitle-size">
241
                        Una super 1000:00<br>
242
                        come qualità 4k30090
243
                    </p>
244
                    <p class="subtext subtext-2 bold heading-size">
245
                        Lorem ipsum dolor sit amet, consectetur
246
                        adipiscing elit, sed do eiusmod tempor
247
                        incididunt ut labore et dolore magna aliqua.
248
                    </p>
249
                    <p class="subtext subtext-3 caption-size">
250
                        Lorem ipsum dolor sit amet, consectetur
251
                        adipiscing elit, sed do eiusmod tempor
252
                        incididunt ut labore et dolore magna aliqua.
253
                    </p>
254
                </div>
255
                <div class="text text-2 content ignore-resize">
256
                    <p class="subtext subtext-1 bold subtitle-size bold">
257
                        Una super 1000:00<br>
258
                        come qualità 4k30090
259
                    </p>
260
                    <p class="subtext subtext-2 bold heading-size">
261
                        Lorem ipsum dolor sit amet, consectetur
262
                        adipiscing elit, sed do eiusmod tempor
263
                        incididunt ut labore et dolore magna aliqua.
264
                    </p>
265
                    <p class="subtext subtext-3 caption-size">
266
                        Lorem ipsum dolor sit amet, consectetur
267
                        adipiscing elit, sed do eiusmod tempor
268
                        incididunt ut labore et dolore magna aliqua.
269
                    </p>
270
                </div>
271
            </div>
272
            <div class="text text-3 content ignore-resize">
273
                <p class="subtext subtext-1 bold subtitle-size bold">
274
                    Deep Texture
275
                </p>
276
                <p class="subtext subtext-2 bold heading-size">
277
                    Lorem ipsum dolor sit amet, consectetur
278
                    adipiscing elit, sed do eiusmod tempor
279
                    incididunt ut labore et dolore magna aliqua.
280
                </p>
281
            </div>
282
            <div class="shadow-box"></div>
283
            <canvas id="fluidCanvas"></canvas>
284
            <script type="text/javascript" src="./js/plate-manager/dat.gui.min.js"></script>
285
            <script src="./js/plate-manager/fluid.js"></script>
286
            <script src="https://unpkg.com/context-filter-polyfill@0.2.4"></script>
287
            <script type="module" src="./js/plate-manager/index.js"></script>
288
            <canvas class="center opacity-0" id="zoom-render"></canvas>
289
            <canvas class="center opacity-0" id="depth-render"></canvas>
290
            <div class="center opacity-1" id="plate-border"></div>
291
        </section>
292
        <section id="section-3d-touch" class="d-none">
293
            <div class="container">
294
                <div class="text opacity-0 level-2">
295
                    <p class="bold center-text title-size">
296
                        3D Touch<br>
297
                    </p>
298
                    <p class="center-text bold heading-size">
299
                        Lorem ipsum dolor sit amet,<br>
300
                        consectetur adipiscing elit, sed do<br>
301
                        eiusmod tempor incididunt ut<br>
302
                        labore et dolore magna aliqua.
303
                    </p>
304
                    <p class="special center-text caption-size">
305
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br>
306
                        eiusmod tempor
307
                    </p>
308
                </div>
309
                <canvas id="sht-110"></canvas>
310
            </div>
311
        </section>
312
        <section id="section-eco-friendly" class="d-none">
313
            <div class="container">
314
                <div class="bars-container d-flex caption-size bg-light-black">
315
                    <div class="column">
316
                        <img class="image-contain slab" src="assets/images/eco-friendly/eco-friendly.png"></img>
317
                    </div>
318
                    <div class="column text">
319
                        <p class="bold heading-size">
320
                            Eco friendly
321
                        </p>
322
                        <p class="bold">
323
                            Lorem ipsum dolor
324
                        </p>
325
                        <p class="bold">
326
                            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
327
                        </p>
328
                        <p>
329
                            Lorem ipsum dolor
330
                        </p>
331
                        <div class="row d-flex w-100">
332
                            <div class="half">
333
                                <div class="d-flex">
334
                                    <hr data-fill="13.4">
335
                                    <span class="percentage">13,4%</span>
336
                                </div>
337
                                <p class="sub-bar-text">
338
                                    Lorem ipsum dolor
339
                                </p>
340
                            </div>
341
                            <div class="half">
342
                                <div class="d-flex">
343
                                    <hr data-fill="12.2">
344
                                    <span class="percentage">12,2%</span>
345
                                </div>
346
                                <p class="sub-bar-text">
347
                                    Lorem ipsum dolor
348
                                </p>
349
                            </div>
350
                        </div>
351
                        <div class="row d-flex w-100">
352
                            <div class="half">
353
                                <div class="d-flex">
354
                                    <hr data-fill="9.2">
355
                                    <span class="percentage">9,2%</span>
356
                                </div>
357
                                <p class="sub-bar-text">
358
                                    Lorem ipsum dolor
359
                                </p>
360
                            </div>
361
                            <div class="half">
362
                                <div class="d-flex">
363
                                    <hr data-fill="8.8">
364
                                    <span class="percentage">8,8%</span>
365
                                </div>
366
                                <p class="sub-bar-text">
367
                                    Lorem ipsum dolor
368
                                </p>
369
                            </div>
370
                        </div>
371
                        <div class="row d-flex w-100">
372
                            <div class="half">
373
                                <div class="d-flex">
374
                                    <hr data-fill="3.4">
375
                                    <span class="percentage">3,4%</span>
376
                                </div>
377
                                <p class="sub-bar-text">
378
                                    Lorem ipsum dolor
379
                                </p>
380
                            </div>
381
                            <div class="half">
382
                                <div class="d-flex">
383
                                    <hr data-fill="6.0">
384
                                    <span class="percentage">6,0%</span>
385
                                </div>
386
                                <p class="sub-bar-text">
387
                                    Lorem ipsum dolor
388
                                </p>
389
                            </div>
390
                        </div>
391
                    </div>
392
                    <img id="leaf" src="assets/images/eco-friendly/leaf.png">
393
                </div>
394
            </div>
395
        </section>
396
        <section id="section-prices" class="d-none">
397
            <div class="container">
398
                <canvas class="image-contain position-absolute wh-100 plate level-1" id="sht-130"></canvas>
399
                <p class="bold center-text mh-auto title-size title level-1">
400
                    Prices
401
                </p>
402
                <div class="filled-container position-absolute bg-light-black">
403
                    <div class="filled-content">
404
                        <div class="text">
405
                            <p class="center-text mh-auto caption-size">
406
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do<br>
407
                                aiusmod tempor
408
                            </p>
409
                            <p class="center-text mh-auto heading-size bold">
410
                                Prices starting from €1.459,00.
411
                            </p>
412
                            <a href="" class="button mh-auto caption-size">
413
                                Acquista
414
                            </a>
415
                        </div>
416
                    </div>
417
                </div>
418
            </div>
419
        </section>
420
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
421
    </body>
Tests:

  • jQuery

     
    let x = $(".specifics");

  • Javascript

     
    let x = document.querySelector(".specifics");
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    jQuery
    Javascript

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 5 months ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Chrome 131 on Windows
View result in a separate tab
Test name Executions per second
jQuery 1942292.9 Ops/sec
Javascript 825220.8 Ops/sec
LLMs can make mistakes. Check important info.
Related benchmarks: