jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

document-fragment

Benchmark created on June 29, 2011

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="container">
</div>
<script>
  var color0 = 'white';
  var color1 = 'blue';
  var color2 = 'yellow';
  var color3 = 'red';
  var color4 = 'black';
  var map = [
  
    [
      [36, color0],
      [6, color3]
    ],
    [
      [32, color0],
      [12, color3]
    ],
    [
      [29, color0],
      [16, color3]
    ],
    [
      [26, color0],
      [8, color3],
      [4, color2],
      [7, color3]
    ],
    [
      [23, color0],
      [10, color3],
      [4, color2],
      [9, color3]
    ],
    [
      [23, color0],
      [7, color3],
      [9, color2],
      [7, color3]
    ],
    [
      [20, color0],
      [8, color3],
      [11, color2],
      [2, color3],
      [3, color2],
      [2, color3]
    ],
    [
      [19, color0],
      [5, color3],
      [13, color2],
      [2, color3],
      [1, color2],
      [1, color3],
      [1, color2],
      [4, color3]
    ],
    [
      [18, color0],
      [4, color3],
      [14, color2],
      [2, color3],
      [4, color2],
      [3, color3]
    ],
    [
      [17, color0],
      [4, color3],
      [3, color0],
      [12, color2],
      [1, color3],
      [4, color2],
      [4, color3]
    ],
    [
      [17, color0],
      [4, color3],
      [4, color4],
      [10, color2],
      [1, color3],
      [4, color2],
      [4, color3]
    ],
    [
      [16, color0],
      [4, color3],
      [4, color4],
      [1, color0],
      [1, color4],
      [8, color2],
      [2, color3],
      [4, color2],
      [4, color3]
    ],
    [
      [15, color0],
      [4, color3],
      [1, color2],
      [1, color4],
      [3, color0],
      [2, color4],
      [7, color2],
      [2, color3],
      [4, color2],
      [5, color3]
    ],
    [
      [14, color0],
      [5, color3],
      [2, color2],
      [5, color4],
      [7, color2],
      [1, color3],
      [4, color2],
      [5, color3]
    ],
    [
      [13, color0],
      [3, color3],
      [6, color2],
      [2, color4],
      [8, color2],
      [2, color3],
      [3, color2],
      [6, color3]
    ],
    [
      [13, color0],
      [2, color3],
      [16, color2],
      [2, color3],
      [3, color2],
      [6, color3]
    ],
    [
      [12, color0],
      [2, color3],
      [16, color2],
      [1, color3],
      [4, color2],
      [7, color3]
    ],
    [
      [12, color0],
      [1, color3],
      [16, color2],
      [2, color3],
      [3, color2],
      [8, color3]
    ],
    [
      [11, color0],
      [2, color3],
      [16, color2],
      [1, color3],
      [4, color2],
      [7, color3]
    ],
    [
      [11, color0],
      [1, color3],
      [16, color2],
      [1, color3],
      [4, color2],
      [8, color3]
    ],
    [
      [11, color0],
      [2, color3],
      [14, color2],
      [2, color3],
      [5, color2],
      [7, color3]
    ],
    [
      [11, color0],
      [1, color3],
      [14, color2],
      [2, color3],
      [5, color2],
      [7, color3]
    ],
    [
      [10, color0],
      [2, color3],
      [2, color2],
      [3, color3],
      [8, color2],
      [2, color3],
      [4, color2],
      [9, color3]
    ],
    [
      [9, color0],
      [2, color3],
      [2, color2],
      [5, color3],
      [6, color2],
      [2, color3],
      [4, color2],
      [10, color3]
    ],
    [
      [9, color0],
      [1, color3],
      [3, color2],
      [5, color3],
      [4, color2],
      [2, color3],
      [5, color2],
      [10, color3]
    ],
    [
      [8, color0],
      [2, color3],
      [2, color2],
      [6, color3],
      [4, color2],
      [1, color3],
      [5, color2],
      [11, color3]
    ],
    [
      [7, color0],
      [2, color3],
      [1, color2],
      [8, color3],
      [1, color2],
      [1, color3],
      [7, color2],
      [11, color3]
    ],
    [
      [7, color0],
      [1, color3],
      [2, color2],
      [10, color3],
      [5, color2],
      [13, color3]
    ],
    [
      [6, color0],
      [2, color3],
      [1, color2],
      [4, color3],
      [2, color2],
      [5, color3],
      [3, color2],
      [15, color3]
    ],
    [
      [5, color0],
      [2, color3],
      [4, color2],
      [2, color3],
      [2, color2],
      [3, color3],
      [4, color2],
      [15, color3]
    ],
    [
      [5, color0],
      [2, color3],
      [9, color2],
      [2, color3],
      [2, color2],
      [17, color3]
    ],
    [
      [5, color0],
      [2, color3],
      [12, color2],
      [17, color3]
    ],
    [
      [5, color0],
      [2, color1],
      [11, color2],
      [17, color3]
    ],
    [
      [5, color0],
      [1, color1],
      [10, color2],
      [18, color3]
    ],
    [
      [5, color0],
      [1, color1],
      [2, color2],
      [1, color3],
      [1, color2],
      [2, color3],
      [5, color2],
      [17, color3]
    ],
    [
      [4, color0],
      [2, color1],
      [1, color2],
      [5, color3],
      [6, color2],
      [5, color3],
      [4, color1],
      [6, color3]
    ],
    [
      [4, color0],
      [1, color1],
      [2, color2],
      [6, color3],
      [5, color2],
      [4, color3],
      [4, color1],
      [7, color3]
    ],
    [
      [4, color0],
      [1, color1],
      [2, color2],
      [6, color3],
      [5, color2],
      [4, color3],
      [4, color1],
      [7, color3]
    ],
    [
      [3, color0],
      [2, color1],
      [3, color2],
      [3, color3],
      [4, color2],
      [7, color3],
      [5, color1],
      [6, color3]
    ],
    [
      [3, color0],
      [2, color1],
      [3, color2],
      [3, color3],
      [3, color2],
      [1, color1],
      [6, color3],
      [5, color1],
      [6, color3]
    ],
    [
      [2, color0],
      [4, color1],
      [2, color2],
      [2, color3],
      [4, color2],
      [2, color1],
      [4, color3],
      [6, color1],
      [5, color3]
    ],
    [
      [1, color0],
      [5, color1],
      [2, color2],
      [2, color3],
      [3, color2],
      [4, color1],
      [1, color3],
      [8, color1],
      [5, color3]
    ],
    [
      [6, color1],
      [3, color2],
      [1, color3],
      [3, color2],
      [13, color1],
      [4, color3]
    ],
    [
      [8, color1],
      [5, color2],
      [15, color1],
      [2, color3]
    ],
    [
      [8, color1],
      [4, color2],
      [2, color3],
      [15, color1]
    ],
    [
      [9, color1],
      [3, color2],
      [2, color3],
      [14, color1]
    ],
    [
      [28, color1]
    ],
    [
      [28, color1]
    ],
    [
      [28, color1]
    ]
  ];
