Preparation code

<div id="insert-into"></div>
<script>
  Benchmark.prototype.setup = function() {
    var html;
    var obj = {
      header: 'header test',
      body: 'body text lorem ipsum'
    };
    
    insert = document.getElementById('insert-into');
  };

  Benchmark.prototype.teardown = function() {
    html = '';
    insert.innerHTML = '';
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

html = ['<div class="container"><h1>'];
html.push(obj.header);
html.push('</h1><div class="content"><div class="content">');
html.push(obj.body);
html.push('</div></div>');

var div = document.createElement('div');
div.innerHTML = html.join('');

insert.appendChild(div);

var frag = document.createDocumentFragment();
var h1 = document.createElement('h1');
h1.text = obj.header;
var content = document.createElement('div');
content.className = 'content';
content.text = obj.body;

var div = document.createElement('div');
div.appendChild(frag);

insert.appendChild(div);

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

Compare results of other browsers

0 comments