p2 selector improvements

JavaScript performance comparison

Test case created by Yoav

Preparation code

<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 -->

Preparation code output

yoavstestblog

Just another WordPress.com site

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/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;
                });
        });
pending…
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');
                        $(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;
                });
        });
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment