[id] selector (v5)

Revision 5 of this benchmark created by aaronzh on

Preparation HTML

<html lang="en" prefix="content: http://purl.org/rss/1.0/modules/content/
 dc: http://purl.org/dc/terms/
 foaf: http://xmlns.com/foaf/0.1/
 og: http://ogp.me/ns#
 rdfs: http://www.w3.org/2000/01/rdf-schema#
 sioc: http://rdfs.org/sioc/ns#
 sioct: http://rdfs.org/sioc/types#
 skos: http://www.w3.org/2004/02/skos/core#
 xsd: http://www.w3.org/2001/XMLSchema#
" dir="ltr" class="js"><head>
    <meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<meta content="on" http-equiv="cleartype">
<meta content="true" name="HandheldFriendly">
<meta content="width" name="MobileOptimized">
<meta content="Drupal 8 (http://drupal.org)" name="Generator">
<link type="image/vnd.microsoft.icon" href="/core/misc/favicon.ico" rel="shortcut icon">
    <title>Create Article | </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


  </head>
  <body class="html not-front logged-in no-sidebars page-node page-node-add page-node-add-article toolbar toolbar-drawer" style="padding-top: 64px;">
    <div id="skip-link">
      <a class="element-invisible element-focusable" href="#main-content">Skip to main content</a>
    </div>
      <div class="region region-page-top">
    <nav class="toolbar overlay-displace-top clearfix toolbar-processed" role="navigation" id="toolbar" data-offset-top="64">
  <div class="toolbar-menu clearfix">
    <ul id="toolbar-home"><li class="home odd first last"><a title="Home" href="/~theodore/DRUPAL/drupal-8/index.php/"><span class="home-link">Home</span></a></li></ul>    <ul id="toolbar-user"><li class="account odd first"><a title="User account" href="/~theodore/DRUPAL/drupal-8/index.php/user">Hello <strong>test</strong></a></li><li class="logout even last"><a href="/~theodore/DRUPAL/drupal-8/index.php/user/logout">Log out</a></li></ul>    <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-9-path-admin-content odd first"><a title="Administer content and comments." id="toolbar-link-admin-content" href="/~theodore/DRUPAL/drupal-8/index.php/admin/content"><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></a></li><li class="menu-20-path-admin-structure even"><a title="Administer blocks, content types, menus, etc." id="toolbar-link-admin-structure" href="/~theodore/DRUPAL/drupal-8/index.php/admin/structure"><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></a></li><li class="menu-7-path-admin-appearance odd"><a title="Select and configure your themes." id="toolbar-link-admin-appearance" href="/~theodore/DRUPAL/drupal-8/index.php/admin/appearance"><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></a></li><li class="menu-17-path-admin-people even"><a title="Manage user accounts, roles, and permissions." id="toolbar-link-admin-people" href="/~theodore/DRUPAL/drupal-8/index.php/admin/people"><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></a></li><li class="menu-15-path-admin-modules odd"><a title="Extend site functionality." id="toolbar-link-admin-modules" href="/~theodore/DRUPAL/drupal-8/index.php/admin/modules"><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></a></li><li class="menu-8-path-admin-config even"><a title="Administer settings." id="toolbar-link-admin-config" href="/~theodore/DRUPAL/drupal-8/index.php/admin/config"><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></a></li><li class="menu-18-path-admin-reports odd"><a title="View reports, updates, and errors." id="toolbar-link-admin-reports" href="/~theodore/DRUPAL/drupal-8/index.php/admin/reports"><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></a></li><li class="menu-11-path-admin-help even last"><a title="Reference for usage, configuration, and modules." id="toolbar-link-admin-help" href="/~theodore/DRUPAL/drupal-8/index.php/admin/help"><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></a></li></ul>          <a class="toggle toggle-active toolbar-toggle-processed" title="Hide shortcuts" href="/~theodore/DRUPAL/drupal-8/index.php/toolbar/toggle?destination=node/add/article">Hide shortcuts</a>      </div>

  <div class="toolbar-drawer clearfix"><div id="shortcut-toolbar"><ul class="menu"><li class="first leaf"><a href="/~theodore/DRUPAL/drupal-8/index.php/node/add">Add content</a></li>
