jami

Benchmark created by Jami on


Preparation HTML

<div class="columns layout__block layout--horizontal" id="cols" total-stage-column-count="2"><div class="column layout--relative ng-scope" id="col1" app="" order="2" column-size="small" column-is-selected="false" column-url="%2F" column-route-grouping-key="dashboard" column-on-stage="true" column-can-resize="false"><div drag-handle="" class="column__dragHandle"></div><!-- uiView:  --><div class="column__inner layout__block layout--vertical layout--full ng-scope" ui-view=""><!-- uiView: undefined --><ui-view class="layout--vertical layout__block ng-scope"><div class="layout--vertical layout__block ng-scope">
    <button ng-click="close($event)">close</button>
    <div class="slAppResize layout--horizontal layout--right ng-isolate-scope">
    <div class="slAppResize--small" ng-click="resize('small')"></div>
    <div class="slAppResize--large" ng-click="resize('large')"></div>
</div>
    <!-- uiView: undefined --><ui-view class="layout--vertical layout__block ng-scope"><!-- uiView: undefined --><ui-view class="layout--vertical layout__block ng-scope"><div class="ng-scope ng-binding">
    Welcome Somnio User
</div></ui-view></ui-view>
</div></ui-view></div></div><div class="column layout--relative ng-scope" id="col4" app="" order="1" column-size="small" column-is-selected="true" column-url="%2Fagents%2FsearchAgents" column-route-grouping-key="group2" column-on-stage="true" column-can-resize="false"><div drag-handle="" class="column__dragHandle"></div><!-- uiView:  --><div class="column__inner layout__block layout--vertical layout--full ng-scope" ui-view=""><!-- uiView: undefined --><ui-view class="layout--vertical layout__block ng-scope"><div class="layout--vertical layout__block ng-scope">
    <button ng-click="close($event)">close</button>
    <div class="slAppResize layout--horizontal layout--right ng-isolate-scope">
    <div class="slAppResize--small" ng-click="resize('small')"></div>
    <div class="slAppResize--large" ng-click="resize('large')"></div>
</div>
    <!-- uiView: undefined --><ui-view class="layout--vertical layout__block ng-scope"><!-- uiView: undefined --><ui-view class="layout--vertical layout__block ng-scope"><div class="slBreadcrumbs">
    <!-- ngRepeat: breadcrumb in breadcrumbs --><span class="slBreadcrumbs__item ng-scope" ng-repeat="breadcrumb in breadcrumbs">
        <!-- ngIf: breadcrumb.url --><a class="slBreadcrumbs__text ng-scope ng-binding" ng-href="/agents" ng-if="breadcrumb.url" href="/agents">
            Agents
        </a><!-- end ngIf: breadcrumb.url -->
        <!-- ngIf: !breadcrumb.url -->
        <!-- ngIf: !$last --><span class="slBreadcrumbs__separator ng-scope" ng-if="!$last">»</span><!-- end ngIf: !$last -->
    </span><!-- end ngRepeat: breadcrumb in breadcrumbs --><span class="slBreadcrumbs__item ng-scope" ng-repeat="breadcrumb in breadcrumbs">
        <!-- ngIf: breadcrumb.url -->
        <!-- ngIf: !breadcrumb.url --><span class="slBreadcrumbs__text ng-scope ng-binding" ng-if="!breadcrumb.url">
            Search Agents
        </span><!-- end ngIf: !breadcrumb.url -->
        <!-- ngIf: !$last -->
    </span><!-- end ngRepeat: breadcrumb in breadcrumbs -->
</div>
<div class="slPanorama layout--vertical layout__block ng-isolate-scope"><div class="slPanorama__titles layout__block--fixed" panorama-titles=""><h1 class="slPanorama__titles__item ng-scope is-active" ng-click="animateToPanel($event, 0)">Search Agents</h1></div>
    <div class="slPanorama__panels layout__block" panorama-panels="" transclude="">
    <div class="slPanorama__panel layout--vertical ng-scope ng-isolate-scope" heading="Search Agents"><div sl-scroll="" class="layout__block slScroll"><div transclude="" class="ng-scope">
        <form name="searchAgentsForm" ng-submit="submit()" class="ng-scope ng-pristine ng-valid">
            <label>Username</label>
            <input type="text" name="username" ng-model="username" class="ng-pristine ng-valid">
            <label>First Name</label>
            <input type="text" name="firstName" ng-model="firstName" class="ng-pristine ng-valid">
            <label>Last Name</label>
            <input type="text" name="lastName" ng-model="lastName" class="ng-pristine ng-valid">
            <input ng-disabled="searchAgentsForm.$invalid" type="submit" name="submit" value="Submit" hidden="">
        </form>              
        <ul class="ng-scope">
            <!-- ngRepeat: agent in searchResults -->
        </ul>
        <div class="slContextualMenu">
    <div ng-show="transcluded" transclude="" class="ng-hide"></div>
    <div class="slContextualMenu__inner isCollapsed" sl-collapse="!expanded" style="height: 44px;">       
        <ul ng-show="mainMenu" class="slContextualMenu__mainMenu" transclude-main-menu=""><li class="slContextualMenu__mainMenu__item ng-isolate-scope" icon="circleMagnifyingGlass" ng-click="submit()">
    <i class="slContextualMenu__icon" icon="circleMagnifyingGlass"><svg class="slIcon"><use xlink:href="#circleMagnifyingGlass"></use></svg></i>
    <span class="slContextualMenu__iconLabel" transclude=""><span class="ng-scope">Search</span></span>
</li></ul>
        <ul ng-show="moreMenu" class="slContextualMenu__moreMenu ng-hide" transclude-more-menu=""></ul>
        <a class="slContextualMenu__more" ng-click="expanded = !expanded">
            <i class="slContextualMenu__more__icon" icon="more"><svg class="slIcon"><use xlink:href="#more"></use></svg></i>
        </a>
    </div>
</div>
    </div></div></div>
</div>
</div></ui-view></ui-view>
</div></ui-view></div></div></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Select Parent
document.getElementById('col1');
document.getElementById('col4');
document.getElementById('col5');
document.getElementById('col6');
document.getElementById('col7');
document.getElementById('col8');
document.getElementById('col9');
document.getElementById('col10');
document.getElementById('col11');
document.getElementById('col12');
document.getElementById('col13');
document.getElementById('col14');
 
ready
Select Column
document.getElementById('col1');
document.getElementById('col4');
document.getElementById('col5');
document.getElementById('col6');
document.getElementById('col7');
document.getElementById('col8');
document.getElementById('col9');
document.getElementById('col10');
document.getElementById('col11');
document.getElementById('col12');
document.getElementById('col13');
document.getElementById('col14');
 
ready
Select with QuerySelectorAll with ID
document.querySelectorAll('#cols [app]');
ready
Select with QuerySelectorAll
document.getElementById('col1');
document.getElementById('col4');
document.getElementById('col5');
document.getElementById('col6');
document.getElementById('col7');
document.getElementById('col8');
document.getElementById('col9');
document.getElementById('col10');
document.getElementById('col11');
document.getElementById('col12');
document.getElementById('col13');
document.getElementById('col14');
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.