DOM.create vs jquery (v15)

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

/*
---

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 getChildren($ele) {return new Elements($ele.childNodes);}//fix for #2527
    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 getChildren(container.set('html', text));
    }
    var table_re = /^\s*<(t[dhr]|tbody|tfoot|thead)/i;
    var range = document.createRange && document.createRange();
    if(range && 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);

            return getChildren(range.createContextualFragment(text));
        };

    } 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 getChildren(new Element('div').set('html', text));
        };
    }
});

/*
---

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 new Elements((container || new Element('div')).set('html', text).childNodes);
};

</script>

Setup

var short = "test <span>Short test string</span> ya"
    var normal = "<a id='a1' rel='b2'><span>Couple eles to parse </span><i>through</i></a> and some outside"
    var long = '<footer><a href="/">Add test</a> · <a href="/browse">Latest</a> · <a href="/popular">Popular</a> · <a href="/faq">FAQ</a> · <a href="/faq#donate">Donate</a> · <a href="//twitter.com/jsperf" rel="nofollow">twitter: @jsperf</a> · <a href="https://github.com/mathiasbynens/jsperf.com">source on GitHub</a> · <a href="//benchmarkjs.com/">Benchmark.js</a> · by <a href="//mathiasbynens.be/">@mathias</a> and <a href="/contributors">contributors</a></footer>'

Test runner

Ready to run.

Testing in
TestOps/sec
jquery#create(HtmlString)
jQuery.parseHTML(short);
jQuery.parseHTML(normal);
jQuery.parseHTML(long);
ready
DOM#create(HtmlString)
DOM.create(short);
DOM.create(normal);
DOM.create(long);
ready
Element.from(html str)
Elements.from(short);
Elements.from(normal);
Elements.from(long);
ready
Elements.from2(html str)
Elements.from2(short);
Elements.from2(normal);
Elements.from2(long);
ready
Native
document.createElement('div').innerHTML = short;
document.createElement('div').innerHTML = normal;
document.createElement('div').innerHTML = long;
ready

Revisions

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