delayed onload

JavaScript performance comparison

Test case created by Phil Parsons

Preparation code

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title>
    </title>
    <script type='text/javascript'>
      window.q = [];
      window.$ = function(f) {
        q.push(f)
      }
    </script>
  </head>
  
  <body>
    <div>
      <script>
        $(function() {
          console.log("wallop");
        });
      </script>
      <nav>
        <ol>
          <li>
            <a href="##">1</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">2</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">3</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">4</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">5</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">6</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">7</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">8</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
          <li>
            <a href="##">9</a>
<script>
        $(function() {
          console.log("wallop");
        });
      </script>
          </li>
        </ol>
      </nav>
      <script>
        $(function() {
          $("a").click(function(ev) {
            ev.preventDefault();
            console.log($(this).text());
            });
          });
      </script>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
  </body>

</html>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
with onload
 
$(function() {
  $.each(q, function(index, f) {
    f();
  });
});
 pending…
without
 
$.each(q, function(index, f) {
  $(f);
});
 pending…

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:

2 comments

Phil Parsons (revision owner) commented : ∞

What the hell is with the IE9 results :/

Peter Leing commented : ∞

With the console active, results are more normal (2,000 or less). I don't know how to confirm this, but maybe IE's Dead Code Elimination is preventing the console.log from executing. Creating a function that does nothing.

Add a comment