topical media & game development

talk show tell print

mobile-query-three-bench-benchmark.js-examples-jsperf-index.htm / htm



  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="description" content="This is just a test document for Benchmark.js.">
  <title>Benchmark.js test page | jsPerf</title>
  <!-- http://jsperf.com/benchmark-js-test-page -->
  <link rel="stylesheet" href="main.css">
  <script>document.documentElement.className = 'js'</script>
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body>
  <article>
    <hgroup>
      <h1>Benchmark.js test page</h1>
      <h2>JavaScript performance comparison</h2>
    </hgroup>
  
    <p class="meta">
      Test case created by <a href="http://mathiasbynens.be/">Mathias</a>
      <time datetime="2010-08-02T18:45:23+02:00" pubdate>40 seconds ago</time>
      and last updated <time datetime="2010-08-02T18:45:51+02:00">12 seconds ago</time>
    </p>
  
    <section>
      <h2>Info</h2>
      <p>
        This is just a test document for Benchmark.js.
      </p>
    </section>
  
    <section id="prep-code">
      <h2>Preparation code</h2>
      <pre><code><span
        class="sc2">&lt;<span class="kw2">div</span>&gt;</span>Lorem ipsum<span
        class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span><br><span
        class="sc2">&lt;<span class="kw2">script</span>&gt;</span><br>&nbsp; <span
        class="kw2">var</span> arr <span class="sy0">=</span> <span class="br0">&#91;</span><span
        class="nu0">1</span><span class="sy0">,</span> <span class="nu0">5</span><span
        class="sy0">,</span> <span class="nu0">4</span><span class="sy0">,</span> <span
        class="nu0">2</span><span class="sy0">,</span> <span class="nu0">3</span><span
        class="br0">&#93;</span><span class="sy0">;</span><br><br>&nbsp; <span
        class="kw2">function</span> init<span class="br0">&#40;</span><span
        class="br0">&#41;</span> <span class="br0">&#123;</span><br>&nbsp;&nbsp;&nbsp; window.<span
        class="me1">console</span> <span class="sy0">&amp;&amp;</span> console.<span
        class="me1">log</span><span class="br0">&#40;</span><span class="st0">'init called'</span><span
        class="br0">&#41;</span><span class="sy0">;</span><br>&nbsp; <span
        class="br0">&#125;</span><br><span class="sc2">&lt;<span class="sy0">/</span><span
        class="kw2">script</span>&gt;</span><br><span class="sc2">&lt;<span
        class="kw2">script</span>></span><br>Benchmark.<span class="me1">prototype</span>.<span
        class="me1">setup</span> <span class="sy0">=</span> <span class="kw2">function</span><span
        class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br>&nbsp; window.<span
        class="me1">foo</span> <span class="sy0">=</span> <span class="nu0">42</span><span
        class="sy0">;</span><br>&nbsp; <span class="kw2">var</span> x <span
        class="sy0">=</span> arr<span class="sy0">;</span><br><span class="br0">}</span><span
        class="sy0">;</span><br><br>Benchmark.<span class="me1">prototype</span>.<span
        class="me1">teardown</span> <span class="sy0">=</span> <span class="kw2">function</span><span
        class="br0">(</span><span class="br0">) </span><span class="br0">{</span><br>&nbsp; window.<span
        class="me1">foo</span> <span class="sy0">=</span> <span class="nu0">24</span><span
        class="sy0">;</span><br><span class="br0">}</span><span class="sy0">;</span><br><span
        class="sc2">&lt;<span class="sy0">/</span><span class="kw2">script</span>></span></code></pre>
    </section>
  
    <section>
      <h2>Preparation code output</h2>
      <div class="user-output">
        <div>Lorem ipsum</div>
      </div>
    </section>
  
    <section id="runner">
      <h2>Test runner</h2>
      <p id="firebug">
        <strong>Warning! For accurate results, please disable Firebug before running the tests. <a href="http://jsperf.com/faq#firebug-warning">(Why?)</a></strong>
      </p>
      <p id="java">
        <strong>Java applet disabled.</strong>
      </p>
      <p id="status">
        <noscript>
          <strong>To run the tests, please <a href="http://enable-javascript.com/">enable JavaScript</a> and reload the page.</strong>
        </noscript>
      </p>
      <div id="controls">
        <button id="run" type="button"></button>
      </div>
      <table id="test-table">
        <caption>Testing in <span id="user-agent"></span></caption>
        <thead>
        <tr>
          <th colspan="2">Test</th>
          <th title="Operations per second (higher is better)">Ops/sec</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th scope="row" id="title-1">
            <div>Normal</div>
          </th>
          <td class="code">
            <pre><code>x.<span class="me1">sort</span><span class="br0">&#40;</span><span
              class="kw2">function</span><span class="br0">&#40;</span>a<span
              class="sy0">,</span> b<span class="br0">&#41;</span> <span
              class="br0">&#123;</span><br>&nbsp; <span class="kw1">return</span> a <span
              class="sy0">-</span> b<span class="sy0">;</span><br><span
              class="br0">&#125;</span><span class="br0">&#41;</span><span
              class="sy0">;</span></code></pre>
          </td>
          <td id="results-1" class="results"></td>
        </tr>
        <tr>
          <th scope="row" id="title-2">
            <div>Exit Early</div>
          </th>
          <td class="code">
            <pre><code>x.<span class="me1">sort</span><span class="br0">&#40;</span><span
              class="kw2">function</span><span class="br0">&#40;</span>a<span
              class="sy0">,</span> b<span class="br0">&#41;</span> <span
              class="br0">&#123;</span><br>&nbsp; <span class="kw1">return</span> a <span
              class="sy0">-</span> b<span class="sy0">;</span><br><span
              class="br0">&#125;</span><span class="br0">&#41;</span><span
              class="sy0">;</span><br><span class="kw1">return</span><span
              class="sy0">;</span></code></pre>
          </td>
          <td id="results-2" class="results"></td>
        </tr>
        <tr>
          <th scope="row" id="title-3">
            <div>Async</div>
          </th>
          <td class="code">
            <pre><code><strong class="co1">// async test</strong><br>setTimeout<span
              class="br0">&#40;</span><span class="kw2">function</span><span
              class="br0">&#40;</span><span class="br0">&#41;</span> <span
              class="br0">&#123;</span><br>&nbsp; deferred.<span
              class="me1">resolve</span><span class="br0">&#40;</span><span
              class="br0">&#41;</span><span class="sy0">;</span><br><span
              class="br0">&#125;</span><span class="sy0">,</span> <span
              class="nu0">10</span><span class="br0">&#41;</span><span
              class="sy0">;</span></code></pre>
          </td>
          <td id="results-3" class="results"></td>
        </tr>
        <tr>
          <th scope="row" id="title-4">
            <div>Error</div>
          </th>
          <td class="code">
            <pre><code>x.<span class="me1">foo</span><span class="br0">&#40;</span><span
              class="br0">&#41;</span><span class="sy0">;</span> <span
              class="co1">// unknown method</span></code></pre>
          </td>
          <td id="results-4" class="results"></td>
        </tr>
        <tr>
          <th scope="row" id="title-5">
            <div>Comments</div>
          </th>
          <td class="code">
            <pre><code><span class="co1">// comments at start</span><br>x.<span
              class="me1">reverse</span><span class="br0">&#40;</span><span
              class="br0">&#41;</span>.<span class="me1">sort</span><span
              class="br0">&#40;</span><span class="kw2">function</span><span
              class="br0">&#40;</span>a<span class="sy0">,</span> b<span
              class="br0">&#41;</span> <span class="br0">&#123;</span><br>&nbsp; <span
              class="kw1">return</span> a <span class="sy0">-</span> b<span
              class="sy0">;</span><br><span class="br0">&#125;</span><span
              class="br0">&#41;</span><span class="sy0">;</span><br><span
              class="co1">// comments at end</span></code></pre>
          </td>
          <td id="results-5" class="results"></td>
        </tr>
        </tbody>
      </table>
  
      <p>
        You can <a href="#" rel="nofollow">edit these tests or add even more tests to this page</a>
        by appending <code>/edit</code> to the URL.
      </p>
    </section>
  
    <section>
      <h2 id="results">Compare results of other browsers</h2>
      <div id="bs-results"></div>
    </section>
  
    <section id="comments">
      <h1>0 comments</h1>
      <div id="comments-wrapper">
        <form action="#comment-form" method="post" id="comment-form">
          <fieldset>
            <h2>Add a comment</h2>
            <div>
              <label for="author">Name <em title="This field is required">*</em></label>
              <input type="text" name="author" id="author" required>
            </div>
            <div>
              <label for="author-email">Email <em title="This field is required">*</em></label>
              <label class="inline">
                <input type="email" name="author-email" id="author-email" required> (only used for Gravatar)
              </label>
            </div>
            <div>
              <label for="author-url">URL </label>
              <input type="url" name="author-url" id="author-url">
            </div>
            <div>
              <label for="message">Message <em title="This field is required">*</em><span>Markdown syntax is allowed</span></label>
              <textarea name="message" id="message" required></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>
            <div class="buttons">
              <input type="submit" class="submit" value="Add comment">
            </div>
          </fieldset>
        </form>
      </div>
    </section>
  </article>
  
  <footer>
    &copy; 2011 <a href="http://jsperf.com/">jsPerf.com</a>
    &middot; <a href="http://jsperf.com/browse">Browse</a>
    &middot; <a href="http://jsperf.com/popular">Popular tests</a>
    &middot; <a href="http://jsperf.com/faq">FAQ</a>
    &middot; <a href="http://jsperf.com/faq#donate">Donate</a>
    &middot; <a href="http://twitter.com/jsprf" rel="nofollow">twitter: @jsprf</a>
    &middot; <a href="http://benchmarkjs.com/">Benchmark.js</a>
    &middot; by <a href="http://mathiasbynens.be/" title="Mathias Bynens, front-end web developer">@mathias</a>
  </footer>
  
  <script src="../../vendor/platform.js/platform.js"></script>
  <script src="../../benchmark.js"></script>
  <script src="ui.js"></script>
  <script src="../../plugins/ui.browserscope.js"></script>
  <script>
    var arr = [1, 5, 4, 2, 3];
  
    function init() {
      window.console && console.log('init called');
    }
  </script>
  <script>
    ui.browserscope.key = 'agt1YS1wcm9maWxlcnINCxIEVGVzdBjR6NELDA';
    ui.browserscope.selector = '#bs-results';
  
    ui.add('Normal', '\
      x.sort(function(a, b) {\n\
        return a - b;\n\
      });'
    )
    .add('Exit Early', '\
      x.sort(function(a, b) {\n\
        return a - b;\n\
      });\n\
      return;'
    )
    .add('Async', {
      'defer': true,
      'fn': '\
        setTimeout(function() {\n\
          deferred.resolve();\n\
        }, 10);'
    })
    .add('Error', '\
      x.foo(); // unknown method'
    )
    .add('Comments', '\
      // comments at start\n\
      x.reverse().sort(function(a, b) {\n\
        return a - b;\n\
      });\n\
      // comments at end'
    );
  
    Benchmark.prototype.setup = '\
      window.foo = 42;\n\
      var x = arr;';
  
    Benchmark.prototype.teardown = '\
      window.foo = 24;';
  </script>
  </body>
  </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.