Benchmark: querySelector vs getElementsByClassName ccc2

HTML Preparation code:

<body>
    <!-- Navbar  -->
    <div class="nav display:flex align-items:center background:whitesmoke" data-main_content_id="content" data-scroll=", hide-nav" data-scroll_up="5" data-scroll_down="5">

        <!-- Menu Icon Arrow Left Animations -->
        <a aria-label="mobile menu" class="menu_icon arrow-left active" data-toggle="active" data-toggle_sidenav="menuL">
            <span></span>
            <span></span>
            <span></span>
        </a>

        <!-- Horizontal Scroll Nav/Tabs -->
        <ul class="direction:rtl display:inline-flex align-items:center overflow:auto font-size:20px list-style-type:none width:100% height:50px">

            <!-- Modal Controls -->
            <li class="margin-right:15px"><a class="btn-modal-close"><i class="fas fa-times"></i></a></li>
            <li class="margin-right:15px"><a class="btn-modal-maximize"><i data-transform_to="far fa-window-restore" class="far fa-window-maximize"></i></a></li>
            <li class="margin-right:15px"><a class="btn-modal-minimize"><i class="far fa-window-minimize"></i></a></li>

            <!-- fullscreen toogle and icon transform-->
            <li class="margin-right:15px"><a data-fullscreen><i data-transform_to="fas fa-compress" class="fas fa-expand"></i></a></li>

            <!-- Render Code Editor -->
            <li class="margin-right:15px">
                <a target="modal" href="https://server.cocreate.app/CoCreate-modules/CoCreate-builder/components/code-editor.html" data-modal_header="false" data-pass_collection="module-views" data-pass_document_id="" data-pass_name="html" data-pass_to="render" data-modal_width="100%"
                    data-modal_height="100%" data-modal_color="#229954" data-modal_header="false">
                    <i class="fa fa-code"></i>
                    <div data-pass-collection="apples" data-pass-document_id="603ffc2dc975bd2c3cfe6b5f" name='html' data-pass_to="code-editor"></div>
                </a>
            </li>
            <!--<li class="margin-right:15px">-->
            <!--  <a target="modal" -->
            <!--     data-pass_collection="module-views"-->
            <!--     data-pass_document_id="5fa899804b4c3e4dea76abf0" -->
            <!--     data-pass_name="html" -->
            <!--     data-pass_to="render" -->
            <!--     data-modal_width="100%"-->
            <!--     data-modal_header="false">-->
            <!--    <i class="fas fa-code"></i>-->
            <!--    <div data-pass_id="render" data-collection="module_activities" data-document_id="5edee53c3e956152355a3442" name='html' data-pass_to="code-editor"></div>-->
            <!--  </a>-->
            <!--</li>-->

            <!-- Builder Controls -->
            <li class="margin-right:15px"><a id="clean-canvas"><i class="far fa-trash-alt"></i></a></li>
            <li class="margin-right:15px"><a id='element-borders' class=""><i class="far fa-square"></i></a></li>
            <li class="margin-right:15px"><a id="redo-canvas" class=""><i class="fas fa-redo-alt"></i></a></li>
            <li class="margin-right:15px"><a id='undo-canvas' class=""><i class="fas fa-undo-alt"></i></a></li>
            <li class="margin-right:15px"><a id="desktop-view" class=""><i class="fas fa-desktop"></i></a></li>
            <li class="margin-right:15px"><a id="tablet-view" class=""><i class="fas fa-tablet-alt"></i></a></li>
            <li class="margin-right:15px"><a id="mobile-view" class=""><i class="fas fa-mobile-alt"></i></a></li>
        </ul>

        <!-- Menu Icon Arrow Right Animations -->
        <a aria-label="mobile menu" class="menu_icon arrow-right active" data-toggle="active" data-toggle_sidenav="menuR">
            <span></span>
            <span></span>
            <span></span>
        </a>

    </div>

    <!-- Modal viewport -->
    <div class="position:fixed z-index:12!important" data-main_content_id="" id="modal-viewport"></div>

    <!-- Main Container -->
    <div data-main_content_id="canvas" class="height:100vh">
        <!--<textarea data-collection="apples" data-document_id="" name='html' class="width:804px height:314px"></textarea>-->
        <iframe data-vdom_id="test" id="canvas" data-collection="apples" data-document_id="60aab093ad09963911f52ef5" name='html' data-read_value="false"  frameborder="0" width="100%" height="100%"></iframe>
    </div>

    <!-- SideNav Left -->
    <div id="menuL" class="cocreate-sidenav background:gainsboro height:100vh" data-main_content="canvas,content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-default_phone="offcanvas" sidenav-ontoggle_desktop="offcanvas"
        sidenav-ontoggle_tablet="offcanvas">
        <div class="padding:5px">
            <div class="display:flex tabs">
                <div class="padding:10px_18px border-radius:3px_3px_0_0 font-size:16px cursor:pointer background:gainsboro background:silver:hover tab" data-selected="active" data-selected_target="#blocks" data-selected_group="left-panels"><i class="fas fa-th-large"></i></div>
                <div class="padding:10px_20px border-radius:3px_3px_0_0 font-size:16px cursor:pointer background:gainsboro background:silver:hover tab" data-selected="active" data-selected_target="#vdom" data-selected_group="left-panels" selected><i class="fas fa-stream"></i></div>
                <div class="padding:10px_20px border-radius:3px_3px_0_0 font-size:16px cursor:pointer background:gainsboro background:silver:hover tab" data-selected="active" data-selected_target="#files" data-selected_group="left-panels"><i class="fas fa-folder"></i></div>
            </div>
            <div class="overflow:auto height:90vh">
                <!-- Blocks -->
                <div id="blocks" data-template_id="template1" data-fetch_collection="blocks" data-filter_name="menu-position" data-filter_value="0" data-filter_value_type="number" data-filter_operator="$ne" data-order_by="menu-position" data-order_type="asc" class="left-panel display:none">
                    <!-- template -->
                    <li data-draggable="true" class="template menuItem" id="header" data-insert-html='{{data.html}}'>
                        <span data-collection="" data-document_id="{{data._id}}" name="icon" class="padding-10px"></span>
                        <span data-collection="" data-document_id="{{data._id}}" name="name"></span>
                        <div class="float-right">
                            <a target="modal" href="block-form.html" data-pass_collection="blocks" data-pass_document_id="" data-pass_to="form-fields" data-modal_width="320px" data-modal_height="100%" data-modal_color="#229954">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                        </div>
                    </li>
                    <div class="background:silver">
                        <!-- Search -->
                        <form class="padding:5px">
                            <input type="text" class="floating-label" data-pass_value_to="results">
                            <span class="passValueBtn position:relative bottom:28px right:14px float:right font-size:18px">
            					<a target="modal" data-pass_to="render" data-collection="website-pages" data-document_id="" data-pass_name="html" data-modal_width="900px" data-modal_color="#229954">
            						<i class="fas fa-search"></i>
            					</a>
            				</span>
                        </form>

                        <div class="height:90vh">
                            <div class="background:silver">
                                <!-- Blocks -->
                                <div id="blocks" class="block-panel display:none">
                                    <!--Layout -->
                                    <div class="padding:5px background:darkgrey border-bottom:1px_solid_grey" data-show=".sizing" data-hide=".sizing">
                                        <span class="sizing hidden"><i class="fas fa-plus"></i></span>
                                        <span class="sizing"><i class="fas fa-minus"></i></span>
                                        <span>Layout</span>
                                    </div>
                                    <div class="sizing padding-bottom:20px">
                                        <div class="display:flex flex-wrap:wrap justify-content:center text-align:center">
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<section></section>'>
                                                    <svg aria-hidden="true" focusable="false" width="50" viewBox="0 0 62 50"><path opacity=".25" fill="currentColor" d="M59 1H3c-1.1 0-2 .9-2 2v44c0 1.1.9 2 2 2h56c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zM14.5 3c.8 0 1.5.7 1.5 1.5S15.3 6 14.5 6 13 5.3 13 4.5 13.7 3 14.5 3zm-5 0c.8 0 1.5.7 1.5 1.5S10.3 6 9.5 6 8 5.3 8 4.5 8.7 3 9.5 3zm-5 0C5.3 3 6 3.7 6 4.5S5.3 6 4.5 6 3 5.3 3 4.5 3.7 3 4.5 3zM59 47H3V8h56v39z"></path><path opacity=".2" fill="currentColor" d="M5 10h52v16H5z"></path><g fill="currentColor"><path d="M5 10h2v4H5zm50 0h2v4h-2zM7 10h2v2H7zm16 0h4v2h-4zm-6 0h4v2h-4zm-6 0h4v2h-4zm18 0h4v2h-4zm6 0h4v2h-4zm6 0h4v2h-4zM23 24h4v2h-4zm-6 0h4v2h-4zm-6 0h4v2h-4zm18 0h4v2h-4zm6 0h4v2h-4zm6 0h4v2h-4zm6-14h4v2h-4zm0 14h4v2h-4z"></path><path d="M53 10h4v2h-4zm2 12h2v4h-2zM5 22h2v4H5zm0-6h2v4H5zm50 0h2v4h-2zm-2 8h2v2h-2z"></path><path d="M5 24h4v2H5z"></path></g><g opacity=".3" fill="currentColor"><path d="M5 29h2v4H5zm50 0h2v4h-2zM7 29h2v2H7zm16 0h4v2h-4zm-6 0h4v2h-4zm-6 0h4v2h-4zm18 0h4v2h-4zm6 0h4v2h-4zm6 0h4v2h-4zM23 43h4v2h-4zm-6 0h4v2h-4zm-6 0h4v2h-4zm18 0h4v2h-4zm6 0h4v2h-4zm6 0h4v2h-4zm6-14h4v2h-4zm0 14h4v2h-4z"></path><path d="M53 29h4v2h-4zm2 12h2v4h-2zM5 41h2v4H5zm0-6h2v4H5zm50 0h2v4h-2zm-2 8h2v2h-2z"></path><path d="M5 43h4v2H5z"></path></g><path opacity=".4" d="M57 10v16H5V10h52m1-1H4v18h54V9z"></path></svg>
                                                    <div class="font-size:11px">Section</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<div class="display:flex flex-wrap:wrap">
                                            <div class="flex-grow:1" width:300px padding:15px"> <div>
                                            </div>'>
                                                    <svg aria-hidden="true" focusable="false" width="50" viewBox="0 0 62 50"><path opacity=".2" fill="currentColor" d="M14 10h16v34H14zm19 0h16v34H33z"></path><g fill="currentColor"><path d="M14 10h2v4h-2zm14 0h2v4h-2zm-12 0h2v2h-2zm4 0h4v2h-4zm0 32h4v2h-4z"></path><path d="M26 10h4v2h-4zm2 30h2v4h-2zm-14 0h2v4h-2zm0-18h2v4h-2zm0-6h2v4h-2zm14 6h2v4h-2zm-14 6h2v4h-2zm14 0h2v4h-2zm-14 6h2v4h-2zm14 0h2v4h-2zm0-18h2v4h-2zm-2 26h2v2h-2z"></path><path d="M14 42h4v2h-4zm19-32h2v4h-2zm14 0h2v4h-2zm-12 0h2v2h-2zm4 0h4v2h-4zm0 32h4v2h-4z"></path><path d="M45 10h4v2h-4zm2 30h2v4h-2zm-14 0h2v4h-2zm0-18h2v4h-2zm0-6h2v4h-2zm14 6h2v4h-2zm-14 6h2v4h-2zm14 0h2v4h-2zm-14 6h2v4h-2zm14 0h2v4h-2zm0-18h2v4h-2zm-2 26h2v2h-2z"></path><path d="M33 42h4v2h-4z"></path></g><path opacity=".25" fill="currentColor" d="M59 1H3c-1.1 0-2 .9-2 2v44c0 1.1.9 2 2 2h56c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zM14.5 3c.8 0 1.5.7 1.5 1.5S15.3 6 14.5 6 13 5.3 13 4.5 13.7 3 14.5 3zm-5 0c.8 0 1.5.7 1.5 1.5S10.3 6 9.5 6 8 5.3 8 4.5 8.7 3 9.5 3zm-5 0C5.3 3 6 3.7 6 4.5S5.3 6 4.5 6 3 5.3 3 4.5 3.7 3 4.5 3zM59 47H3V8h56v39z"></path><path opacity=".4" d="M30 10v34H14V10h16m1-1H13v36h18V9zm18 1v34H33V10h16m1-1H32v36h18V9z"></path></svg>
                                                    <div class="font-size:11px">Coloumns</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg aria-hidden="true" focusable="false" width="50" height="48" viewBox="0 0 60 48"><path opacity=".25" d="M58 0H2C.9 0 0 .9 0 2v44c0 1.1.9 2 2 2h56c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM13.5 2c.8 0 1.5.7 1.5 1.5S14.3 5 13.5 5 12 4.3 12 3.5 12.7 2 13.5 2zm-5 0c.8 0 1.5.7 1.5 1.5S9.3 5 8.5 5 7 4.3 7 3.5 7.7 2 8.5 2zm-5 0C4.3 2 5 2.7 5 3.5S4.3 5 3.5 5 2 4.3 2 3.5 2.7 2 3.5 2zM58 46H2V7h56v39z" fill="currentColor"></path><path opacity=".2" d="M13 9h15v15H13V9z" fill="currentColor"></path><path opacity=".4" d="M28 9v15H13V9h15zm1-1H12v17h17V8z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M13 9h4v2h-2v2h-2V9zm0 9v-3h2v3h-2zm0 2v4h4v-2h-2v-2h-2zm13 0v2h-2v2h4v-4h-2zm2-2v-3h-2v3h2zm-2-7v2h2V9h-4v2h2zm-4 0h-3V9h3v2zm0 11h-3v2h3v-2z" fill="currentColor"></path><path opacity=".2" d="M32 9h15v15H32V9z" fill="currentColor"></path><path opacity=".4" d="M47 9v15H32V9h15zm1-1H31v17h17V8z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M32 9h4v2h-2v2h-2V9zm0 9v-3h2v3h-2zm0 2v4h4v-2h-2v-2h-2zm13 0v2h-2v2h4v-4h-2zm2-2v-3h-2v3h2zm-2-7v2h2V9h-4v2h2zm-4 0h-3V9h3v2zm0 11h-3v2h3v-2z" fill="currentColor"></path><path opacity=".2" d="M32 28h15v15H32V28z" fill="currentColor"></path><path opacity=".4" d="M47 28v15H32V28h15zm1-1H31v17h17V27z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M32 28h4v2h-2v2h-2v-4zm0 9v-3h2v3h-2zm0 2v4h4v-2h-2v-2h-2zm13 0v2h-2v2h4v-4h-2zm2-2v-3h-2v3h2zm-2-7v2h2v-4h-4v2h2zm-4 0h-3v-2h3v2zm0 11h-3v2h3v-2z" fill="currentColor"></path><path opacity=".2" d="M13 28h15v15H13V28z" fill="currentColor"></path><path opacity=".4" d="M28 28v15H13V28h15zm1-1H12v17h17V27z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M13 28h4v2h-2v2h-2v-4zm0 9v-3h2v3h-2zm0 2v4h4v-2h-2v-2h-2zm13 0v2h-2v2h4v-4h-2zm2-2v-3h-2v3h2zm-2-7v2h2v-4h-4v2h2zm-4 0h-3v-2h3v2zm0 11h-3v2h3v-2z" fill="currentColor"></path></svg>
                                                    <div class="font-size:11px">Grid</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Basics -->
                                    <div class="padding:5px background:darkgrey border-bottom:1px_solid_grey" data-show=".basic-blocks" data-hide=".basic-blocks">
                                        <span class="basic-blocks hidden"><i class="fas fa-plus"></i></span>
                                        <span class="basic-blocks"><i class="fas fa-minus"></i></span>
                                        <span>Basics</span>
                                    </div>
                                    <div class="basic-blocks padding-bottom:20px">
                                        <div class="display:flex flex-wrap:wrap justify-content:center text-align:center">
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg class="width:40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2m0 2v14H5V5h14z"></path></svg>
                                                    <div class="font-size:11px">div</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg class="width:40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-.2-.7-.3-1-.3h-.6v-.4h6.8v.4h-.6c-.4 0-.7.1-1 .3a1 1 0 00-.6.6L18 6.9v10.3c0 .8 0 1.3.2 1.6 0 .2.2.3.4.5.4.2.7.3 1.1.3h.6v.4h-6.8v-.4h.5c.7 0 1.2-.2 1.5-.6.2-.3.3-.9.3-1.8v-4.9H8.3v4.9l.1 1.6.5.5c.3.2.7.3 1 .3h.7v.4H3.7v-.4h.6c.7 0 1.1-.2 1.4-.6.2-.3.3-.9.3-1.8V6.9L6 5.3a1 1 0 00-.5-.5l-1-.3h-.7v-.4h6.9v.4H10c-.4 0-.8.1-1 .3a1 1 0 00-.6.6l-.1 1.5v4.6z"></path></svg>
                                                    <div class="font-size:11px">Heading</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg class="width:40px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><path d="M162.1 33.7V277H148V154a113 113 0 0 1-42.6-8.8A53.4 53.4 0 0 1 80.5 122 71.6 71.6 0 0 1 72 87c0-9.6 1.2-17.5 3.5-23.8a66.2 66.2 0 0 1 27-31.1 56 56 0 0 1 18.5-6.6c9-1.7 24.2-2.5 45.4-2.5h62.1v6.2h-6.2c-5.5 0-9.7.9-12.6 2.6-2.8 1.7-5 4.1-6.3 7.3-1 2.4-1.6 8.6-1.6 18.8V277h-14V33.7h-25.7z"></path></svg>
                                                    <div class="font-size:11px">Paragraph</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--form-blocks -->
                                    <div class="padding:5px background:darkgrey border-bottom:1px_solid_grey" data-show=".form-blocks" data-hide=".form-blocks">
                                        <span class="form-blocks hidden"><i class="fas fa-plus"></i></span>
                                        <span class="form-blocks"><i class="fas fa-minus"></i></span>
                                        <span>Form</span>
                                    </div>
                                    <div class="form-blocks padding-bottom:20px">
                                        <div class="display:flex flex-wrap:wrap justify-content:center text-align:center">
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg class="width:40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" fill-rule="nonzero"></path>
                                                    <path d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" fill-rule="nonzero"></path>
                                                    <rect x="2" y="15" width="10" height="3" rx="0.5"></rect>
                                                </svg>
                                                    <div class="font-size:11px">Form</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div class="justify-content:center" data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg class="width:40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path>
                                                    <polygon points="4 10 5 10 5 14 4 14"></polygon>
                                                  </svg>
                                                    <div class="font-size:11px">Input</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg class="width:40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M22,7.5 C22,6.6 21.5,6 20.75,6 L3.25,6 C2.5,6 2,6.6 2,7.5 L2,16.5 C2,17.4 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.4 22,16.5 L22,7.5 Z M21,17 L3,17 L3,7 L21,7 L21,17 Z"></path>
                                                    <polygon points="4 8 5 8 5 12 4 12"></polygon>
                                                    <polygon points="19 7 20 7 20 17 19 17"></polygon>
                                                    <polygon points="20 8 21 8 21 9 20 9"></polygon>
                                                    <polygon points="20 15 21 15 21 16 20 16"></polygon>
                                                </svg>
                                                    <div class="font-size:11px">Textarea</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<h1>Header</h1>'>
                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Icons" width="40" viewBox="0 0 32 32" xml:space="preserve">
                                                    <style type="text/css">
                                                    	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                    </style>
                                                    <path class="st0" d="M11,13H5c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h6c1.1,0,2,0.9,2,2v6C13,12.1,12.1,13,11,13z"/>
                                                    <path class="st0" d="M11,29H5c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h6c1.1,0,2,0.9,2,2v6C13,28.1,12.1,29,11,29z"/>
                                                    <line class="st0" x1="17" y1="5" x2="29" y2="5"/>
                                                    <line class="st0" x1="17" y1="9" x2="24" y2="9"/>
                                                    <line class="st0" x1="17" y1="21" x2="29" y2="21"/>
                                                    <line class="st0" x1="17" y1="25" x2="24" y2="25"/>
                                                    <polyline class="st0" points="6,7 8,9 11,6 "/>
                                                </svg>
                                                    <div class="font-size:11px">Checkbox</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<input type="radio" value="" >'>
                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="40px" viewBox="0 0 465.088 465.088" style="enable-background:new 0 0 465.088 465.088;" xml:space="preserve">
                                                	<path d="M61.21,83.126C27.461,83.126,0,110.582,0,144.341c0,33.751,27.457,61.212,61.21,61.212s61.217-27.456,61.217-61.212   C122.427,110.582,94.958,83.126,61.21,83.126z M61.21,191.091c-25.781,0-46.752-20.969-46.752-46.75   c0-25.778,20.971-46.759,46.752-46.759c25.788,0,46.755,20.98,46.755,46.759C107.965,170.123,86.991,191.091,61.21,191.091z    M61.21,259.533C27.461,259.533,0,286.99,0,320.747c0,33.758,27.457,61.216,61.21,61.216s61.217-27.458,61.217-61.216   C122.427,286.997,94.958,259.533,61.21,259.533z M61.21,367.507c-25.781,0-46.752-20.981-46.752-46.761   C14.458,294.968,35.429,274,61.21,274c25.788,0,46.755,20.969,46.755,46.747C107.965,346.526,86.991,367.507,61.21,367.507z    M465.088,107.244v74.187c0,3.196-2.591,5.784-5.78,5.784H155.637c-3.187,0-5.775-2.587-5.775-5.784v-74.187   c0-3.19,2.588-5.778,5.775-5.778h303.663C462.498,101.46,465.088,104.048,465.088,107.244z M465.088,283.659v74.184   c0,3.195-2.591,5.777-5.78,5.777H155.637c-3.187,0-5.775-2.582-5.775-5.777v-74.184c0-3.196,2.588-5.784,5.775-5.784h303.663   C462.498,277.875,465.088,280.462,465.088,283.659z M85.765,144.336c0,13.554-10.996,24.549-24.555,24.549   c-13.554,0-24.548-10.996-24.548-24.549c0-13.554,10.994-24.547,24.548-24.547C74.769,119.789,85.765,130.782,85.765,144.336z    M85.765,320.186c0,13.558-10.996,24.545-24.555,24.545c-13.554,0-24.548-10.987-24.548-24.545c0-13.551,10.994-24.55,24.548-24.55   C74.769,295.636,85.765,306.635,85.765,320.186z"/>
                                                </svg>
                                                    <div class="font-size:11px">Radio</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<select>
                                                <option value="">option 1</option>
                                                <option value="">option 2</option>
                                            </select>'>
                                                    <svg class="width:40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
                                                    <polygon transform="translate(18.500000, 12.000000) scale(1, -1) translate(-18.500000, -12.000000) " points="18.5 11 20 13 17 13"></polygon>
                                                    <rect x="4" y="11.5" width="11" height="1"></rect>
                                                </svg>
                                                    <div class="font-size:11px">Select</div>
                                                </div>
                                            </div>
                                            <div class="card flex-grow:1 width:70px height:70px margin:5px padding:5px">
                                                <div data-cloneable="true" data-insert-html='<button>click me<button>'>
                                                    <svg class="width:40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
                                                    <rect class="gjs-block-svg-path" x="4" y="11.5" width="16" height="1"></rect>
                                                </svg>
                                                    <div class="font-size:11px">Button</div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

                <!-- Vdom -->
                <div id="vdom" data-vdom_target="test" data-group_name="test" class="left-panel display:none active">vdom</div>

                <!-- Files -->
                <div id="files" class="left-panel display:none">files</div>

            </div>
        </div>

        <div class="resizeHandler"></div>
    </div>

    <!-- SideNav Right -->
    <div data-main_content="canvas,content" sidenav-default_desktop="expanded" sidenav-default_tablet="expanded" sidenav-expanded_width="300px" sidenav-collapsed_width="0px" id="menuR" class="cocreate-sidenav sidenav-right background:gainsboro height:100vh">
        <!--<textarea class="floating-label" data-collection="module-views" data-document_id="5fb16c742fc8e61e01b43c15" name="html"></textarea>-->
        <div class="domEditor" data-collection="module-views" data-document_id="5fb16c742fc8e61e01b43c15" name="html"></div>
        <div class="resizeHandler"></div>
    </div>
    <!-- End SideNav Right -->

    <!-- Selected Toolbar -->
    <div id="selectedElementcoc" data-toolbar_placent="top" data-toolbar_target="" class="position:absolute pointer-events:none display:none">
        <div class="toolbar display:flex flex-direction:row-reverse width:100% fontsize:12px color:white">
            <span class="background:red pointer-events:auto outline:2px_red_solid"><i class="fas fa-arrows-alt"></i></span>
        </div>
        <div class="height:100% width:100% outline:1px_red_solid"></div>
    </div>
    <!-- End Selected Toolbar -->

    <!-- Hover Toolbar -->
    <div id="hoveredElementcoc" data-toolbar_placent="top" data-toolbar_target="" class="position:absolute pointer-events:none display:none">
        <div class="toolbar width:100% ">
            <span class="padding:0_5px_0_5px background:dodgerblue pointer-events:auto font-size:12px color:white border:2px_dodgerblue_solid" tagName>tagname</span>
        </div>
        <div class="height:100% width:100% border:2px_dodgerblue_solid"></div>
    </div>
    <!-- End Hover Toolbar -->
    <script>
        var config = {
            apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
            organization_Id: '5de0387b12e200ea63204d6c',
            // host: 'wss://ws.cocreate.app'
        }
    </script>
    <!--<script src="./apikey.js"></script>-->
    <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>-->
    <!--<script src="https://server.cocreate.app/CoCreateCSS/dist/CoCreateCSS.js"></script>-->


