DOM.create vs jquery

JavaScript performance comparison

Revision 23 of this test case created by Emanuel Jackstare

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.7.0/dist/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]

...
*/

(function() {
    var range;

    window.addEvent('domready', function(){
        range = document.createRange && document.createRange();
        if(range.createContextualFragment) { //ie >= 9
            range.selectNode(document.getElement('div'));
        } else {
            range = null;
        }
    });

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

        var match = text.match(/^\s*<(t[dhr]|tbody|tfoot|thead)/i);
        if(match) {//table fix
            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 new Elements(container.set('html', text).childNodes);
        }

       return new Elements((range ? range.createContextualFragment(text) : //use faster range if available
                                     new Element('div').set('html', text)).childNodes);
    };
})();

/*
---

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>
<script>
Benchmark.prototype.setup = function() {
    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>'
};
</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.parseHTML(short);
jQuery.parseHTML(normal);
jQuery.parseHTML(long);
pending…
DOM#create(HtmlString)
DOM.create(short);
DOM.create(normal);
DOM.create(long);
pending…
Element.from(html str)
Elements.from(short);
Elements.from(normal);
Elements.from(long);
pending…
Elements.from2(html str)
Elements.from2(short);
Elements.from2(normal);
Elements.from2(long);
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