<li class="last leaf"><a href="/~theodore/DRUPAL/drupal-8/index.php/admin/content">Find content</a></li>
</ul></div><a id="edit-shortcuts" href="/~theodore/DRUPAL/drupal-8/index.php/admin/config/user-interface/shortcut/shortcut-set-1">Edit shortcuts</a></div></nav>
  </div>
      <div class="clearfix" id="branding">
    <nav class="breadcrumb" role="navigation"><h2 class="element-invisible">You are here</h2><ol><li><a href="/~theodore/DRUPAL/drupal-8/index.php/">Home</a> » </li><li><a href="/~theodore/DRUPAL/drupal-8/index.php/node/add">Add content</a></li></ol></nav>              <h1 class="page-title">Create Article</h1>
        <div class="add-or-remove-shortcuts add-shortcut"><a href="/~theodore/DRUPAL/drupal-8/index.php/admin/config/user-interface/shortcut/shortcut-set-1/add-link-inline?link=node/add/article&amp;name=Create%20Article&amp;destination=node/add/article&amp;token=PEjMJ2KexhrnEclGXKSUGgIAnBRMQtRxvHyyfriQxSw"><span class="icon">Add or remove shortcut</span><span class="text">Add to <em class="placeholder">Default</em> shortcuts</span></a></div>      </div>

  <div id="page">
          <div class="tabs-secondary clearfix"></div>
    
    <div class="clearfix" id="content">
      <div class="element-invisible"><a id="main-content"></a></div>
                    <div id="help">
                  </div>
                    <div class="region region-content">
    <div class="block block-system" id="block-system-main">

    
  <div class="content">
    <form accept-charset="UTF-8" id="article-node-form" method="post" action="/~theodore/DRUPAL/drupal-8/index.php/node/add/article" enctype="multipart/form-data" class="node-article-form node-form"><div><div class="form-item form-type-textfield form-item-title">
  <label for="edit-title">Title <abbr title="This field is required." class="form-required">*</abbr></label>
 <input type="text" aria-required="true" required="required" class="form-text required" maxlength="255" size="60" value="" name="title" id="edit-title">
</div>
<div id="edit-field-tags" class="field-type-taxonomy-term-reference field-name-field-tags field-widget-taxonomy-autocomplete form-wrapper"><div class="form-item form-type-textfield form-item-field-tags-und" role="application">
  <label for="edit-field-tags-und">Tags </label>
 <input type="text" maxlength="1024" size="60" value="" name="field_tags[und]" id="edit-field-tags-und" class="form-autocomplete form-text" aria-describedby="edit-field-tags-und--description" autocomplete="OFF" aria-autocomplete="list"><input type="hidden" disabled="disabled" class="autocomplete autocomplete-processed" value="/index.php/taxonomy/autocomplete/field_tags" id="edit-field-tags-und-autocomplete">

<div id="edit-field-tags-und--description" class="description">Enter a comma-separated list of words to describe your content.</div>
<span aria-live="assertive" class="element-invisible" id="edit-field-tags-und-autocomplete-aria-live"></span></div>
</div><div id="edit-body" class="field-type-text-with-summary field-name-body field-widget-text-textarea-with-summary form-wrapper"><div id="body-add-more-wrapper"><div class="text-format-wrapper"><div class="text-summary-wrapper" style="display: none;"><div class="form-item form-type-textarea form-item-body-und-0-summary">
  <label for="edit-body-und-0-summary">Summary </label>
 <div class="form-textarea-wrapper"><textarea cols="60" rows="3" name="body[und][0][summary]" id="edit-body-und-0-summary" aria-describedby="edit-body-und-0-summary--description" class="text-summary form-textarea resize-vertical text-summary-processed"></textarea></div>
<div id="edit-body-und-0-summary--description" class="description">Leave blank to use trimmed value of full text as the summary.</div>
</div>
</div><div class="form-item form-type-textarea form-item-body-und-0-value">
  <label for="edit-body-und-0-value">Body <span class="field-edit-link">(<a href="#nogo" class="link-edit-summary">Edit summary</a>)</span></label>
 <div class="form-textarea-wrapper"><textarea cols="60" rows="9" name="body[und][0][value]" id="edit-body-und-0-value" class="text-full form-textarea resize-vertical"></textarea></div>
