jsperf/jsperf.com

<h1>
  <strong><em title="JavaScript">js</em>Perf</strong> — JavaScript performance playground
</h1>

{{> advertisement}}

<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>
{{#if credentials}}

{{error genError tag="p"}}

<form action="/" method="post">
  <fieldset>

    <h3>Your details (optional)</h3>

    <div>
      <label for="author">Name </label><input type="text" name="author" id="author"
      {{#if author}}
        value="{{author}}"
      {{else}}
        value="{{credentials.displayName}}"
      {{/if}}
      >
    </div>
    <div>
      <label for="authorEmail">Email </label><label class="inline"><input type="email" name="authorEmail" id="authorEmail"
        {{#if authorEmail}}
          value="{{authorEmail}}"
        {{else}}
          value="{{credentials.email}}"
        {{/if}}
      > (won’t be displayed; might be used for Gravatar)</label>
    </div>
    <div>
      <label for="authorURL">URL </label><input type="url" name="authorURL" id="authorURL"
        {{#if authorURL}}
          value="{{authorURL}}"
        {{else}}
          {{#if credentials.raw.blog}}
            value="{{credentials.raw.blog}}"
          {{else}}
            value="{{credentials.raw.html_url}}"
          {{/if}}
        {{/if}}
      >
    </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 value="{{title}}">
      {{error titleError}}
    </div>
    <div>
      <label for="slug">Slug <em title="This field is required">*</em> </label>
      <input type="text" name="slug" id="slug" pattern="{{slugPattern}}" required value="{{slug}}">
      {{error slugError}}
      <p class="preview">Test case URL will be <samp>{{scheme}}://{{domain}}/<mark>{{#if slug}}{{slug}}{{else}}slug{{/if}}</mark></samp></p>
    </div>
    <div>
      <label for="visible">Published </label>
      <label class="inline">
        <input type="checkbox" value="y" name="visible" id="visible" {{#compare visible "y" operator="==="}}checked{{/compare}}>
        (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" maxlength="{{mediumTextLength}}">{{info}}</textarea>
    </div>

    <fieldset>
      <h3>Preparation code</h3>
      <div>
        <label for="initHTML">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="initHTML" id="initHTML" maxlength="{{mediumTextLength}}">{{initHTML}}</textarea>
        <p id="add-libraries">Include JavaScript libraries as follows: <code>&lt;script src="https://cdn.example.com/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" maxlength="{{mediumTextLength}}">{{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" maxlength="{{mediumTextLength}}">{{teardown}}</textarea>
      </div>
    </fieldset>

    <fieldset id="tests">
      <h3>Code snippets to compare</h3>

      {{#each test}}
        <fieldset>
          <h4>Code snippet {{inc @index}}</h4>
          <div>
            <label for="test[{{@index}}][title]">Title <em title="This field is required">*</em> </label>
            <input type="text" name="test[{{@index}}][title]" id="test[{{@index}}][title]" {{#compare @index 2}}required{{/compare}} value="{{title}}">
            {{error codeTitleError}}
          </div>
          <div>
            <label for="test[{{@index}}][defer]">Async</label>
            <label class="inline">
              <input type="checkbox" value="y" name="test[{{@index}}][defer]" id="test[{{@index}}][defer]" {{#compare defer "y" operator="==="}}checked{{/compare}}>
              (check if this is an <a href="/faq#async">asynchronous test</a>)
            </label>
          </div>
          <div>
            <label for="test[{{@index}}][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[{{@index}}][code]" id="test[{{@index}}][code]" class="code-js" maxlength="{{mediumTextLength}}" {{#compare @index 2}}required{{/compare}}>{{code}}</textarea>
            {{error codeError tag="p"}}
          </div>
        </fieldset>
      {{/each}}
    </fieldset>

    <div class="buttons">
      <input type="submit" class="submit" value="Save test case" title="Save and view test case">
    </div>

  </fieldset>
</form>
{{else}}
   <a class="login" href="/auth/github"><i class="fa fa-github"></i> Login with GitHub to Create Test Cases</a>
{{/if}}