Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelector vs getElementsByClassName ccc2
(version: 0)
Comparing performance of:
querySelector vs getElementsByClassName
Created:
4 years ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelector
getElementsByClassName
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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 - large HTML
querySelector vs getElementsByClassName ccc1
TreeWalker vs querySelectorAll (* all elements) 2
getElementById vs querySelector test
Comments
Confirm delete:
Do you really want to delete benchmark?