document.all vs $('*')

JavaScript performance comparison

Test case created by Florian Margaine

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<article>
<h1>Editing <a href="/document-all-vs">document.all vs $('*')</a></h1>
<p>Since it’s your test case, this edit will overwrite the current revision without creating a new URL.</p>
<form method="post">
        <fieldset>
                <h3>Your details (optional)</h3>
                <div><label for="author">Name </label><input type="text" name="author" id="author"></div>
                <div><label for="author-email">Email </label><label class="inline"><input type="email" name="author-email" id="author-email"> (won’t be displayed; might be used for Gravatar)</label></div>
                <div><label for="author-url">URL </label><input type="url" name="author-url" id="author-url"></div>
        </fieldset>
        <fieldset>
                <h3>Test case details</h3>
                <div><label for="title">Title <em title="This field is required">*</em> </label><input type="text" name="title" id="title" value="document.all vs $('*')" required=""></div>
                <div><label for="visible">Published </label><label class="inline"><input type="checkbox" name="visible" id="visible" value="y" checked=""> (uncheck if you want to fiddle around before making the page public)</label></div>
                <div><label for="info">Description <span>(in case you feel further explanation is needed)</span><span>(Markdown syntax is allowed)</span> </label><textarea name="info" id="info"></textarea></div>
                <div class="question"><label for="question">Are you a spammer? <span>(just answer the question)</span> </label><input type="text" name="question" id="question"></div>
                <fieldset>
                        <h3>Preparation code</h3>
                        <div>
                                <label for="prep-html">Preparation code HTML <span>(this will be inserted in the <code>&lt;body&gt;</code> of a valid HTML5 document in standards mode)</span> <span>(useful when testing DOM operations or including libraries)</span> </label><textarea name="prep-html" id="prep-html">&lt;body screen_capture_injected="true"&gt;
