Element Creation

JavaScript performance comparison

Revision 5 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
  .hidden { display: none; }
</style>
<div class="hidden" id="container">
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var container = document.getElementById('container'),
      _ = {},
      $ = {};
  
  var basis = {};
  
  function tag_ctor(tag) {
    basis[tag] = document.createElement(tag);
    _[tag] = function(attrs) {
      var el = basis[tag].cloneNode(false);
      if (attrs) {
        Object.keys(attrs).forEach(function(it) {
          el.setAttribute(it, attrs[it]);
        });
      }
      for (var i = 1; i < arguments.length; i++) {
        el.appendChild(arguments[i]);
      }
      return el;
    };
    return _[tag];
  }
  
  _.text = function(content) {
    return document.createTextNode(content);
  };
  
  _.__noSuchMethod__ = function(id, args) {
    var f = tag_ctor(id);
    return f.apply(window, args);
  };
  
  'table,tbody,tr,td'.split(',').forEach(function(tag) {
    var f = function(attrs) {
        var el = document.createElement(tag);
        if (attrs) {
          Object.keys(attrs).forEach(function(it) {
            el.setAttribute(it, attrs[it]);
          });
        }
        for (var i = 1; i < arguments.length; i++) {
          el.appendChild(arguments[i]);
        }
        return el;
        };
    $[tag] = f;
  });
  
  function buildera() {
    var t = _.table(undefined);
  }
  
  function builderb() {
    var t = $.table(undefined);
  }
  
  function html() {
    container.innerHTML = '<table></table>';
  }

};
</script>

Preparation code output

<style> .hidden { display: none; } </style> <div class="hidden" id="container"> </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
Clone
buildera();
pending…
Create
builderb();
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