Info

Trying to measure the cost of re-wrapping a variable that is already wrapped inside jQuery.

Preparation code

<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>
              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>
                &lt;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>
              &lt;script src="//cdn.ext/library.js">&lt;/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
              <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">
        <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/jsprf" rel="nofollow">twitter: @jsprf</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/jquery.min.js">
</script>

Preparation code output

Test runner

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

Java applet disabled.

$('label[for=visible]');

$($('label[for=visible]'))

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:

• Revision 1: published by David Hong on 16th March 2012
• Revision 2: published on 26th March 2012

0 comments