&lt;article&gt;
&lt;h1&gt;&lt;strong&gt;&lt;em title="JavaScript"&gt;js&lt;/em&gt;Perf&lt;/strong&gt; — JavaScript performance playground&lt;/h1&gt;
&lt;h2&gt;What is jsPerf?&lt;/h2&gt;
&lt;p&gt;jsPerf aims to provide an easy way to create and share &lt;a href="/browse" title="View some examples by browsing the jsPerf test cases"&gt;test cases&lt;/a&gt;, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see &lt;a href="/faq" title="Frequently asked questions"&gt;the FAQ&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;Create a test case&lt;/h2&gt;
&lt;form action="/" method="post"&gt;
        &lt;fieldset&gt;
                &lt;h3&gt;Your details (optional)&lt;/h3&gt;
                &lt;div&gt;&lt;label for="author"&gt;Name &lt;/label&gt;&lt;input type="text" name="author" id="author"&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label for="author-email"&gt;Email &lt;/label&gt;&lt;label class="inline"&gt;&lt;input type="email" name="author-email" id="author-email"&gt; (won’t be displayed; might be used for Gravatar)&lt;/label&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label for="author-url"&gt;URL &lt;/label&gt;&lt;input type="url" name="author-url" id="author-url"&gt;&lt;/div&gt;
        &lt;/fieldset&gt;
        &lt;fieldset&gt;
                &lt;h3&gt;Test case details&lt;/h3&gt;
                &lt;div&gt;&lt;label for="title"&gt;Title &lt;em title="This field is required"&gt;*&lt;/em&gt; &lt;/label&gt;&lt;input type="text" name="title" id="title" required=""&gt;&lt;/div&gt;
                &lt;div&gt;
                        &lt;label for="slug"&gt;Slug &lt;em title="This field is required"&gt;*&lt;/em&gt; &lt;/label&gt;&lt;input type="text" name="slug" id="slug" pattern="[a-z0-9](?:-?[a-z0-9])*" required=""&gt;                  &lt;p class="preview"&gt;Test case URL will be &lt;samp&gt;http://jsperf.com/&lt;mark&gt;document-all-vs&lt;/mark&gt;&lt;/samp&gt;&lt;/p&gt;
                &lt;/div&gt;
                &lt;div&gt;&lt;label for="visible"&gt;Published &lt;/label&gt;&lt;label class="inline"&gt;&lt;input type="checkbox" value="y" name="visible" id="visible" checked=""&gt; (uncheck if you want to fiddle around before making the page public)&lt;/label&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label for="info"&gt;Description &lt;span&gt;(in case you feel further explanation is needed)&lt;/span&gt;&lt;span&gt;(Markdown syntax is allowed)&lt;/span&gt; &lt;/label&gt;&lt;textarea name="info" id="info"&gt;&lt;/textarea&gt;&lt;/div&gt;
                &lt;div class="question"&gt;&lt;label for="question"&gt;Are you a spammer? &lt;span&gt;(just answer the question)&lt;/span&gt; &lt;/label&gt;&lt;input type="text" name="question" id="question"&gt;&lt;/div&gt;
                &lt;fieldset&gt;
                        &lt;h3&gt;Preparation code&lt;/h3&gt;
                        &lt;div&gt;
                                &lt;label for="prep-html"&gt;Preparation code HTML &lt;span&gt;(this will be inserted in the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; of a valid HTML5 document in standards mode)&lt;/span&gt; &lt;span&gt;(useful when testing DOM operations or including libraries)&lt;/span&gt; &lt;/label&gt;&lt;textarea name="prep-html" id="prep-html"&gt;&lt;/textarea&gt;                               &lt;div id="add-buttons"&gt;&lt;button id="add-jquery"&gt;jQuery&lt;/button&gt;&lt;button id="add-prototype"&gt;Prototype&lt;/button&gt;&lt;button id="add-mootools"&gt;MooTools&lt;/button&gt;&lt;button id="add-yui"&gt;YUI&lt;/button&gt;&lt;button id="add-dojo"&gt;Dojo&lt;/button&gt;&lt;button id="add-ext"&gt;Ext Core&lt;/button&gt;&lt;button id="add-ext"&gt;My Library&lt;/button&gt;&lt;/div&gt;&lt;p id="add-libraries"&gt;Include JavaScript libraries as follows: &lt;code&gt;&amp;lt;script src="//cdn.ext/library.js"&amp;gt;&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div&gt;&lt;label for="setup"&gt;Define &lt;code&gt;setup&lt;/code&gt; for all tests &lt;span&gt;(variables, functions, arrays or other objects that will be used in the tests)&lt;/span&gt; &lt;span&gt;(runs before each clocked test loop, outside of the timed code region)&lt;/span&gt; &lt;span&gt;(e.g. define local test variables, reset global variables, clear &lt;code&gt;canvas&lt;/code&gt;, etc.)&lt;/span&gt; &lt;span&gt;(&lt;a href="/faq#setup-teardown"&gt;see FAQ&lt;/a&gt;)&lt;/span&gt; &lt;/label&gt;&lt;textarea name="setup" id="setup"&gt;&lt;/textarea&gt;&lt;/div&gt;
                        &lt;div&gt;&lt;label for="teardown"&gt;Define &lt;code&gt;teardown&lt;/code&gt; for all tests &lt;span&gt;(runs after each clocked test loop, outside of the timed code region)&lt;/span&gt; &lt;span&gt;(&lt;a href="/faq#setup-teardown"&gt;see FAQ&lt;/a&gt;)&lt;/span&gt; &lt;/label&gt;&lt;textarea name="teardown" id="teardown"&gt;&lt;/textarea&gt;&lt;/div&gt;
                &lt;/fieldset&gt;
                &lt;fieldset id="tests"&gt;
                        &lt;h3&gt;Code snippets to compare&lt;/h3&gt;
                        &lt;fieldset&gt;
                                &lt;h4&gt;Test 1&lt;/h4&gt;
                                &lt;div&gt;&lt;label for="test[1][title]"&gt;Title &lt;em title="This field is required"&gt;*&lt;/em&gt; &lt;/label&gt;&lt;input type="text" name="test[1][title]" id="test[1][title]" required=""&gt;&lt;/div&gt;
                                &lt;div&gt;&lt;label for="test[1][defer]"&gt;Async&lt;/label&gt;&lt;label class="inline"&gt;&lt;input type="checkbox" value="y" name="test[1][defer]" id="test[1][defer]"&gt; (check if this is an &lt;a href="/faq#async"&gt;asynchronous test&lt;/a&gt;)&lt;/label&gt;&lt;/div&gt;
                                &lt;div&gt;&lt;label for="test[1][code]"&gt;Code &lt;em title="This field is required"&gt;*&lt;/em&gt; &lt;span&gt;(No need for loops in the test code; we’ll take care of that for you)&lt;/span&gt;&lt;/label&gt;&lt;textarea name="test[1][code]" id="test[1][code]" class="code-js" required=""&gt;&lt;/textarea&gt;&lt;/div&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset&gt;
                                &lt;h4&gt;Test 2&lt;/h4&gt;
                                &lt;div&gt;&lt;label for="test[2][title]"&gt;Title &lt;em title="This field is required"&gt;*&lt;/em&gt; &lt;/label&gt;&lt;input type="text" name="test[2][title]" id="test[2][title]" required=""&gt;&lt;/div&gt;
                                &lt;div&gt;&lt;label for="test[2][defer]"&gt;Async &lt;/label&gt;&lt;label class="inline"&gt;&lt;input type="checkbox" value="y" name="test[2][defer]" id="test[2][defer]"&gt; (check if this is an &lt;a href="/faq#async"&gt;asynchronous test&lt;/a&gt;)&lt;/label&gt;&lt;/div&gt;
                                &lt;div&gt;&lt;label for="test[2][code]"&gt;Code &lt;em title="This field is required"&gt;*&lt;/em&gt; &lt;/label&gt;&lt;textarea name="test[2][code]" id="test[2][code]" class="code-js" required=""&gt;&lt;/textarea&gt;&lt;/div&gt;
                        &lt;/fieldset&gt;
                &lt;/fieldset&gt;
                &lt;div class="buttons"&gt;&lt;button id="beautify" title="Beautify all code fields (HTML and JavaScript)"&gt;Beautify code&lt;/button&gt;&lt;button id="add-test" title="Add another code snippet to the test case"&gt;Add code snippet&lt;/button&gt;&lt;input type="submit" class="submit" value="Save test case" title="Save and view test case"&gt;&lt;/div&gt;
        &lt;/fieldset&gt;
