Check sizzle

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

<script src="http://www.allsteady.p.ht/resources/tose.js"></script>
<script src="http://www.allsteady.p.ht/resources/sizzle.js"></script>



        <h1 id="qunit-header">Tose Test Suite</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>

        <!-- Test HTML -->
        <div id="nothiddendiv" style="height:1px;background:white;" class="nothiddendiv">
                <div id="nothiddendivchild"></div>
        </div>
        <dl id="dl" style="position:absolute;top:-32767px;left:-32767px;width:1px">
        <div id="qunit-fixture">
                <p id="firstp">See <a id="simon1" href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a> for more information.</p>
                <p id="ap">
                        Here are some [links] in a normal paragraph: <a id="google" href="http://www.google.com/" title="Google!">Google</a>,
                        <a id="groups" href="http://groups.google.com/" class="GROUPS">Google Groups (Link)</a>.
                        This link has <code><a href="http://smin" id="anchor1">class="blog"</a></code>:
                        <a href="http://diveintomark.org/" class="blog" hreflang="en" id="mark">diveintomark</a>

                </p>
                <div id="foo">
                        <p id="sndp">Everything inside the red border is inside a div with <code>id="foo"</code>.</p>
                        <p lang="en" id="en">This is a normal link: <a id="yahoo" href="http://www.yahoo.com/" class="blogTest">Yahoo</a></p>
                        <p id="sap">This link has <code><a href="#2" id="anchor2">class="blog"</a></code>: <a href="http://simon.incutio.com/" class="blog link" id="simon">Simon Willison's Weblog</a></p>

                </div>
                <span id="name+value"></span>
                <p id="first">Try them out:</p>
                <ul id="firstUL"></ul>
                <ol id="empty"><!-- comment --></ol>
                <form id="form" action="formaction">
                        <label for="action" id="label-for">Action:</label>
                        <input type="text" name="action" value="Test" id="text1" maxlength="30"/>
                        <input type="text" name="text2" value="Test" id="text2" disabled="disabled"/>
                        <input type="radio" name="radio1" id="radio1" value="on"/>

                        <input type="radio" name="radio2" id="radio2" checked="checked"/>
                        <input type="checkbox" name="check" id="check1" checked="checked"/>
                        <input type="checkbox" id="check2" value="on"/>

                        <input type="hidden" name="hidden" id="hidden1"/>
                        <input type="text" style="display:none;" name="foo[bar]" id="hidden2"/>

                        <input type="text" id="name" name="name" value="name" />
                        <input type="search" id="search" name="search" value="search" />

                        <button id="button" name="button" type="button">Button</button>

                        <textarea id="area1" maxlength="30">foobar</textarea>

                        <select name="select1" id="select1">
                                <option id="option1a" class="emptyopt" value="">Nothing</option>
                                <option id="option1b" value="1">1</option>
                                <option id="option1c" value="2">2</option>
                                <option id="option1d" value="3">3</option>
                        </select>
                        <select name="select2" id="select2">
                                <option id="option2a" class="emptyopt" value="">Nothing</option>
                                <option id="option2b" value="1">1</option>
                                <option id="option2c" value="2">2</option>
                                <option id="option2d" selected="selected" value="3">3</option>
                        </select>
                        <select name="select3" id="select3" multiple="multiple">
                                <option id="option3a" class="emptyopt" value="">Nothing</option>
                                <option id="option3b" selected="selected" value="1">1</option>
                                <option id="option3c" selected="selected" value="2">2</option>
                                <option id="option3d" value="3">3</option>
                                <option id="option3e">no value</option>
                        </select>
                        <select name="select4" id="select4" multiple="multiple">
                                <optgroup disabled="disabled">
                                        <option id="option4a" class="emptyopt" value="">Nothing</option>
                                        <option id="option4b" disabled="disabled" selected="selected" value="1">1</option>
                                        <option id="option4c" selected="selected" value="2">2</option>
                                </optgroup>
                                <option selected="selected" disabled="disabled" id="option4d" value="3">3</option>
                                <option id="option4e">no value</option>
                        </select>
                        <select name="select5" id="select5">
                                <option id="option5a" value="3">1</option>
                                <option id="option5b" value="2">2</option>
                                <option id="option5c" value="1">3</option>
                        </select>

                        <object id="object1" codebase="stupid">
                                <param name="p1" value="x1" />
                                <param name="p2" value="x2" />
                        </object>

                        <span id="台北Táiběi"></span>
                        <span id="台北" lang="中文"></span>
                        <span id="utf8class1" class="台北Táiběi 台北"></span>
                        <span id="utf8class2" class="台北"></span>
                        <span id="foo:bar" class="foo:bar"><span id="foo_descendent"></span></span>
                        <span id="test.foo[5]bar" class="test.foo[5]bar"></span>

                        <foo_bar id="foobar">test element</foo_bar>
                </form>
                <b id="floatTest">Float test.</b>
                <iframe id="iframe" name="iframe"></iframe>
                <form id="lengthtest">
                        <input type="text" id="length" name="test"/>
                        <input type="text" id="idTest" name="id"/>
                </form>
                <table id="table"></table>

                <form id="name-tests">
                        <!-- Inputs with a grouped name attribute. -->
                        <input name="types[]" id="types_all" type="checkbox" value="all" />
                        <input name="types[]" id="types_anime" type="checkbox" value="anime" />
                        <input name="types[]" id="types_movie" type="checkbox" value="movie" />
                </form>

                <form id="testForm" action="#" method="get">
                        <textarea name="T3" rows="2" cols="15">?
