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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
  </body>

</html>
    

Preparation code output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> </title> </head> <body> <div> <nav> <ol> <li> <a href="##">1</a> </li> <li> <a href="##">2</a> </li> <li> <a href="##">3</a> </li> <li> <a href="##">4</a> </li> <li> <a href="##">5</a> </li> <li> <a href="##">6</a> </li> <li> <a href="##">7</a> </li> <li> <a href="##">8</a> </li> <li> <a href="##">9</a> </li> </ol> </nav> </div> </body> </html>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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.

3 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.

Oğuz Çelikdemir commented :

With Quad Core 3.2 Ghz / Win 7 x64, with onload IE 9.0.811 = 223.728 ops/sec Chrome Canary 26.0.13870 = 1875 ops/sec Firefox 18 = 518 ops/sec Opera 12.12 = 2788 ops/sec Safari 5.1.7 = 1329 ops/sec

As a result, IE incredibly fast, such a bad browser,unbelievable!