jquery vs createElement

JavaScript performance comparison

Revision 8 of this test case created by VovanR

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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
var test = (function () {
    var b = $(document.createElement('div'))
        .addClass('b-text-wrapper')
        .append($(document.createElement('div'))
            .addClass('b-text-scroller js-text-scroller')
            .append($(document.createElement('div'))
                .addClass('b-text js-text')
                .html('Lol<br>ROFL!'.replace(/\n/g, '<br>'))
            )
        );
    return b;
})();
pending…
createElement
var test = (function () {
    var b = $(document.createElement('div'))
        .addClass('b-text-wrapper')
        .html(
            '<div class="b-text-scroller js-text-scroller">' +
            '<div class="b-text js-text">' +
            'Lol<br>ROFL!'.replace(/\n/g, '<br>') +
            '</div>' +
            '</div>'
        );
    return b;
})();
pending…
o
var test = (function () {
    var b = $(document.createElement('div'), {
            'class': 'b-text-wrapper',
        })
        .append($(document.createElement('div'), {
            'class': 'b-text-scroller js-text-scroller'
            })
            .append($(document.createElement('div'), {
                'class': 'b-text js-text',
                text: 'Lol<br>ROFL!'.replace(/\n/g, '<br>'),
            }))
        );
    return b;
})();
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