jQuery Selector Perf - Right-to-Left

JavaScript performance comparison

Revision 106 of this test case created by Reith

Info

See http://jsperf.com/jquery-selector-perf-right-to-left or scroll down.

Preparation code

<h1>jQuery Selector Perf - Right-to-Left</h1>
        <h2>JavaScript performance comparison</h2>
</hgroup>
<p class="nmeta">Test case created by <a href="//net.tutsplus.com" rel="nofollow">Jeffrey Way</a> <time datetime="2011-02-02T23:54:33+01:00" pubdate="">on 2nd February 2011</time></p>
<section id="nprep-code">
<h2>Preparation code</h2>
<pre><code><span class="nsc2">&lt;<span class="nkw2">div</span> <span class="nkw3">id</span><span class="nsy0">=</span><span class="nst0">"box"</span>&gt;</span><br>&nbsp; <span class="nsc2">&lt;<span class="nkw2">p</span>&gt;</span> Hi <span class="nsc2">&lt;<span class="nsy0">/</span><span class="nkw2">p</span>&gt;</span><br><span class="nsc2">&lt;<span class="nsy0">/</span><span class="nkw2">div</span>&gt;</span><br>&nbsp; <span class="nsc2">&lt;<span class="nkw2">script</span> <span class="nkw3">src</span><span class="nsy0">=</span><span class="nst0">"//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"</span>&gt;</span><span class="nsc2">&lt;<span class="nsy0">/</span><span class="nkw2">script</span>&gt;</span></code></pre>
</section>
<section>
<h2>Preparation code output</h2>
<div class="nuser-output">
<div id="nbox">
  <p> Hi </p>
</div>
  </div>
</section>
<section id="nrunner">
<h2>Test runner</h2>
<p id="nfirebug"><strong>Warning! For accurate results, please disable Firebug before running the tests. <a href="/faq#firebug-warning">(Why?)</a></strong></p>
<p id="njava"><strong>Java applet disabled.</strong></p>
<p id="nstatus">Done. Ready to run again.</p>
<div class="nshow" id="ncontrols"><button id="nrun" type="button">Run again</button></div>
<table id="ntest-table">
        <caption>Testing in <span id="nuser-agent">Firefox 18.0 on Linux 64-bit</span></caption>
        <thead>
                <tr>
                        <th colspan="2">Test</th>
                        <th title="Operations per second (higher is better)">Ops/sec</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <th title="Click to run this test again." tabindex="0" scope="row" id="ntitle-1"><div>"Left to Write" Thinking</div></th>
                        <td class="ncode"><pre><code>$<span class="nbr0">(</span><span class="nst0">'#box p'</span><span class="nbr0">)</span><span class="nsy0">;</span></code></pre></td>
                        <td title="Ran 843 times in 0.051 seconds." id="nresults-1" class="nresults slowest">16,516 <small>±0.33%</small><span>29% slower</span></td>
                </tr>
                <tr>
                        <th title="Click to run this test again." tabindex="0" scope="row" id="ntitle-2"><div>"Right to Left"</div></th>
                        <td class="ncode"><pre><code>$<span class="nbr0">(</span><span class="nst0">'#box'</span><span class="nbr0">)</span>.<span class="nme1">children</span><span class="nbr0">(</span><span class="nst0">'p'</span><span class="nbr0">)</span><span class="nsy0">;</span></code></pre></td>
                        <td title="Ran 940 times in 0.052 seconds." id="nresults-2" class="nresults">17,955 <small>±1.38%</small><span>24% slower</span></td>
                </tr>
                <tr>
                        <th title="Click to run this test again." tabindex="0" scope="row" id="ntitle-3"><div>Alternate "Right to Left"</div></th>
                        <td class="ncode"><pre><code>$<span class="nbr0">(</span><span class="nst0">'#box'</span><span class="nbr0">)</span>.<span class="nme1">find</span><span class="nbr0">(</span><span class="nst0">'p'</span><span class="nbr0">)</span><span class="nsy0">;</span></code></pre></td>
                        <td title="Ran 1,405 times in 0.059 seconds." id="nresults-3" class="nresults fastest">23,710 <small>±2.05%</small><span>fastest</span></td>
                </tr>
        </tbody>
