Run results for: Test jQuery vs Javascript

Test name	Executions per second
✓ jQuery	804,740 Ops/sec
Javascript	458,672 Ops/sec
HTML Preparation code:
    <body class="site-container bg-standard-black">
        <section id="section-navbar">
            <div class="blur-box"></div>
            <nav class="ignore-resize">
                <div class="content">
                    <div></div>
                    <p class="bold logo">Gx</p>
                    <input type="checkbox" id="menu_checkbox">
                    <label for="menu_checkbox" class="menu-label">
                        <div></div>
                        <div></div>
                        <div></div>
                    </label>
                </div>
            </nav>
            <div class="nav-hr ignore-resize"></div>
            <div class="menu">
            </div>
        </section>
        <section id="section-glapix-slab" class="level-2 ignore-resize position-fixed bg-light-black">
            <canvas class="position-absolute center level-5 wh-100" id="sht-020"></canvas>
            <div class="text position-absolute level-5 center-horizontal">
            </div>
        </section>
        <section id="section-periodic-table" class="level-1">
            <div class="container">
                <section class="element arsenic">
                    <canvas class="position-absolute level-1 opacity-0"></canvas>
                    <canvas class="position-absolute level-2"></canvas>
                </section>
                <section class="element silver">
                    <canvas class="position-absolute level-3"></canvas>
                </section>
                <section class="element iridium">
                    <canvas class="position-absolute level-1 opacity-0"></canvas>
                    <canvas class="position-absolute level-2"></canvas>
                </section>
                <section class="element potassium">
                    <canvas class="position-absolute level-2"></canvas>
                </section>
                <section class="element radium">
                    <canvas class="position-absolute level-2"></canvas>
                    <canvas class="position-absolute level-2 hide-mobile"></canvas>
                </section>
                <section class="element sodium">
                    <canvas class="position-absolute level-1 hide-mobile opacity-0"></canvas>
                    <canvas class="position-absolute level-1"></canvas>
                    <canvas class="position-absolute level-1 hide-desktop opacity-0"></canvas>
                </section>
                <section class="element selenium">
                    <canvas class="position-absolute level-2 hide-mobile"></canvas>
                    <canvas class="position-absolute level-3 hide-desktop"></canvas>
                </section>
                <section class="element hafnium">
                    <canvas class="position-absolute level-1 opacity-0"></canvas>
                    <canvas class="position-absolute level-2 hide-mobile"></canvas>
                </section>
                <section class="element calcium">
                    <canvas class="position-absolute level-2 opacity-0"></canvas>
                </section>
                <section class="element francium">
                    <canvas class="position-absolute level-1"></canvas>
                </section>
                <section class="element scandium">
                    <canvas class="position-absolute level-3"></canvas>
                </section>
                <section class="element glapix">
                    <canvas class="position-absolute level-4"></canvas>
                </section>
                <section class="element static">
                    <canvas class="position-absolute level-2"></canvas>
                    <canvas class="position-absolute level-2"></canvas>
                    <canvas class="position-absolute level-2"></canvas>
                    <canvas class="position-absolute level-1"></canvas>
                </section>
                <div class="text level-5">
                    <p class="bold opacity-0 title-size"> A new element </p>
                    <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>
                    <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>
                </div>
            </div>
        </section>
        <section id="section-render-periodic-table" class="d-none level-0">
            <img class="img-cover d-none layer" src="assets/images/galaxy/layer4.png">
            <img class="img-cover d-none layer mousemove" src="assets/images/galaxy/layer3.png">
            <div id="limitless-1" class="text title-size opacity-0 bold"> Limitless </div>
            <img class="img-cover d-none layer mousemove" src="assets/images/galaxy/layer2.png">
            <img class="img-cover d-none layer mousemove" src="assets/images/galaxy/layer1.png">
            <div id="limitless-2" class="text title-size visibility-hidden bold"> Limitless </div>
            <canvas class="position-fixed wh-100" id="sht-040"></canvas>
            <canvas class="position-fixed d-none wh-100" id="sht-045"></canvas>
        </section>
        <section id="section-bubbles" class="d-none level-1">
            <canvas class="position-fixed center" id="sht-050"></canvas>
            <div class="container d-flex align-items-center">
                <div class="text d-none ml-auto opacity-0">
                    <p class="bold title-size">
                        Tattoo colorato<br>
                    </p>
                    <p class="bold subtitle-size">
                        Lorem ipsum
                    </p>
                    <p class="caption-size">
                        Lorem ipsum dolor sit amet, consectetur<br>
                        adipiscing elit, sed do eiusmod tempor<br>
                        incididunt ut labore et dolore magna aliqua.
                    </p>
                    <div class="text-container">
                        <p class="bold heading-size"> Lorem ipsum </p>
                        <p class="caption-size">
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit, sed do eiusmod tempor<br>
                            incididunt ut labore et dolore magna aliqua.
                        </p>
                        <p class="caption-size">
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit, sed do eiusmod tempor<br>
                            incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-application" class="d-none">
            <canvas class="position-fixed center d-none level-1 wh-100" id="sht-060"></canvas>
            <canvas class="position-fixed center d-none wh-100" id="sht-061"></canvas>
            <p class="position-fixed bold text title-size center d-none">Application</p>
        </section>
        <section id="section-locations" class="d-none">
            <div class="bath-room location position-fixed">
                <div class="half text bold title-size bg-black">
                    <p>
                        <span class="special heading-size">Nature</span><br>
                        bath<br>room
                    </p>
                </div>
                <div class="half image">

                </div>
            </div>
            <div class="hotellerie location opacity-0 position-fixed visibility-hidden">
                <div class="half image">

                </div>
                <div class="half text bold title-size bg-black">
                    <p>
                        <span class="special heading-size">Furniture</span><br>
                        hotel<br>lerie
                    </p>
                </div>
            </div>
            <div class="outdoor location opacity-0 position-fixed visibility-hidden">
                <div class="half text bold title-size bg-black">
                    <p>
                        <span class="special heading-size">Immersive</span><br>
                        out<br>door
                    </p>
                </div>
                <div class="half image">

                </div>
            </div>
            <div class="living-room location opacity-0 position-fixed visibility-hidden">
                <div class="half image">

                </div>
                <div class="half text bold title-size bg-black">
                    <p>
                        <span class="special heading-size">Abstract</span><br>
                        living<br>room
                    </p>
                </div>
            </div>
            <div class="lounge-room location opacity-0 position-fixed visibility-hidden desktop">
                <div class="half text bold title-size bg-black">
                    <p>
                        <span class="special heading-size">Immersive</span><br>
                        lounge<br>room
                    </p>
                </div>
                <div class="half image">

                </div>
            </div>
        </section>
        <section id="section-specifics" class="position-fixed d-none wh-100">
            <script type="module" src="./js/plate-manager/pool-manager.js"></script>
            <div class="specifics desktop bg-standard-black subtitle-size">
                <div class="grid-composition box bold">
                    <canvas class="position-absolute top-0 left-0" id="sht-082"></canvas>
                    <span class="level-1 position-relative">Grid Composition</span>
                </div>
                <div class="backlight box bold">
                    <canvas class="position-absolute top-0 left-0" id="sht-083"></canvas>
                    <span class="level-1 position-relative">Backlight</span>
                </div>
                <div class="d-flex justify-content-center">
                    <div class="column">
                        <div class="custom-depth box bold">
                            <canvas class="position-absolute top-0" id="sht-080"></canvas>
                            <span class="level-1 position-relative">Custom<br>depth</span>
                        </div>
                        <div class="water-resistant box bold">
                        </div>
                    </div>
                    <div class="column">
                        <div class="flexy-technology box bold">
                            <canvas class="position-absolute bottom-0 left-0" id="sht-081"></canvas>
                            <span class="level-1 position-relative">Flexy<br>technology</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="water-resistant-outside-container box d-none">
                <p class="text subtitle-size bold"><span class="special">Water</span>&nbsp;resistant</p>
            </div>
            <div class="text position-absolute center center-text opacity-0">
                <p class="title-size bold mh-auto">
                    <span class="special">Water</span> resistant
                </p>
                <p class="caption-size w-100">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>
                    tempor incididunt ut labore et dolore magna aliqua
                </p>
            </div>
        </section>
        <section id="section-plate" class="wh-100" data-reached="false">
            <div class="button-palettes content ignore-resize">
                <button class="title-palette palette-button" onclick="titlePaletteClick()"></button>
                <button class="fire palette-button" onclick="firePaletteClick()"></button>
                <button class="galaxy palette-button" onclick="galaxyPaletteClick()"></button>
                <button class="plant palette-button" onclick="plantPaletteClick()"></button>
            </div>
            <div class="contents-container">
                <div class="mask-box"></div>
                <div class="drag-mouse-icon content ignore-resize">
                    <img src="./assets/images/drag-icon.gif"/>
                </div>
                <div class="text text-1 content ignore-resize">
                    <p class="subtext subtext-1 bold subtitle-size">
                        Una super 1000:00<br>
                        come qualità 4k30090
                    </p>
                    <p class="subtext subtext-2 bold heading-size">
                        Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua.
                    </p>
                    <p class="subtext subtext-3 caption-size">
                        Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
                <div class="text text-2 content ignore-resize">
                    <p class="subtext subtext-1 bold subtitle-size bold">
                        Una super 1000:00<br>
                        come qualità 4k30090
                    </p>
                    <p class="subtext subtext-2 bold heading-size">
                        Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua.
                    </p>
                    <p class="subtext subtext-3 caption-size">
                        Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
            <div class="text text-3 content ignore-resize">
                <p class="subtext subtext-1 bold subtitle-size bold">
                    Deep Texture
                </p>
                <p class="subtext subtext-2 bold heading-size">
                    Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
            <div class="shadow-box"></div>
            <canvas id="fluidCanvas"></canvas>
            <script type="text/javascript" src="./js/plate-manager/dat.gui.min.js"></script>
            <script src="./js/plate-manager/fluid.js"></script>
            <script src="https://unpkg.com/context-filter-polyfill@0.2.4"></script> 
            <script type="module" src="./js/plate-manager/index.js"></script> 
            <canvas class="center opacity-0" id="zoom-render"></canvas> 
            <canvas class="center opacity-0" id="depth-render"></canvas> 
            <div class="center opacity-1" id="plate-border"></div> 
        </section>
        <section id="section-3d-touch" class="d-none">
            <div class="container">
                <div class="text opacity-0 level-2">
                    <p class="bold center-text title-size">
                        3D Touch<br>
                    </p>
                    <p class="center-text bold heading-size">
                        Lorem ipsum dolor sit amet,<br>
                        consectetur adipiscing elit, sed do<br>
                        eiusmod tempor incididunt ut<br>
                        labore et dolore magna aliqua.
                    </p>
                    <p class="special center-text caption-size">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br>
                        eiusmod tempor
                    </p>
                </div>
                <canvas id="sht-110"></canvas>
            </div>
        </section>
        <section id="section-eco-friendly" class="d-none">
            <div class="container">
                <div class="bars-container d-flex caption-size bg-light-black">
                    <div class="column">
                        <img class="image-contain slab" src="assets/images/eco-friendly/eco-friendly.png"></img>
                    </div>
                    <div class="column text">
                        <p class="bold heading-size">
                            Eco friendly
                        </p>
                        <p class="bold">
                            Lorem ipsum dolor
                        </p>
                        <p class="bold">
                            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                        </p>
                        <p>
                            Lorem ipsum dolor
                        </p>
                        <div class="row d-flex w-100">
                            <div class="half">
                                <div class="d-flex">
                                    <hr data-fill="13.4">
                                    <span class="percentage">13,4%</span>
                                </div>
                                <p class="sub-bar-text">
                                    Lorem ipsum dolor
                                </p>
                            </div>
                            <div class="half">
                                <div class="d-flex">
                                    <hr data-fill="12.2">
                                    <span class="percentage">12,2%</span>
                                </div>
                                <p class="sub-bar-text">
                                    Lorem ipsum dolor
                                </p>
                            </div>
                        </div>
                        <div class="row d-flex w-100">
                            <div class="half">
                                <div class="d-flex">
                                    <hr data-fill="9.2">
                                    <span class="percentage">9,2%</span>
                                </div>
                                <p class="sub-bar-text">
                                    Lorem ipsum dolor
                                </p>
                            </div>
                            <div class="half">
                                <div class="d-flex">
                                    <hr data-fill="8.8">
                                    <span class="percentage">8,8%</span>
                                </div>
                                <p class="sub-bar-text">
                                    Lorem ipsum dolor
                                </p>
                            </div>
                        </div>
                        <div class="row d-flex w-100">
                            <div class="half">
                                <div class="d-flex">
                                    <hr data-fill="3.4">
                                    <span class="percentage">3,4%</span>
                                </div>
                                <p class="sub-bar-text">
                                    Lorem ipsum dolor
                                </p>
                            </div>
                            <div class="half">
                                <div class="d-flex">
                                    <hr data-fill="6.0">
                                    <span class="percentage">6,0%</span>
                                </div>
                                <p class="sub-bar-text">
                                    Lorem ipsum dolor
                                </p>
                            </div>
                        </div>
                    </div>
                    <img id="leaf" src="assets/images/eco-friendly/leaf.png">
                </div>
            </div>
        </section>
        <section id="section-prices" class="d-none">
            <div class="container">
                <canvas class="image-contain position-absolute wh-100 plate level-1" id="sht-130"></canvas>
                <p class="bold center-text mh-auto title-size title level-1">
                    Prices
                </p>
                <div class="filled-container position-absolute bg-light-black">
                    <div class="filled-content">
                        <div class="text">
                            <p class="center-text mh-auto caption-size">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do<br>
                                aiusmod tempor
                            </p>
                            <p class="center-text mh-auto heading-size bold">
                                Prices starting from €1.459,00.
                            </p>
                            <a href="" class="button mh-auto caption-size">
                                Acquista
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
    </body>