makedom3

JavaScript performance comparison

Revision 2 of this test case created by Alexander Schmitz

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
(function( $, undefined ) {

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

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

        return ret;
}

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

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

        return ret;
}

$.createDom = function( j ) {
        return ( ( $.type( j ) === "object" ) ? mkEl( j ) :
                ( ( $.type( j ) === "array" ) ? mkChildren( j ) :
                        undefined ) );
};

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