DOM.create vs jquery

JavaScript performance comparison

Revision 5 of this test case created by Graeme Y

Info

Compare performance of the better-dom library and jquery in typical cases

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
<script src="//rawgithub.com/chemerisuk/better-dom/v1.2.0/better-dom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script>

//experimental function I just wrote...
(function(){
var range = document.createRange();
// make the parent of the first div in the document becomes the context node
range.selectNode(document.getElement("div"));

Elements.from2 = function(text, excludeScripts) {
    if (excludeScripts || excludeScripts == null) text = text.stripScripts();
    var elements = range.createContextualFragment(text).childNodes;
    return new Elements(elements);
};

})()

Elements.from = function (text, excludeScripts){
        if (excludeScripts || excludeScripts == null) text = text.stripScripts();

        var container, match = text.match(/^\s*<(t[dhr]|tbody|tfoot|thead)/i);

        if (match){
                container = new Element('table');
                var tag = match[1].toLowerCase();
                if (['td', 'th', 'tr'].contains(tag)){
                        container = new Element('tbody').inject(container);
                        if (tag != 'tr') container = new Element('tr').inject(container);
                }
        }

        return (container || new Element('div')).set('html', text).getChildren();
}


</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
jquery#create(HtmlString)
jQuery("<a id='a1' rel='b2'><span></span><i></i></a>");
pending…
DOM#create(HtmlString)
DOM.create("<a id='a1' rel='b2'><span></span><i></i></a>");
pending…
jquery#create(Options)
jQuery("<a>", {id: "a1", rel: "b2"}).append("<span>").append("<i>");
pending…
DOM#create(Options)
DOM.create("a#a1[rel=b2]").append("<span></span>").append("<i></i>")
pending…
DOM#create(EmmetString)
DOM.create("a#a1[rel=b2]>span+i");
pending…
Element.from(html str)
Elements.from("<a id='a1' rel='b2'><span></span><i></i></a>")
pending…
Elements.from2(html str)
Elements.from2("<a id='a1' rel='b2'><span></span><i></i></a>")
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