javascript

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <div class="tbody">
        </div>
      
<script>
Benchmark.prototype.teardown = function() {
  $('.tbody table').remove();

};
</script>

Preparation code output

<div class="tbody"> </div>

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
original
/*global $*/
var i, td, n = 360;

/**
 * n should be configurable
 * The code should work with n from 0 to 360
 */

(function() {

  "use strict";

  var processTd, generateTable, processPage;

  processTd = function processTd(index) {
    function setOrientation(angle, index) {
      var element = $($('.tbody td:odd')[index]);

      if (angle <= 22 || angle >= 338) {
        element.html('NORTH');
      } else if (angle > 22 && angle <= 67) {
        element.html('NORTHEAST');
      } else if (angle > 67 && angle <= 112) {
        element.html('EAST');
      } else if (angle > 112 && angle <= 157) {
        element.html('SOUTHEAST');
      } else if (angle > 157 && angle <= 202) {
        element.html('SOUTH');
      } else if (angle > 202 && angle <= 247) {
        element.html('SOUTHWEST');
      } else if (angle > 247 && angle <= 292) {
        element.html('WEST');
      } else if (angle > 292 && angle <= 338) {
        element.html('NORTHWEST');
      }
    }
    setOrientation(index, index);
  };
  generateTable = function generateTable() {
    console.log('generateTable');
    var processPage = function processPage() {
      for (i = 0; i < $('.tbody td:even').length; i += 1) {
        $('.tbody td:even')[i].innerHTML = i;
      }
      for (i = 0; i < $('.tbody td:odd').length; i += 1) {
        processTd(i);
      }
    };
    $('.tbody')[0].innerHTML += '<table></table>';
    for (i = 0; i <= n; i += 1) {
      $('.tbody table')[0].innerHTML += '<tr><td></td><td></td></tr>';
    }
    processPage();
    $('.tbody table').prepend($('<tr style="font-weight:bold"><td>Angle</td><td>Direction</td></tr>'));
  };

  $(document).ready(generateTable);

}());
pending…
improved
var n = 360;

function processTd(angle) {
  if (angle <= 157) {
    if (angle <= 67) {
      if (angle <= 22)
        return 'NORTH';
      else
        return 'NORTHEAST';
    } else {
      if (angle <= 112)
        return 'EAST';
      else
        return 'SOUTHEAST';
    }
  } else {
    if (angle <= 247) {
      if (angle <= 202)
        return 'SOUTH';
      else
        return 'SOUTHWEST';
    } else {
      if (angle <= 292)
        return 'WEST';
      else if (angle < 338)
        return 'NORTHWEST';
      else
        return 'NORTH';
    }
  }
};

function generateTable() {
  var table = '<table><tbody><tr style="font-weight:bold"><td>Angle</td><td>Direction</td></tr></tbody>',
    i, len = n;
  for (i = 0; i <= len; i++) {
    table += '<tbody><tr><td>' + i + '</td><td>' + processTd(i) + '</td></tr></tbody>';
  }
  $('.tbody').html(table + '</table>');
};

generateTable();
pending…
improved .min
var n = 360;

function processTd(a) {
  return 157 >= a ? 67 >= a ? 22 >= a ? "NORTH" : "NORTHEAST" : 112 >= a ? "EAST" : "SOUTHEAST" : 247 >= a ? 202 >= a ? "SOUTH" : "SOUTHWEST" : 292 >= a ? "WEST" : 338 > a ? "NORTHWEST" : "NORTH"
}

function generateTable() {
  var a = '<table><tbody><tr style="font-weight:bold"><td>Angle</td><td>Direction</td></tr></tbody>',
    b, c = n;
  for (b = 0; b <= c; b++) a += "<tbody><tr><td>" + b + "</td><td>" + processTd(b) + "</td></tr></tbody>";
  $(".tbody").html(a + "</table>")
}
generateTable();
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.

0 Comments