Z</textarea>
                        <input type="hidden" name="H1" value="x" />
                        <input type="hidden" name="H2" />
                        <input name="PWD" type="password" value="" />
                        <input name="T1" type="text" />
                        <input name="T2" type="text" value="YES" readonly="readonly" />
                        <input type="checkbox" name="C1" value="1" />
                        <input type="checkbox" name="C2" />
                        <input type="radio" name="R1" value="1" />
                        <input type="radio" name="R1" value="2" />
                        <input type="text" name="My Name" value="me" />
                        <input type="reset" name="reset" value="NO" />
                        <select name="S1">
                                <option value="abc">ABC</option>
                                <option value="abc">ABC</option>
                                <option value="abc">ABC</option>
                        </select>
                        <select name="S2" multiple="multiple" size="3">
                                <option value="abc">ABC</option>
                                <option value="abc">ABC</option>
                                <option value="abc">ABC</option>
                        </select>
                        <select name="S3">
                                <option selected="selected">YES</option>
                        </select>
                        <select name="S4">
                                <option value="" selected="selected">NO</option>
                        </select>
                        <input type="submit" name="sub1" value="NO" />
                        <input type="submit" name="sub2" value="NO" />
                        <input type="image" name="sub3" value="NO" />
                        <button name="sub4" type="submit" value="NO">NO</button>
                        <input name="D1" type="text" value="NO" disabled="disabled" />
                        <input type="checkbox" checked="checked" disabled="disabled" name="D2" value="NO" />
                        <input type="radio" name="D3" value="NO" checked="checked" disabled="disabled" />
                        <select name="D4" disabled="disabled">
                                <option selected="selected" value="NO">NO</option>
                        </select>
                        <input id="list-test" type="text" />
                        <datalist id="datalist">
                                <option value="option"></option>
                        </datalist>
                </form>
                <div id="moretests">
                        <form>
                                <div id="checkedtest" style="display:none;">
                                        <input type="radio" name="checkedtestradios" checked="checked"/>
                                        <input type="radio" name="checkedtestradios" value="on"/>
                                        <input type="checkbox" name="checkedtestcheckboxes" checked="checked"/>
                                        <input type="checkbox" name="checkedtestcheckboxes" />
                                </div>
                        </form>
                        <div id="nonnodes"><span>hi</span> there <!-- mon ami --></div>
                        <div id="t2037">
                                <div><div class="hidden">hidden</div></div>
                        </div>
                        <div id="t6652">
                                <div></div>
                        </div>
                        <div id="t12087">
                                <input type="hidden" id="el12087" data-comma="0,1"/>
                        </div>
                        <div id="no-clone-exception"><object><embed></embed></object></div>
                </div>

                <div id="tabindex-tests">
                        <ol id="listWithTabIndex" tabindex="5">
                                <li id="foodWithNegativeTabIndex" tabindex="-1">Rice</li>
                                <li id="foodNoTabIndex">Beans</li>
                                <li>Blinis</li>
                                <li>Tofu</li>
                        </ol>

                        <div id="divWithNoTabIndex">I'm hungry. I should...</div>
                        <span>...</span><a href="#" id="linkWithNoTabIndex">Eat lots of food</a><span>...</span> |
                        <span>...</span><a href="#" id="linkWithTabIndex" tabindex="2">Eat a little food</a><span>...</span> |
                        <span>...</span><a href="#" id="linkWithNegativeTabIndex" tabindex="-1">Eat no food</a><span>...</span>
                        <span>...</span><a id="linkWithNoHrefWithNoTabIndex">Eat a burger</a><span>...</span>
                        <span>...</span><a id="linkWithNoHrefWithTabIndex" tabindex="1">Eat some funyuns</a><span>...</span>
                        <span>...</span><a id="linkWithNoHrefWithNegativeTabIndex" tabindex="-1">Eat some funyuns</a><span>...</span>
                </div>

                <div id="liveHandlerOrder">
                        <span id="liveSpan1"><a href="#" id="liveLink1"></a></span>
                        <span id="liveSpan2"><a href="#" id="liveLink2"></a></span>
                </div>

                <div id="siblingTest">
                        <em id="siblingfirst">1</em>
                        <em id="siblingnext">2</em>
                        <em id="siblingthird">
                                <em id="siblingchild">
                                        <em id="siblinggrandchild">
                                                <em id="siblinggreatgrandchild"></em>
                                        </em>
                                </em>
                        </em>
                        <span id="siblingspan"></span>
                </div>
        </div>
        </dl>
        <div id="fx-test-group" style="position:absolute;width:1px;height:1px;overflow:hidden;">
                <div id="fx-queue" name="test">
                        <div id="fadein" class='chain test' name='div'>fadeIn<div>fadeIn</div></div>
                        <div id="fadeout" class='chain test out'>fadeOut<div>fadeOut</div></div>

                        <div id="show" class='chain test'>show<div>show</div></div>
                        <div id="hide" class='chain test out'>hide<div>hide</div></div>

                        <div id="togglein" class='chain test'>togglein<div>togglein</div></div>
                        <div id="toggleout" class='chain test out'>toggleout<div>toggleout</div></div>


                        <div id="slideup" class='chain test'>slideUp<div>slideUp</div></div>
                        <div id="slidedown" class='chain test out'>slideDown<div>slideDown</div></div>

                        <div id="slidetogglein" class='chain test'>slideToggleIn<div>slideToggleIn</div></div>
                        <div id="slidetoggleout" class='chain test out'>slideToggleOut<div>slideToggleOut</div></div>

                        <div id="fadetogglein" class='chain test'>fadeToggleIn<div>fadeToggleIn</div></div>
                        <div id="fadetoggleout" class='chain test out'>fadeToggleOut<div>fadeToggleOut</div></div>

                        <div id="fadeto" class='chain test'>fadeTo<div>fadeTo</div></div>
                </div>

                <div id="fx-tests"></div>
        </div>

