makedom3

JavaScript performance comparison

Revision 4 of this test case created by Gabriel Schulhof

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function makeDOM(o,to){
            var ele = document.createElement(o.element);
            for (var prop in o.props) {
              ele.setAttribute(prop, o.props[prop]);
           }
           ele.innerHTML = o.contents;
           return ele;
        }
(function( $, undefined ) {

//el can be one of two things:
// 1. [ tagname, { attr: value, ... }, [ children ] ]
// 2. "a string"
var mkEl = function( el ) {
                var ret, key, attr, children, child;

                if ( $.type( el ) === "string" ) {
                        ret = document.createTextNode( el );
                } else {
                        ret = document.createElement( el[ 0 ] );
                        for( attr in el[ 1 ] ) {
                                ret.setAttribute( attr, el[ 1 ][ attr ] );
                        }
                        children = mkChildren( el[ 2 ] );
                        for( child in children ) {
                                ret.appendChild( children[ child ] );
                        }
                }

                return ret;
},

mkChildren = function( c ) {
        var ret = [], idx;

        for ( idx in c ) {
                ret.push( mkEl( c[ idx ] ) );
        }

        return ret;
}

$.createDom = mkEl;

})( jQuery );
</script>
<script>
Benchmark.prototype.teardown = function() {
    $(".foo").remove();
};
</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
makeDom
$("<a id='foo' class='foo' href='/foobar.html'><span class='bar'>foo</span></a>").appendTo('body');
pending…
native
var linkElement = document.createElement( 'a' );
linkElement.href = '/foobar.html';
linkElement.className = "foo";
linkElement.id = "linkid";
linkElement.innerHTML = "<span class='bar'>foo</span>";
$( linkElement ).appendTo( "body" );
pending…
createDom
var ele = [ 'a',
  {
    'id':"foo",
    'class':'foo',
    'href':'/foobar.html'
  },
  [
          [ "span" , {class:'bar'}, [ "foo" ] ]
  ]
];
          $($.createDom(ele)).appendTo('body');
pending…
jquery
var ele = makeDOM({
      "element":"a",
      "props":{
        "className":"foo",
        "href":"/foobar.html",
        "id":"linkid"
      },
      "contents":"<span class='bar'>foo</span>"
    },"body");
$(ele).appendTo('body');
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