document-fragment

Benchmark created on


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.

Testing in
TestOps/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

Revisions

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