document.all vs $('*')
JavaScript performance comparison
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><body></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"><body screen_capture_injected="true">
<article>
<h1><strong><em title="JavaScript">js</em>Perf</strong> — JavaScript performance playground</h1>
<h2>What is jsPerf?</h2>
<p>jsPerf aims to provide an easy way to create and share <a href="/browse" title="View some examples by browsing the jsPerf test cases">test cases</a>, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see <a href="/faq" title="Frequently asked questions">the FAQ</a>.</p>
<h2>Create a test case</h2>
<form action="/" 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" required=""></div>
<div>
<label for="slug">Slug <em title="This field is required">*</em> </label><input type="text" name="slug" id="slug" pattern="[a-z0-9](?:-?[a-z0-9])*" required=""> <p class="preview">Test case URL will be <samp>http://jsperf.com/<mark>document-all-vs</mark></samp></p>
</div>
<div><label for="visible">Published </label><label class="inline"><input type="checkbox" value="y" name="visible" id="visible" 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"></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 <em title="This field is required">*</em> </label><input type="text" name="test[1][title]" id="test[1][title]" required=""></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 <em title="This field is required">*</em> <span>(No need for loops in the test code; we’ll take care of that for you)</span></label><textarea name="test[1][code]" id="test[1][code]" class="code-js" required=""></textarea></div>
</fieldset>
<fieldset>
<h4>Test 2</h4>
<div><label for="test[2][title]">Title <em title="This field is required">*</em> </label><input type="text" name="test[2][title]" id="test[2][title]" required=""></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 <em title="This field is required">*</em> </label><textarea name="test[2][code]" id="test[2][code]" class="code-js" required=""></textarea></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>
<footer><a href="/">Add test</a> · <a href="/browse">Latest</a> · <a href="/popular">Popular</a> · <a href="/faq">FAQ</a> · <a href="/faq#donate">Donate</a> · <a href="//twitter.com/jsperf" rel="nofollow">twitter: @jsperf</a> · <a href="https://github.com/mathiasbynens/jsperf.com">source on GitHub</a> · <a href="//benchmarkjs.com/">Benchmark.js</a> · by <a href="//mathiasbynens.be/">@mathias</a> and <a href="/contributors">contributors</a></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script src="//a.jsperf.com/main-111009.js"></script>
<div class="vimiumReset vimiumHUD" style="right: 150px; opacity: 0; display: none;"></div></body><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</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><script src="//cdn.ext/library.js"></script></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.
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
document.all |
|
pending… |
$('*') |
|
pending… |
You can edit these tests or add even more tests to this page by appending /edit to the URL.
0 comments