jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Is it faster to use tag and class or just class?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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">
E-mail
</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>
slug
</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>
<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">
</textarea>
<p id="add-libraries">
Include JavaScript libraries as follows:
<code>
<script src="//cdn.ext/library.js"></script>
</code>
</p>
</div>
<div>
<label for="prep-js">
Preparation code JavaScript
<span>
(variables, functions, arrays or other objects that will be used in the tests)
</span>
</label>
<textarea name="prep-js" id="prep-js">
</textarea>
</div>
<div id="show-advanced">
<a href="#show-advanced">Show advanced fields: define <code>setup</code> and <code>teardown</code> methods</a>
</div>
<fieldset id="advanced">
<div>
<label for="setup">
Define
<code>
setup
</code>
for all tests
<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>
<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="idtofind" class="classtofind">
(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">
<input type="submit" class="submit" value="Save test case" title="Save and view test case">
</div>
</fieldset>
Ready to run.
Test | Ops/sec | |
---|---|---|
class only |
| ready |
class and tag |
| ready |
tag |
| ready |
id |
| ready |
asp id |
| ready |
asp id with tag |
| ready |
asp id with class |
| ready |
asp id with class filter |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.