Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelector vs getElementsByClassName ccc1
(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(".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 looks like you've provided a large HTML document and some benchmark data, but I'll try to extract the relevant information. **Task:** Identify the differences between two test cases for `getElementsByClassName` and `querySelector` From the provided data: 1. **Individual Test Cases:** * Test case 1 (getElementsByClassName): "document.getElementsByClassName(\".st0\")" * Test case 2 (querySelector): "document.querySelector(\".st0\")" 2. **Latest Benchmark Result:** * getElementsByClassName: Firefox 99, Desktop, Windows, 7991727.5 executions/second * querySelector: Firefox 99, Desktop, Windows, 374020.34375 executions/second **Key differences:** The querySelector test case performs significantly better (about 21x faster) than the getElementsByClassName test case on the same device and browser. Is there anything specific you'd like me to help with?
Related benchmarks:
querySelector vs getElementsByClassName - large HTML
querySelector vs getElementsByClassName ccc2
TreeWalker vs querySelectorAll (* all elements) 2
getElementById vs querySelector test
Comments
Confirm delete:
Do you really want to delete benchmark?