</div>
<fieldset id="edit-body-und-0-format" class="filter-wrapper form-wrapper"><div class="fieldset-wrapper"><div id="edit-body-und-0-format-help" class="filter-help form-wrapper"><p><a target="_blank" href="/~theodore/DRUPAL/drupal-8/index.php/filter/tips">More information about text formats</a></p></div><div class="form-item form-type-select form-item-body-und-0-format">
  <label for="edit-body-und-0-format--2">Text format </label>
 <select name="body[und][0][format]" id="edit-body-und-0-format--2" class="filter-list form-select"><option selected="selected" value="filtered_html">Filtered HTML</option><option value="full_html">Full HTML</option><option value="plain_text">Plain text</option></select>
</div>
<div id="edit-body-und-0-format-guidelines" class="filter-guidelines form-wrapper filter-guidelines-processed"><div class="filter-guidelines-item filter-guidelines-filtered_html" style="display: block;"><h3 style="display: none;">Filtered HTML</h3><ul class="tips"><li>Web page addresses and e-mail addresses turn into links automatically.</li><li>Allowed HTML tags: &lt;a&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;</li><li>Lines and paragraphs break automatically.</li></ul></div><div class="filter-guidelines-item filter-guidelines-full_html" style="display: none;"><h3 style="display: none;">Full HTML</h3><ul class="tips"><li>Web page addresses and e-mail addresses turn into links automatically.</li><li>Lines and paragraphs break automatically.</li></ul></div><div class="filter-guidelines-item filter-guidelines-plain_text" style="display: none;"><h3 style="display: none;">Plain text</h3><ul class="tips"><li>No HTML tags allowed.</li><li>Web page addresses and e-mail addresses turn into links automatically.</li><li>Lines and paragraphs break automatically.</li></ul></div></div></div></fieldset>
</div>
</div></div><div id="edit-field-image" class="field-type-image field-name-field-image field-widget-image-image form-wrapper"><div id="edit-field-image-und-0-upload-ajax-wrapper"><div class="form-item form-type-managed-file form-item-field-image-und-0">
  <label for="edit-field-image-und-0-upload">Image </label>
 <div class="image-widget form-managed-file clearfix"><div class="image-widget-data"><input type="file" class="form-file" size="22" name="files[field_image_und_0]" id="edit-field-image-und-0-upload"><input type="submit" class="form-submit drupal-ajax-processed" value="Upload" name="field_image_und_0_upload_button" id="edit-field-image-und-0-upload-button" formnovalidate="formnovalidate"><input type="hidden" value="0" name="field_image[und][0][fid]">
<input type="hidden" value="1" name="field_image[und][0][display]">
</div></div>
<div id="edit-field-image-und-0-upload--description" class="description">Upload an image to go with this article.<br>Files must be less than <strong>200 MB</strong>.<br>Allowed file types: <strong>png gif jpg jpeg</strong>.</div>
</div>
</div></div><input type="hidden" value="" name="changed">
<input type="hidden" value="form-SR0WGYkjATitLL6HxPOjUZAh4BU1Y-RpmAkMfu1wvVI" name="form_build_id">
<input type="hidden" value="e-F2Bc0nB-BxGmcGIGgMS9MZgbANCqWon_J2ols84L0" name="form_token">
<input type="hidden" value="article_node_form" name="form_id">
<h2 class="element-invisible">Vertical Tabs</h2><div class="vertical-tabs clearfix"><ul class="vertical-tabs-list"><li tabindex="-1" class="vertical-tab-button first selected"><a href="#"><strong>Menu settings</strong><span class="summary">Not in menu</span><span class="element-invisible" id="active-vertical-tab">(active tab)</span></a></li><li tabindex="-1" class="vertical-tab-button"><a href="#"><strong>Revision information</strong><span class="summary">No revision</span></a></li><li tabindex="-1" class="vertical-tab-button"><a href="#"><strong>URL path settings</strong><span class="summary">No alias</span></a></li><li tabindex="-1" class="vertical-tab-button"><a href="#"><strong>Comment settings</strong><span class="summary"></span></a></li><li tabindex="-1" class="vertical-tab-button"><a href="#"><strong>Authoring information</strong><span class="summary">By test</span></a></li><li tabindex="-1" class="vertical-tab-button last"><a href="#"><strong>Publishing options</strong><span class="summary">Published, Promoted to front page</span></a></li></ul><div class="vertical-tabs-panes vertical-tabs-processed"><fieldset id="edit-menu" class="menu-link-form form-wrapper vertical-tabs-pane"><legend><span class="fieldset-legend">Menu settings</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-checkbox form-item-menu-enabled">
 <input type="checkbox" class="form-checkbox" value="1" name="menu[enabled]" id="edit-menu-enabled">  <label for="edit-menu-enabled" class="option">Provide a menu link </label>