</table><div class="n" id="nerror-info"></div>
</section>
<section>
<h2 id="nresults">Compare results of other browsers</h2>
<p><span id="ncharts"><strong>Chart type:</strong> <a href="#">bar</a>, <a href="#">column</a>, <a href="#">line</a>, <a href="#">pie</a>, <a href="#">table</a></span><br><span id="nfilters"><strong>Filter:</strong> <a href="#">popular</a>, <a href="#">all</a>, <a href="#">desktop</a>, <a href="#">family</a>, <a href="#">major</a>, <a href="#">minor</a>, <a href="#">mobile</a>, <a href="#">prerelease</a>
<h2>Revisions</h2>
<p>You can <a href="/jquery-selector-perf-right-to-left/edit" rel="nofollow">edit these tests or add even more tests to this page</a> by appending <code>/edit</code> to the URL. Here’s a list of current revisions for this page:</p>
<ul>
        <li class="ncurrent"><a href="/jquery-selector-perf-right-to-left">Revision 1</a>: published by Jeffrey Way <time datetime="2011-02-02T23:54:33+01:00" pubdate="">on 2nd February 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/32">Revision 32</a>: published <time datetime="2011-02-16T17:17:57+01:00" pubdate="">on 16th February 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/37">Revision 37</a>: published <time datetime="2011-03-12T23:37:09+01:00" pubdate="">on 12th March 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/38">Revision 38</a>: published <time datetime="2011-03-12T23:37:40+01:00" pubdate="">on 12th March 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/40">Revision 40</a>: published <time datetime="2011-03-24T22:50:29+01:00" pubdate="">on 24th March 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/41">Revision 41</a>: published <time datetime="2011-03-24T22:54:25+01:00" pubdate="">on 24th March 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/44">Revision 44</a>: published <time datetime="2011-05-04T14:32:37+02:00" pubdate="">on 4th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/45">Revision 45</a>: published <time datetime="2011-05-06T12:28:45+02:00" pubdate="">on 6th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/46">Revision 46</a>: published <time datetime="2011-05-12T01:24:57+02:00" pubdate="">on 12th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/47">Revision 47</a>: published <time datetime="2011-05-12T01:33:05+02:00" pubdate="">on 12th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/48">Revision 48</a>: published <time datetime="2011-05-17T17:38:33+02:00" pubdate="">on 17th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/49">Revision 49</a>: published <time datetime="2011-05-26T19:52:33+02:00" pubdate="">on 26th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/50">Revision 50</a>: published by ShiningRay <time datetime="2011-05-27T05:20:01+02:00" pubdate="">on 27th May 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/52">Revision 52</a>: published <time datetime="2011-06-10T17:34:09+02:00" pubdate="">on 10th June 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/54">Revision 54</a>: published <time datetime="2011-06-18T12:48:15+02:00" pubdate="">on 18th June 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/55">Revision 55</a>: published by tick <time datetime="2011-06-22T18:08:00+02:00" pubdate="">on 22nd June 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/56">Revision 56</a>: published <time datetime="2011-09-01T22:58:13+02:00" pubdate="">on 1st September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/57">Revision 57</a>: published <time datetime="2011-09-01T23:11:13+02:00" pubdate="">on 1st September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/58">Revision 58</a>: published by MoonScript <time datetime="2011-09-02T17:51:56+02:00" pubdate="">on 2nd September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/59">Revision 59</a>: published by richard <time datetime="2011-09-02T22:37:35+02:00" pubdate="">on 2nd September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/60">Revision 60</a>: published <time datetime="2011-09-07T19:08:55+02:00" pubdate="">on 7th September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/61">Revision 61</a>: published <time datetime="2011-09-07T19:12:56+02:00" pubdate="">on 7th September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/62">Revision 62</a>: published <time datetime="2011-09-07T19:15:49+02:00" pubdate="">on 7th September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/63">Revision 63</a>: published <time datetime="2011-09-07T19:22:08+02:00" pubdate="">on 7th September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/64">Revision 64</a>: published <time datetime="2011-09-07T19:24:12+02:00" pubdate="">on 7th September 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/65">Revision 65</a>: published <time datetime="2011-10-18T15:48:47+02:00" pubdate="">on 18th October 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/68">Revision 68</a>: published by m--s <time datetime="2011-11-28T13:56:08+01:00" pubdate="">on 28th November 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/69">Revision 69</a>: published by devu <time datetime="2011-11-29T01:14:21+01:00" pubdate="">on 29th November 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/70">Revision 70</a>: published by Scott Kosman <time datetime="2011-12-13T09:40:26+01:00" pubdate="">on 13th December 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/71">Revision 71</a>: published <time datetime="2011-12-16T14:49:07+01:00" pubdate="">on 16th December 2011</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/74">Revision 74</a>: published <time datetime="2012-01-19T12:32:30+01:00" pubdate="">on 19th January 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/75">Revision 75</a>: published <time datetime="2012-01-19T12:40:38+01:00" pubdate="">on 19th January 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/83">Revision 83</a>: published <time datetime="2012-02-22T15:29:24+01:00" pubdate="">on 22nd February 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/84">Revision 84</a>: published <time datetime="2012-03-06T01:04:11+01:00" pubdate="">on 6th March 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/87">Revision 87</a>: published <time datetime="2012-03-08T22:11:40+01:00" pubdate="">on 8th March 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/88">Revision 88</a>: published by Chris Miller <time datetime="2012-04-18T09:23:39+02:00" pubdate="">on 18th April 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/89">Revision 89</a>: published by Chris Miller <time datetime="2012-04-18T09:26:35+02:00" pubdate="">on 18th April 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/90">Revision 90</a>: published by Chris Miller <time datetime="2012-04-18T09:27:19+02:00" pubdate="">on 18th April 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/91">Revision 91</a>: published <time datetime="2012-05-02T01:21:38+02:00" pubdate="">on 2nd May 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/92">Revision 92</a>: published by Dominik Nejdl <time datetime="2012-05-14T23:55:28+02:00" pubdate="">on 14th May 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/93">Revision 93</a>: published <time datetime="2012-05-23T10:26:19+02:00" pubdate="">on 23rd May 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/94">Revision 94</a>: published <time datetime="2012-05-31T15:09:50+02:00" pubdate="">on 31st May 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/95">Revision 95</a>: published by Marco Pfeiffer <time datetime="2012-05-31T22:30:40+02:00" pubdate="">on 31st May 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/97">Revision 97</a>: published <time datetime="2012-09-27T17:22:07+02:00" pubdate="">on 27th September 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/98">Revision 98</a>: published <time datetime="2012-09-30T19:20:23+02:00" pubdate="">on 30th September 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/99">Revision 99</a>: published <time datetime="2012-09-30T19:21:25+02:00" pubdate="">on 30th September 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/101">Revision 101</a>: published <time datetime="2012-11-12T10:35:07+01:00" pubdate="">on 12th November 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/102">Revision 102</a>: published <time datetime="2012-11-16T17:27:09+01:00" pubdate="">on 16th November 2012</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/103">Revision 103</a>: published <time datetime="2013-01-26T19:04:15+01:00" pubdate="">1 week ago</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/104">Revision 104</a>: published by BinaryKitten <time datetime="2013-01-26T19:08:45+01:00" pubdate="">1 week ago</time></li>
        <li class="parent"><a href="/jquery-selector-perf-right-to-left/105">Revision 105</a>: published <time datetime="2013-02-01T20:54:51+01:00" pubdate="">4 days ago</time></li>
