DOM.create vs jquery

JavaScript performance comparison

Revision 11 of this test case created

Info

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

/*
---

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
  - adapted by Graeme Yeates

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

provides: [Elements.from, Elements.From]

...
*/

window.addEvent("domready", 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 table_re = /^\s*<(t[dhr]|tbody|tfoot|thead)/i;
    var range = document.createRange();
    if(range.createContextualFragment) {
        var reference = document.getElement("div");
        range.selectNode(reference);

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

            var match = text.match(table_re);
            if(match) return tableFix(match,text);

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

    } else { //fall back for ie<9
        Elements.from2 = function(text, excludeScripts){
            if (excludeScripts || excludeScripts == null) text = text.stripScripts();

            var match = text.match(table_re);
            if(match) return tableFix(match,text);

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

/*
---

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.from = function(text, excludeScripts){
        if (excludeScripts || excludeScripts == null) text = text.stripScripts();

        var container, match = text.match(/^\s*(?:<!--.*?-->\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