</script>

Test runner

Ready to run.

Test Ops/sec

normal

Testing in
Test	Ops/sec
normal	`$(function() { for (var i = 0; i < map.length; i++) { $('#container').append('<div class="blank"></div>'); for (var j = 0; j < map[i].length; j++) { for (var k = 0; k < map[i][j][0]; k++) { $('<div/>').css({ 'background-color': map[i][j][1], }).appendTo('#container'); } } } });`	ready
fragment	document.ready = function() { var fragment = document.createDocumentFragment(); var elm; for (var i = 0; i < map.length; i++) { elm = document.createElement('div'); elm.className = 'blank'; fragment.appendChild(elm); for (var j = 0; j < map[i].length; j++) { for (var k = 0; k < map[i][j][0]; k++) { elm = document.createElement('div'); elm.className = map[i][j][1]; fragment.appendChild(elm); } } } document.getElementById('container').appendChild(fragment); };	ready

$(function() {
  for (var i = 0; i < map.length; i++) {
    $('#container').append('<div class="blank"></div>');
    for (var j = 0; j < map[i].length; j++) {
      for (var k = 0; k < map[i][j][0]; k++) {
        $('<div/>').css({
          'background-color': map[i][j][1],
        }).appendTo('#container');
      }
    }
  }
});

ready

fragment

document.ready = function() {
  var fragment = document.createDocumentFragment();
  var elm;
  for (var i = 0; i < map.length; i++) {
    elm = document.createElement('div');
    elm.className = 'blank';
    fragment.appendChild(elm);
    for (var j = 0; j < map[i].length; j++) {
      for (var k = 0; k < map[i][j][0]; k++) {
        elm = document.createElement('div');
        elm.className = map[i][j][1];
        fragment.appendChild(elm);
      }
    }
  }
  document.getElementById('container').appendChild(fragment);
};

ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published on June 29, 2011