</ul>
</section>
<section id="ncomments"><h1>10 comments</h1><div id="ncomments-wrapper">
<article id="ncomment-1"><p class="nmeta"><img src="//gravatar.com/avatar/91f445313d631e0f89b671e16c6557f8?s=26" height="26" width="26"> Brad  commented <time datetime="2011-02-03T05:18:33+01:00" pubdate="">on 3rd February 2011</time>: <a href="#comment-1" title="Permanent link to this comment"></a></p><div><p>Jeffery, sometimes you amaze me.</p>
<p>The numbers for Opera are vastly different than firefox.  And also the speed of reading is reversed.  why is that?</p>
</div></article>
<article id="ncomment-2"><p class="nmeta"><img src="//gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=26" height="26" width="26"> <a href="//mathiasbynens.be/">Mathias Bynens</a>  commented <time datetime="2011-02-03T16:39:30+01:00" pubdate="">on 3rd February 2011</time>: <a href="#comment-2" title="Permanent link to this comment"></a></p><div><p>You should note that <code>$<span class="nbr0">(</span><span class="nst0">'#box'</span><span class="nbr0">)</span>.<span class="nme1">children</span><span class="nbr0">(</span><span class="nst0">'p'</span><span class="nbr0">)</span><span class="nsy0">;</span></code> is equivalent to <code>$<span class="nbr0">(</span><span class="nst0">'#box &gt; p'</span><span class="nbr0">)</span></code>, not <code>$<span class="nbr0">(</span><span class="nst0">'#box p'</span><span class="nbr0">)</span></code>. You’re comparing snippets that perform different tasks.</p>
</div></article>
<article id="ncomment-3"><p class="nmeta"><img src="//gravatar.com/avatar/eb810fa396af0b832ec6121274fd067d?s=26" height="26" width="26"> <a href="//omarabid.com" rel="nofollow">Abid Omar</a>  commented <time datetime="2011-02-06T00:29:41+01:00" pubdate="">on 6th February 2011</time>: <a href="#comment-3" title="Permanent link to this comment"></a></p><div><p>I think you meant "Left to right" and not "Left to write"?</p>
</div></article>
<article id="ncomment-4"><p class="nmeta"><img src="//gravatar.com/avatar/bdfd3badb24cc4f0f1799a10b8bbefa3?s=26" height="26" width="26"> <a href="//salxo.com" rel="nofollow">Salxo</a>  commented <time datetime="2011-02-15T13:19:00+01:00" pubdate="">on 15th February 2011</time>: <a href="#comment-4" title="Permanent link to this comment"></a></p><div><p>Very interesting!</p>
</div></article>
<article id="ncomment-5"><p class="nmeta"><img src="//gravatar.com/avatar/b0301cd1f76405b09cfaaf096183a59c?s=26" height="26" width="26"> John  commented <time datetime="2011-02-16T17:36:50+01:00" pubdate="">on 16th February 2011</time>: <a href="#comment-5" title="Permanent link to this comment"></a></p><div><p>Have added a few additional tests under rev 32. This whole test is incredibly relevant, we've been discussing it at work lots recently.</p>
<p>jQuery ultimately boils most things like this down to find where possible, so that's going to usually be the best approach.</p>
</div></article>
<article id="ncomment-6"><p class="nmeta"><img src="//gravatar.com/avatar/1f9f59eaa60f04ea9278267b90b98f5c?s=26" height="26" width="26"> Ümit  commented <time datetime="2011-02-25T01:37:25+01:00" pubdate="">on 25th February 2011</time>: <a href="#comment-6" title="Permanent link to this comment"></a></p><div><p>I tested in Opera 11.01, IE 8.0 , Chrome 9.0.597.98, Safari 5.0.3 and  Firefox 3.6.13. The results are showing same way except Opera.</p>
</div></article>
<article id="ncomment-7"><p class="nmeta"><img src="//gravatar.com/avatar/c2a77a7cb6142ed6c11d0b76f22d6b19?s=26" height="26" width="26"> <a href="//www.templatebase.info/" rel="nofollow">templatebase</a>  commented <time datetime="2011-03-14T11:15:28+01:00" pubdate="">on 14th March 2011</time>: <a href="#comment-7" title="Permanent link to this comment"></a></p><div><p>Very interesting! I new in jquery it is good to know what is the fastest way to search tags :)  .</p>
<p>Thanks again</p>
</div></article>
<article id="ncomment-8"><p class="nmeta"><img src="//gravatar.com/avatar/04abfc833f2fe86927fc3a074ee2b30e?s=26" height="26" width="26"> <a href="//www.tdesignonline.com" rel="nofollow">richard lee</a>  commented <time datetime="2011-09-01T23:44:01+02:00" pubdate="">on 1st September 2011</time>: <a href="#comment-8" title="Permanent link to this comment"></a></p><div><p><a rel="nofollow" href="http://jsperf.com/predefined-vs-new-query/2">http://jsperf.com/predefined-vs-new-query/2</a></p>
<p>check that out.. (note the bottom 2 examples)</p>
</div></article>
<article id="ncomment-9"><p class="nmeta"><img src="//gravatar.com/avatar/04abfc833f2fe86927fc3a074ee2b30e?s=26" height="26" width="26"> <a href="//www.tdesignonline.com" rel="nofollow">richard</a>  commented <time datetime="2011-09-02T22:39:55+02:00" pubdate="">on 2nd September 2011</time>: <a href="#comment-9" title="Permanent link to this comment"></a></p><div><p>check that out (bottom)...  <a rel="nofollow" href="http://jsperf.com/jquery-selector-perf-right-to-left/59">http://jsperf.com/jquery-selector-perf-right-to-left/59</a></p>
<p>makes you wonder about how your user experience is affected.</p>
</div></article>
<article id="ncomment-10"><p class="nmeta"><img src="//gravatar.com/avatar/4b4360b4b0e026e8d973859d65893116?s=26" height="26" width="26"> <a href="//thoughtresults.com" rel="nofollow">Saeed Neamati</a>  commented <time datetime="2012-12-03T10:37:57+01:00" pubdate="">on 3rd December 2012</time>: <a href="#comment-10" title="Permanent link to this comment"></a></p><div><p>Great. I wish we could have a place to include all of these tips and tricks related to jQuery.</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

