p2 selector improvements (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="sleeve">
  <h1>
    <a href="https://yoavstestblog.wordpress.com/">yoavstestblog</a>
  </h1>
  <small>
    Just another WordPress.com site
  </small>
  <a class="secondary" href="https://yoavstestblog.wordpress.com/"></a>
</div>
</div>
<div id="wrapper">
  <div id="postbox">
    <ul id="post-types">
      <li>
        <a id="status" class="post-format-button" class="selected" href="https://yoavstestblog.wordpress.com/?p=status"
        title="Status Update">Status Update</a>
      </li>
      <li>
        <a id="post" class="post-format-button" href="https://yoavstestblog.wordpress.com/?p=post"
        title="Blog Post">Blog Post</a>
      </li>
      <li>
        <a id="quote" class="post-format-button" href="https://yoavstestblog.wordpress.com/?p=quote"
        title="Quote">Quote</a>
      </li>
      <li>
        <a id="link" class="post-format-button" href="https://yoavstestblog.wordpress.com/?p=link"
        title="Link">Link</a>
      </li>
    </ul>
    <div class="avatar">
      <img alt='' src='https://0.gravatar.com/avatar/fe9a6432e7e9d541ce8fe9574b1637ca?s=48&amp;d=identicon&amp;r=G'
      class='avatar avatar-48' height='48' width='48' />
    </div>
    <div class="inputarea">
      <form id="new_post" name="new_post" method="post" action="https://yoavstestblog.wordpress.com/">
        <label for="posttext" id="post-prompt">
          Hi, Yoav. Whatcha up to?
        </label>
        <div id="postbox-type-post" class="post-input ">
          <input type="text" name="posttitle" id="posttitle" value="" onfocus="this.value=(this.value=='Post Title') ? '' : this.value;"
          onblur="this.value=(this.value=='') ? 'Post Title' : this.value;" />
        </div>
        <div id="media-buttons" class="hide-if-no-js">
          <a href="https://yoavstestblog.wordpress.com/wp-admin/media-upload.php?post_id=0&#038;TB_iframe=1"
          class="thickbox add_media" id="-add_media" title="Add Media" onclick="return false;">Upload/Insert </a>
        </div>
        <textarea class="expand70-200" name="posttext" id="posttext" rows="4" cols="60">
        </textarea>
        <div id="postbox-type-quote" class="post-input ">
          <label for="postcitation" class="invisible">
            Citation
          </label>
          <input id="postcitation" name="postcitation" type="text" value="Citation" onfocus="this.value=(this.value=='Citation') ? '' : this.value;"
          onblur="this.value=(this.value=='') ? 'Citation' : this.value;" />
        </div>
        <label class="post-error" for="posttext" id="posttext_error">
        </label>
        <div class="postrow">
          <input id="tags" name="tags" type="text" autocomplete="off" value="Tag it" onfocus="this.value=(this.value=='Tag it') ? '' : this.value;"
          onblur="this.value=(this.value=='') ? 'Tag it' : this.value;" />
          <input id="submit" type="submit" value="Post it" />
        </div>
        <input type="hidden" name="post_format" id="post_format" value="status" />
        <span class="progress spinner-post-new" id="ajaxActivity">
        </span>
        <p style="margin-top: 1.5em;" class="comment-subscription-form">
          <input type="checkbox" name="post_subscribe" id="post_subscribe" value="post_subscribe"
          style="margin-left: .5em;" tabindex="x" />
          <label style="font-size: 1.2em; margin-bottom: .5em;" id="post_subscribe_label"
          for="post_subscribe">
            <small>
              Notify me of follow-up comments via email.
            </small>
          </label>
        </p>
        <input type="hidden" name="action" value="post" />
        <input type="hidden" id="_wpnonce" name="_wpnonce" value="2e792683f6" />
        <input type="hidden" name="_wp_http_referer" value="/" />
      </form>
    </div>
    <div class="clear">
    </div>
  </div>
  <!-- // postbox -->
  <div id="sidebar">
    <ul>
      <li id="search-2" class="widget widget_search">
        <form role="search" method="get" id="searchform" action="https://yoavstestblog.wordpress.com/">
          <div>
            <label class="screen-reader-text" for="s">
              Search for:
            </label>
            <input type="text" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Search" />
          </div>
        </form>
      </li>
      <li id="recent-posts-2" class="widget widget_recent_entries">
        <h2 class="widgettitle">
          Recent Posts
        </h2>
        <ul>
          <li>
            <a href="https://yoavstestblog.wordpress.com/2012/03/11/yet-another-test-posts-by-youav/"
            title="yet another test posts by&nbsp;youav">yet another test posts by&nbsp;youav</a>
          </li>
          <li>
            <a href="https://yoavstestblog.wordpress.com/2012/01/26/hello-world/" title="Hello&nbsp;world!">Hello&nbsp;world!</a>
          </li>
        </ul>
      </li>
      <li id="archives-2" class="widget widget_archive">
        <h2 class="widgettitle">
          Archives
        </h2>
        <ul>
          <li>
            <a href='https://yoavstestblog.wordpress.com/2012/03/' title='March 2012'>March 2012</a>
          </li>
          <li>
            <a href='https://yoavstestblog.wordpress.com/2012/01/' title='January 2012'>January 2012</a>
          </li>
        </ul>
      </li>
      <li id="categories-2" class="widget widget_categories">
        <h2 class="widgettitle">
          Categories
        </h2>
        <ul>
          <li class="cat-item cat-item-1">
            <a href="https://yoavstestblog.wordpress.com/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
          </li>
        </ul>
      </li>
      <li id="meta-2" class="widget widget_meta">
        <h2 class="widgettitle">
          Meta
        </h2>
        <ul>
          <li>
            <a href="https://yoavstestblog.wordpress.com/wp-login.php?action=register">Register</a>
          </li>
          <li>
            <a href="https://yoavstestblog.wordpress.com/wp-login.php">Log in</a>
          </li>
          <li>
            <a href="https://yoavstestblog.wordpress.com/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a>
          </li>
          <li>
            <a href="https://yoavstestblog.wordpress.com/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a>
          </li>
          <li>
            <a href="http://wordpress.com/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.com</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="clear">
    </div>
  </div>
  <!-- // sidebar -->
  <div class="sleeve_main">
    <div id="main">
      <h2>
        Recent Updates
        <span class="controls">
          <a href="#" id="togglecomments"> Toggle Comment Threads</a>
          |
          <a href="#directions" id="directions-keyboard">Keyboard Shortcuts</a>
        </span>
      </h2>
      <ul id="postlist">
        <li id="prologue-4" class="post-4 post type-post status-publish format-standard hentry category-uncategorized">
          <a href="https://yoavstestblog.wordpress.com/author/yoavf/" title="Posts by Yoav ( @yoavf )"
          class="post-avatar">
          <img alt='' src='https://0.gravatar.com/avatar/fe9a6432e7e9d541ce8fe9574b1637ca?s=48&amp;d=identicon&amp;r=G' class='avatar avatar-48' height='48' width='48' />              </a>
          <h4>
            <a href="https://yoavstestblog.wordpress.com/author/yoavf/" title="Posts by Yoav ( @yoavf )">Yoav</a>
            <span class="meta">
              <abbr title="2012-03-11T09:13:52Z">
                9:13 am
                <em>
                  on
                </em>
                March 11, 2012
              </abbr>
              <span class="actions">
                <a href="https://yoavstestblog.wordpress.com/2012/03/11/yet-another-test-posts-by-youav/"
                class="thepermalink" title="Permalink">Permalink</a>
                |
                <a rel='nofollow' title='Reply' class='comment-reply-link' href='https://yoavstestblog.wordpress.com/2012/03/11/yet-another-test-posts-by-youav/#respond'
                onclick='return addComment.moveForm("comments-4", "0", "respond", "4")'>Reply</a>
              </span>
              <span class="tags">
                &nbsp;
              </span>
            </span>
          </h4>
          <div id="content-4" class="postcontent">
            <h2>
              <a href="https://yoavstestblog.wordpress.com/2012/03/11/yet-another-test-posts-by-youav/">yet another test posts by&nbsp;youav&nbsp;</a>
            </h2>
            <p>
              YO!
            </p>
            <div id="jp-post-flair" class="sharedaddy sd-like-enabled sd-sharing-enabled">
            </div>
          </div>
          <div class="bottom-of-entry">
            &nbsp;
          </div>
          <ul id="comments-4" class="commentlist inlinecomments">
          </ul>
          <div class="respond-wrap" style="display: none; ">
            <div id="respond">
              <h3 id="reply-title">
                Reply
                <small>
                  <a rel="nofollow" id="cancel-comment-reply-link" href="/#respond" style="display:none;">Cancel reply</a>
                </small>
              </h3>
              <form action="https://yoavstestblog.wordpress.com/wp-comments-post.php" method="post"
              id="commentform">
                <p class="comment-notes">
                  Required fields are marked
                  <span class="required">
                    *
                  </span>
                </p>
                <p class="comment-form-author">
                  <label for="author">
                    Name
                    <span class="required">
                      *
                    </span>
                  </label>
                  <input id="author" name="author" type="text" value="" size="30" aria-required='true'
                  />
                </p>
                <p class="comment-form-email">
                  <label for="email">
                    Email
                    <span class="required">
                      *
                    </span>
                  </label>
                  <input id="email" name="email" type="text" value="" size="30" aria-required='true'
                  />
                </p>
                <p class="comment-form-url">
                  <label for="url">
                    Website
                  </label>
                  <input id="url" name="url" type="text" value="" size="30" />
                </p>
                <div class="form">
                  <textarea id="comment" class="expand50-100" name="comment" cols="45" rows="3">
                  </textarea>
                </div>
                <label class="post-error" for="comment" id="commenttext_error">
                </label>
                <span class="progress spinner-comment-new">
                </span>
                <p class="form-submit">
                  <input name="submit" type="submit" id="comment-submit" value="Reply" />
                  <input type='hidden' name='comment_post_ID' value='4' id='comment_post_ID' />
                  <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                </p>
                <input type="hidden" name="genseq" value="1353508516" />
                <p class="comment-subscription-form">
                  <input type="checkbox" name="subscribe" id="subscribe" value="subscribe" style="width: auto;"
                  tabindex="6" />
                  <label class="subscribe-label" id="subscribe-label" for="subscribe">
                    Notify me of follow-up comments via email.
                  </label>
                </p>
                <p style="display: none;">
                  <input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="061d4c86b0"
                  />
                </p>
                <script type='text/javascript' src='https://yoavstestblog.wordpress.com/wp-content/mu-plugins/akismet-2.5/form.js?m=1308783962g&#038;ver=1'>
                </script>
                <p style="display: none;">
                  <input type="hidden" id="ak_js" name="ak_js" value="202" />
                </p>
              </form>
            </div>
            <!-- #respond -->
          </div>
        </li>
        <li id="prologue-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized">
          <a href="https://yoavstestblog.wordpress.com/author/yoavswhatever/" title="Posts by yoavswhatever ( @yoavswhatever )"
          class="post-avatar">
          <img alt='' src='https://2.gravatar.com/avatar/217dd398b6f787abf9d9e7be3004b583?s=48&amp;d=identicon&amp;r=G' class='avatar avatar-48' height='48' width='48' />              </a>
          <h4>
            <a href="https://yoavstestblog.wordpress.com/author/yoavswhatever/" title="Posts by yoavswhatever ( @yoavswhatever )">yoavswhatever</a>
            <span class="meta">
              <abbr title="2012-01-26T00:04:35Z">
                12:04 am
                <em>
                  on
                </em>
                January 26, 2012
              </abbr>
              <span class="actions">
                <a href="https://yoavstestblog.wordpress.com/2012/01/26/hello-world/" class="thepermalink"
                title="Permalink">Permalink</a>
                |
                <a rel='nofollow' title='Reply' class='comment-reply-link' href='https://yoavstestblog.wordpress.com/2012/01/26/hello-world/#respond'
                onclick='return addComment.moveForm("comments-1", "0", "respond", "1")'>Reply</a>
              </span>
              <span class="tags">
                &nbsp;
              </span>
            </span>
          </h4>
          <div id="content-1" class="postcontent">
            <h2>
              <a href="https://yoavstestblog.wordpress.com/2012/01/26/hello-world/">Hello&nbsp;world!&nbsp;</a>
            </h2>
            <p>
              Welcome to
              <a href="http://wordpress.com/">WordPress.com</a>
              . After you read this, you should delete and write your own post, with a new title
              above. Or hit
              <a title="Direct link to the Add New in the Admin Dashboard" href="/wp-admin/post-new.php">Add New</a>
              on the left (of the
              <a title="Direct link to this blog's admin dashboard" href="/wp-admin">admin dashboard</a>
              ) to start a fresh post.
            </p>
            <p>
              <a title="Learn WordPress.com—From zero to hero." href="http://learn.wordpress.com/">Here</a>
              are some suggestions for your first post.
            </p>
            <ol>
              <li>
                You can find new ideas for what to blog about by reading
                <a title="The Daily Post at WordPress.com—post something every day" href="http://dailypost.wordpress.com/">the Daily Post</a>
                .
              </li>
              <li>
                Add
                <a title="Click the &quot;Press This&quot; link on this page to activate the Press this bookmark feature."
                href="/wp-admin/tools.php">PressThis</a>
                to your browser. It creates a new blog post for you about any interesting page you
                read on the web.
              </li>
              <li>
                <a title="Edit the first post on this blog." href="/wp-admin/post.php?post=1&amp;action=edit">Make some changes to this page</a>
                , and then hit preview on the right. You can always preview any post or edit it
                before you share it to the world.
              </li>
            </ol>
            <div id="jp-post-flair" class="sharedaddy sd-like-enabled sd-sharing-enabled">
            </div>
          </div>
          <div class="discussion" style="display: none">
            <p>
              <img alt='' src='https://0.gravatar.com/avatar/?s=16&amp;d=identicon&amp;r=G' class='avatar avatar-16'
              height='16' width='16' />
              <a href='http://WordPress.com/' rel='external nofollow' class='url'>Mr WordPress</a>
              is discussing.
              <a href="#" class="show-comments">Toggle Comments</a>
            </p>
          </div>
          <div class="bottom-of-entry">
            &nbsp;
          </div>
          <ul id="comments-1" class="commentlist inlinecomments">
            <li id="comment-1" class="comment even thread-even depth-1">
              <img alt='' src='https://0.gravatar.com/avatar/?s=32&amp;d=identicon&amp;r=G' class='avatar avatar-32'
              height='32' width='32' />
              <h4>
                <a href='http://WordPress.com/' rel='external nofollow' class='url'>Mr WordPress</a>
                <span class="meta">
                  <abbr title="2012-01-26T00:04:35Z">
                    12:04 am
                    <em>
                      on
                    </em>
                    January 26, 2012
                  </abbr>
                  <span class="actions">
                    <a class="thepermalink" href="https://yoavstestblog.wordpress.com/2012/01/26/hello-world/#comment-1"
                    title="Permalink">Permalink</a>
                    |
                    <a rel='nofollow' class='comment-reply-link' href='https://yoavstestblog.wordpress.com/2012/01/26/hello-world/#respond'
                    title='Reply' onclick='return addComment.moveForm("commentcontent-1", "1", "respond", "1")'>Reply</a>
                  </span>
                </span>
              </h4>
              <div id="commentcontent-1" class="commentcontent">
                <p>
                  Hi, this is a comment.
                  <br />
                  To delete a comment, just log in, and view the posts&#8217; comments, there you
                  will have the option to edit or delete them.
                </p>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <div class="navigation">
        <p class="nav-older">
        </p>
        <p class="nav-newer">
        </p>
      </div>
    </div>
    <!-- main -->
  </div>
  <!-- sleeve -->

Test runner

Ready to run.

Testing in
TestOps/sec
original
$(document).ready(function() {
  $('#post_format').val($('#post-types a.selected').attr('id'));
  $('#post-types a').click(function(e) {
    $('.post-input').hide();
    $('#post-types a').removeClass('selected');
    $(this).addClass('selected');
    if ($(this).attr('id') == 'post') {
      $('#posttitle').val("<?php echo esc_js( __('Post Title', 'p2') ); ?>");
    } else {
      $('#posttitle').val('');
    }
    $('#postbox-type-' + $(this).attr('id')).show();
    $('#post_format').val($(this).attr('id'));
    return false;
  });
});
ready
improved
$(document).ready(function($) {
  $('#post_format').val($('#post-types').find('a.selected').attr('id'));
  $('#post-types').find('a').click(function(e) {
    $('.post-input').hide();
    $('#post-types').find('a').removeClass('selected');
    var $this=$(this);
    $this.addClass('selected');
    if ($this.attr('id') == 'post') {
      $('#posttitle').val("<?php echo esc_js( __('Post Title', 'p2') ); ?>");
    } else {
      $('#posttitle').val('');
    }
    $('#postbox-type-' + $this.attr('id')).show();
    $('#post_format').val($this.attr('id'));
    return false;
  });
});
ready

Revisions

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