Preparation code output

Tose Test Suite

    See this blog entry for more information.

    Here are some [links] in a normal paragraph: Google, Google Groups (Link). This link has class="blog": diveintomark

    Everything inside the red border is inside a div with id="foo".

    This is a normal link: Yahoo

    This link has class="blog": Simon Willison's Weblog

    Try them out:

      test element
      Float test.
      hi there
      1. Rice
      2. Beans
      3. Blinis
      4. Tofu
      I'm hungry. I should...
      ...Eat lots of food... | ...Eat a little food... | ...Eat no food... ...Eat a burger... ...Eat some funyuns... ...Eat some funyuns...
      1 2
      fadeIn
      fadeIn
      fadeOut
      fadeOut
      show
      show
      hide
      hide
      togglein
      togglein
      toggleout
      toggleout
      slideUp
      slideUp
      slideDown
      slideDown
      slideToggleIn
      slideToggleIn
      slideToggleOut
      slideToggleOut
      fadeToggleIn
      fadeToggleIn
      fadeToggleOut
      fadeToggleOut
      fadeTo
      fadeTo

      Test runner

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

      Java applet disabled.

      Testing in unknown unknown
      Test Ops/sec
      Sizzle get element by id
      Sizzle("#qunit-fixture");
      pending…
      Sizzle get elements by class
      Sizzle(".emptyopt");
      pending…
      Sizzle get elements by tag
      Sizzle("div");
      pending…
      Sizzle get elements by css selector
      Sizzle( "p .blog, div p" );
      pending…
      Sizzle get elements by selector with filter
      Sizzle( "p .blog:first, div p:last" );
      pending…
      Sizzle get elements by selector with not filter
      Sizzle("[id='select1'] *:not(:last-child)");
      pending…
      querySelector get element by id
      document.querySelectorAll("#qunit-fixture");
      pending…
      querySelector get element by class
      document.querySelectorAll(".emptyopt");
      pending…
      querySelector get element by tag
      document.querySelectorAll("div");
      pending…
      querySelector get elements by css selector
      document.querySelectorAll("p .blog, div p");
      pending…
      Tose get element by id
      Tose("#qunit-fixture");
      pending…
      Tose get element by class
      Tose(".emptyopt");
      pending…
      Tose get element by class
      Tose("div");
      pending…
      Tose get element by css selector
      Tose("p .blog, div p");
      pending…
      Tose get element by css selector with filter
      Tose( "p .blog:first, div p:last" );
      pending…
      Tose get element by css selector with not filter
      Tose("[id='select1'] *:not(:last-child)");
      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