</div>
<div class="form-wrapper" id="edit-menu--2" style="display: none;"><div class="form-item form-type-textfield form-item-menu-link-title">
  <label for="edit-menu-link-title">Menu link title </label>
 <input type="text" class="form-text" maxlength="128" size="60" value="" name="menu[link_title]" id="edit-menu-link-title">
</div>
<div class="form-item form-type-textarea form-item-menu-description">
  <label for="edit-menu-description">Description </label>
 <div class="form-textarea-wrapper"><textarea class="form-textarea resize-vertical" cols="60" rows="1" name="menu[description]" id="edit-menu-description" aria-describedby="edit-menu-description--description"></textarea></div>
<div id="edit-menu-description--description" class="description">Shown when hovering over the menu link.</div>
</div>
<div class="form-item form-type-select form-item-menu-parent">
  <label for="edit-menu-parent">Parent item </label>
 <select name="menu[parent]" id="edit-menu-parent" class="menu-parent-select form-select"><option selected="selected" value="main-menu:0">&lt;Main menu&gt;</option><option value="main-menu:221">-- Home</option></select>
</div>
<div class="form-item form-type-select form-item-menu-weight">
  <label for="edit-menu-weight">Weight </label>
 <select class="form-select" name="menu[weight]" id="edit-menu-weight" aria-describedby="edit-menu-weight--description"><option value="-50">-50</option><option value="-49">-49</option><option value="-48">-48</option><option value="-47">-47</option><option value="-46">-46</option><option value="-45">-45</option><option value="-44">-44</option><option value="-43">-43</option><option value="-42">-42</option><option value="-41">-41</option><option value="-40">-40</option><option value="-39">-39</option><option value="-38">-38</option><option value="-37">-37</option><option value="-36">-36</option><option value="-35">-35</option><option value="-34">-34</option><option value="-33">-33</option><option value="-32">-32</option><option value="-31">-31</option><option value="-30">-30</option><option value="-29">-29</option><option value="-28">-28</option><option value="-27">-27</option><option value="-26">-26</option><option value="-25">-25</option><option value="-24">-24</option><option value="-23">-23</option><option value="-22">-22</option><option value="-21">-21</option><option value="-20">-20</option><option value="-19">-19</option><option value="-18">-18</option><option value="-17">-17</option><option value="-16">-16</option><option value="-15">-15</option><option value="-14">-14</option><option value="-13">-13</option><option value="-12">-12</option><option value="-11">-11</option><option value="-10">-10</option><option value="-9">-9</option><option value="-8">-8</option><option value="-7">-7</option><option value="-6">-6</option><option value="-5">-5</option><option value="-4">-4</option><option value="-3">-3</option><option value="-2">-2</option><option value="-1">-1</option><option selected="selected" value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option></select>
<div id="edit-menu-weight--description" class="description">Menu links with smaller weights are displayed before links with larger weights.</div>
</div>
</div></div></fieldset>
<fieldset id="edit-revision-information" class="node-form-revision-information form-wrapper vertical-tabs-pane" style="display: none;"><legend><span class="fieldset-legend">Revision information</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-checkbox form-item-revision">
 <input type="checkbox" class="form-checkbox" value="1" name="revision" id="edit-revision">  <label for="edit-revision" class="option">Create new revision </label>

</div>
<div class="form-item form-type-textarea form-item-log">
  <label for="edit-log">Revision log message </label>
 <div class="form-textarea-wrapper"><textarea class="form-textarea resize-vertical" cols="60" rows="4" name="log" id="edit-log" aria-describedby="edit-log--description"></textarea></div>
<div id="edit-log--description" class="description">Briefly describe the changes you have made.</div>
</div>
</div></fieldset>
<fieldset id="edit-path" class="path-form form-wrapper vertical-tabs-pane" style="display: none;"><legend><span class="fieldset-legend">URL path settings</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-path-alias">
  <label for="edit-path-alias">URL alias </label>
 <input type="text" class="form-text" maxlength="255" size="60" value="" name="path[alias]" id="edit-path-alias" aria-describedby="edit-path-alias--description">
