dom-vs-ccf

JavaScript performance comparison

Test case created

Preparation code

<script>
(function() {
  var doc = document;
  var element0 = doc.createDocumentFragment();

  var range = doc.createRange();
  range.setStart(doc.createElement('div'), 0);
  range.collapse(false);

  window.usingCCF = function(html) {
    return range.createContextualFragment(html);
  }

  window.usingPrecompiler = function(document) {
    var element1 = doc.createElement('div');
    element1.className = 'foo';

    var element2 = doc.createElement('p');
    var element3 = doc.createElement('span');
    element3.id = 'bar';
    element3.textContent = 'hi!';

    element2.appendChild(element3);
    element1.appendChild(element2);
    element0.appendChild(element1);

    element0.appendChild(doc.createTextNode(' More content'));
    return element0;
  };
})();
</script>
<div id="container"></div>
<script>
  Benchmark.prototype.setup = function() {
    var container = document.getElementById('container');
    var usingCCF = window.usingCCF;
    var usingPrecompiler = window.usingPrecompiler;
  };

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

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
ccf
 
var html = '<div class="foo">';
var hi = 'hi!';

html += '<p>';
html += '<span id="bar">';
html += hi;
html += '</span>';
html += '</p>';
html += '</div>';
html += ' More content';

container.appendChild(usingCCF(html));
 pending…
precompiler
 
container.appendChild(usingPrecompiler());
 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. Here’s a list of current revisions for this page:

0 comments

Add a comment