DOM.create vs jquery (v5)

Revision 5 of this benchmark created by Graeme Y on


Description

Compare performance of the better-dom library and jquery 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>

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

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

Revisions

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