<div id="edit-path-alias--description" class="description">The alternative URL for this content. Use a relative path without a trailing slash. For example, enter "about" for the about page.</div>
</div>
</div></fieldset>
<fieldset id="edit-comment-settings" class="comment-node-settings-form form-wrapper vertical-tabs-pane" style="display: none;"><legend><span class="fieldset-legend">Comment settings</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-radios form-item-comment">
  <label for="edit-comment" class="element-invisible">Comments </label>
 <div class="form-radios" id="edit-comment"><div class="form-item form-type-radio form-item-comment">
 <input type="radio" class="form-radio" checked="checked" value="2" name="comment" id="edit-comment-2" aria-describedby="edit-comment-2--description">  <label for="edit-comment-2" class="option">Open </label>

<div id="edit-comment-2--description" class="description">Users with the "Post comments" permission can post comments.</div>
</div>
<div class="form-item form-type-radio form-item-comment">
 <input type="radio" class="form-radio" value="1" name="comment" id="edit-comment-1" aria-describedby="edit-comment-1--description">  <label for="edit-comment-1" class="option">Closed </label>

<div id="edit-comment-1--description" class="description">Users cannot post comments.</div>
</div>
</div>
</div>
</div></fieldset>
<fieldset id="edit-author" class="node-form-author form-wrapper vertical-tabs-pane" style="display: none;"><legend><span class="fieldset-legend">Authoring information</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-name" role="application">
  <label for="edit-name">Authored by </label>
 <input type="text" maxlength="60" size="60" value="test" name="name" id="edit-name" class="form-autocomplete form-text" aria-describedby="edit-name--description" autocomplete="OFF" aria-autocomplete="list"><input type="hidden" disabled="disabled" class="autocomplete autocomplete-processed" value="/index.php/user/autocomplete" id="edit-name-autocomplete">

<div id="edit-name--description" class="description">Leave blank for <em class="placeholder"></em>.</div>
<span aria-live="assertive" class="element-invisible" id="edit-name-autocomplete-aria-live"></span></div>
<div class="form-item form-type-textfield form-item-date">
  <label for="edit-date">Authored on </label>
 <input type="text" class="form-text" maxlength="25" size="60" value="" name="date" id="edit-date" aria-describedby="edit-date--description">
<div id="edit-date--description" class="description">Format: <em class="placeholder">2012-09-05 16:35:51 +0200</em>. The date format is YYYY-MM-DD and <em class="placeholder">+0200</em> is the time zone offset from UTC. Leave blank to use the time of form submission.</div>
</div>
</div></fieldset>
<fieldset id="edit-options" class="node-form-options form-wrapper vertical-tabs-pane" style="display: none;"><legend><span class="fieldset-legend">Publishing options</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-checkbox form-item-status">
 <input type="checkbox" class="form-checkbox" checked="checked" value="1" name="status" id="edit-status">  <label for="edit-status" class="option">Published </label>

</div>
<div class="form-item form-type-checkbox form-item-promote">
 <input type="checkbox" class="form-checkbox" checked="checked" value="1" name="promote" id="edit-promote">  <label for="edit-promote" class="option">Promoted to front page </label>

</div>
<div class="form-item form-type-checkbox form-item-sticky">
 <input type="checkbox" class="form-checkbox" value="1" name="sticky" id="edit-sticky">  <label for="edit-sticky" class="option">Sticky at top of lists </label>

</div>
</div></fieldset>
<input type="hidden" value="edit-menu" name="additional_settings__active_tab" class="vertical-tabs-active-tab">
</div></div><div id="edit-actions" class="form-actions form-wrapper"><input type="submit" class="form-submit" value="Save" name="op" id="edit-submit"><input type="submit" class="form-submit" value="Preview" name="op" id="edit-preview"></div></div></form>  </div>
</div>
  </div>
    </div>

    <div id="footer">
          </div>

  </div>
      

</body></html>

Setup

var id = [];

Teardown


    var id = [];

Test runner

Ready to run.

Testing in
TestOps/sec
$('[id]').each()
$('[id]').each(function () {
  id.push(this.id);
});
ready
$('[id]') + for loop
var $ids = $('[id]');
for (var i = 0, il = $ids.length; i < il; i += 1) {
  id.push(this.id);
}
ready
qSA + for loop
var ids = document.querySelectorAll('[id]');
for (var i = 0, il = ids.length; i < il; i += 1) {
  id.push(this.id);
}
ready

Revisions

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