</body>
Tests:
querySelector
document.querySelector("[class='st0']")
getElementsByClassName
document.getElementsByClassName(".st0")
Rendered benchmark preparation results:
Suite status: <idle, ready to run>

Previous results
Test case name	Result
querySelector
getElementsByClassName
Fastest: N/A

Slowest: N/A

Latest run results:
Run details: (Test run date: 3 years ago)
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Browser/OS: Chrome 91 on Windows
View result in a separate tab
Test name	Executions per second
querySelector	111235.1 Ops/sec
getElementsByClassName	2142515.8 Ops/sec
Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.
It seems like you're providing an HTML code snippet and some benchmarking data, but the question is not explicitly stated. However, I'll take a guess that you want me to analyze or provide insights about the benchmarking results.
If that's the case, here are my observations:
1. **Browser and Device:** The test was run on Chrome 91 on a Windows Desktop.
2. **Benchmark Results:**
	* `getElementsByClassName`: 2142515.75 executions per second
	* `querySelector`: 111235.09375 executions per second
3. **Observations:**
	* There's a significant difference in execution speed between the two methods (around 19 times faster).
	* The faster method is `getElementsByClassName`, which suggests that this approach might be more suitable for this specific use case.
4. **Implications:**
	* Depending on the context and requirements of your application, the choice between `querySelector` and `getElementsByClassName` might have a significant impact on performance.
If I'm wrong about the question, please provide more context or clarify what you'd like me to analyze or answer!
Related benchmarks:
querySelector vs getElementsByClassName ccc2 (version: 0)

Comparing performance of: querySelector vs getElementsByClassName

Created: 3 years ago by: Guest

Jump to the latest result

querySelector

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):