jQuery Selector Perf - Right-to-Left

JavaScript performance comparison

Test case created by Jeffrey Way

Preparation code

<div id="box">
  <p> Hi </p>
</div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Preparation code output

Hi

Test runner

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

Java applet disabled.

Done. Ready to run again.

Testing in Firefox 18.0 on Linux 64-bit
Test Ops/sec
"Left to Write" Thinking
$('#box p');
16,516 ±0.33%29% slower
"Right to Left"
$('#box').children('p');
17,955 ±1.38%24% slower
Alternate "Right to Left"
$('#box').find('p');
23,710 ±2.05%fastest

Compare results of other browsers

Chart type: bar, column, line, pie, table
Filter: popular, all, desktop, family, major, minor, mobile, prerelease

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:

10 comments

Brad commented :

Jeffery, sometimes you amaze me.

The numbers for Opera are vastly different than firefox. And also the speed of reading is reversed. why is that?

Mathias Bynens commented :

You should note that $('#box').children('p'); is equivalent to $('#box > p'), not $('#box p'). You’re comparing snippets that perform different tasks.

Abid Omar commented :

I think you meant "Left to right" and not "Left to write"?

Salxo commented :

Very interesting!

John commented :

Have added a few additional tests under rev 32. This whole test is incredibly relevant, we've been discussing it at work lots recently.

jQuery ultimately boils most things like this down to find where possible, so that's going to usually be the best approach.

Ümit commented :

I tested in Opera 11.01, IE 8.0 , Chrome 9.0.597.98, Safari 5.0.3 and Firefox 3.6.13. The results are showing same way except Opera.

templatebase commented :

Very interesting! I new in jquery it is good to know what is the fastest way to search tags :) .

Thanks again

Saeed Neamati commented :

Great. I wish we could have a place to include all of these tips and tricks related to jQuery.

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
1. LTR
$('.parent > a');
pending…
1. RTL
$('.parent').children('a');
pending…
2. LTR
$('.parent a');
pending…
2. RTL
$('.parent').find('a');
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