&lt;/form&gt;
&lt;/article&gt;
&lt;footer&gt;&lt;a href="/"&gt;Add test&lt;/a&gt; · &lt;a href="/browse"&gt;Latest&lt;/a&gt; · &lt;a href="/popular"&gt;Popular&lt;/a&gt; · &lt;a href="/faq"&gt;FAQ&lt;/a&gt; · &lt;a href="/faq#donate"&gt;Donate&lt;/a&gt; · &lt;a href="//twitter.com/jsperf" rel="nofollow"&gt;twitter: @jsperf&lt;/a&gt; · &lt;a href="https://github.com/mathiasbynens/jsperf.com"&gt;source on GitHub&lt;/a&gt; · &lt;a href="//benchmarkjs.com/"&gt;Benchmark.js&lt;/a&gt; · by &lt;a href="//mathiasbynens.be/"&gt;@mathias&lt;/a&gt; and &lt;a href="/contributors"&gt;contributors&lt;/a&gt;&lt;/footer&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"&gt;&lt;/script&gt;
&lt;script src="//a.jsperf.com/main-111009.js"&gt;&lt;/script&gt;

&lt;div class="vimiumReset vimiumHUD" style="right: 150px; opacity: 0; display: none;"&gt;&lt;/div&gt;&lt;/body&gt;&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
</textarea>
                                <div id="add-buttons"><button id="add-jquery">jQuery</button><button id="add-prototype">Prototype</button><button id="add-mootools">MooTools</button><button id="add-yui">YUI</button><button id="add-dojo">Dojo</button><button id="add-ext">Ext Core</button><button id="add-ext">My Library</button></div><p id="add-libraries">Include JavaScript libraries as follows: <code>&lt;script src="//cdn.ext/library.js"&gt;&lt;/script&gt;</code></p>
                        </div>
                        <div><label for="setup">Define <code>setup</code> for all tests <span>(variables, functions, arrays or other objects that will be used in the tests)</span> <span>(runs before each clocked test loop, outside of the timed code region)</span> <span>(e.g. define local test variables, reset global variables, clear <code>canvas</code>, etc.)</span> <span>(<a href="/faq#setup-teardown">see FAQ</a>)</span> </label><textarea name="setup" id="setup"></textarea></div>
                        <div><label for="teardown">Define <code>teardown</code> for all tests <span>(runs after each clocked test loop, outside of the timed code region)</span> <span>(<a href="/faq#setup-teardown">see FAQ</a>)</span> </label><textarea name="teardown" id="teardown"></textarea></div>
                </fieldset>
                <fieldset id="tests">
                        <h3>Code snippets to compare</h3>
                        <fieldset>
                                <h4>Test 1</h4>
                                <div><label for="test[1][title]">Title </label><input type="text" name="test[1][title]" id="test[1][title]" value="document.all"></div>
                                <div><label for="test[1][defer]">Async </label><label class="inline"><input type="checkbox" value="y" name="test[1][defer]" id="test[1][defer]"> (check if this is an <a href="/faq#async">asynchronous test</a>)</label></div>
                                <div><label for="test[1][code]">Code </label><textarea name="test[1][code]" id="test[1][code]" class="code-js">document.all.length</textarea><input type="hidden" name="test[1][id]" value="325001"></div>
                        </fieldset>
                        <fieldset>
                                <h4>Test 2</h4>
                                <div><label for="test[2][title]">Title </label><input type="text" name="test[2][title]" id="test[2][title]" value="$('*')"></div>
                                <div><label for="test[2][defer]">Async </label><label class="inline"><input type="checkbox" value="y" name="test[2][defer]" id="test[2][defer]"> (check if this is an <a href="/faq#async">asynchronous test</a>)</label></div>
                                <div><label for="test[2][code]">Code </label><textarea name="test[2][code]" id="test[2][code]" class="code-js">$('*').length</textarea><input type="hidden" name="test[2][id]" value="325002"></div>
                        </fieldset>
                </fieldset>
                <div class="buttons"><button id="beautify" title="Beautify all code fields (HTML and JavaScript)">Beautify code</button><button id="add-test" title="Add another code snippet to the test case">Add code snippet</button><input type="submit" class="submit" value="Save test case" title="Save and view test case"></div>
        </fieldset>
</form>
</article>

Preparation code output

Editing document.all vs $('*')

Since it’s your test case, this edit will overwrite the current revision without creating a new URL.

Your details (optional)

Test case details

Preparation code

Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script>

Code snippets to compare

Test 1

Test 2

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
document.all
document.all.length
pending…
$('*')
$('*').length
pending…

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

Compare results of other browsers

0 comments

Add a comment