DOM.create vs jquery (v6)

Revision 6 of this benchmark created on

Description

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

Preparation HTML

<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>

//added table case

//experimental function I just wrote... 
(function(){
function tableFix(match, text) {
    var 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.set('html', text).getChildren();
}

var range = document.createRange();
if(range.createContextualFragment) {//not supported on ie<9

    // make the parent of the first div in the document becomes the context node
    var reference = document.getElement("div");
    range.selectNode(reference);

    Elements.from2 = function(text, excludeScripts) {
        if (excludeScripts == true) text = text.stripScripts();

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

        var elements = range.createContextualFragment(text).childNodes;
        return new Elements(elements);
    };
//no table support
    Elements.from2nt = function(text, excludeScripts) {
        if (excludeScripts == true) text = text.stripScripts();

        var elements = range.createContextualFragment(text).childNodes;
        return new Elements(elements);
    };

} else {

/*
---

script: Elements.From.js

name: Elements.From

description: Returns a collection of elements from a string of html.

license: MIT-style license

authors:
  - Aaron Newton

requires:
  - Core/String
  - Core/Element
  - /MooTools.More

provides: [Elements.from, Elements.From]

...
*/

Elements.from2 = function(text, excludeScripts){
    if (excludeScripts == true) text = text.stripScripts();

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

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


Elements.fromnt = function(text, excludeScripts){
    if (excludeScripts == true) text = text.stripScripts();
    return new Element('div').set('html', text).getChildren();
};

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

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

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

})();


</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery#create(HtmlString)
jQuery("<a id='a1' rel='b2'><span></span><i></i></a>");
ready
DOM#create(HtmlString)
DOM.create("<a id='a1' rel='b2'><span></span><i></i></a>");
ready
jquery#create(Options)
jQuery("<a>", {id: "a1", rel: "b2"}).append("<span>").append("<i>");
ready
DOM#create(Options)
DOM.create("a#a1[rel=b2]").append("<span></span>").append("<i></i>")
ready
DOM#create(EmmetString)
DOM.create("a#a1[rel=b2]>span+i");
ready
Element.from(html str)
Elements.from("<a id='a1' rel='b2'><span></span><i></i></a>")
ready
Elements.from2(html str)
Elements.from2("<a id='a1' rel='b2'><span></span><i></i></a>")
ready
Elements.from (no table suppport)
Elements.fromnt("<a id='a1' rel='b2'><span></span><i></i></a>")
ready
Elements.from2 (no table suppport)
Elements.from2nt("<a id='a1' rel='b2'><span></span><i></i></a>")
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.